Element (DIV) rechts buiten wrapper levert scrollbars op

maandag 11 april 2011 13:17

Acties:

0 Henk 'm!

Topicstarter

Ik ben een site met een breedte van 996pixels aan het ontwikkelen. De designer van de site heeft links een logo wat 20 pixels naar links uit steekt, en rechts een stuk navigatie wat 40 pixels naar rechts uitsteekt.
Beide elementen bevatten klikbare elementen.

Ik kan beide uitstekende elementen absoluut positioneren. Het linker element positioneer ik met een left van -20px, het rechter element positioneer ik met een right van -40px.

Het linke uitstekende element geeft geen problemen, alsin, het levert geen horizontale scrollbar onderaan op bij resolutie van 1024x768 (met een viewport van 1014px in de breedte). Het rechter element levert echter bij die resolutie wèl een horizontale scrollbar op.

Het rechter uitstekende element geeft dus problemen.

Los van het toepassen van een andere oplossing voor het rechter element vraag ik me af: waarom levert het linker uitstekende element geen horizontale scrollbar op en het rechter uitstekende element wel?

Dit is de (nog kale) html/css:

code:

<!DOCTYPE html >
<html>
<head>
<title></title>
<style type="text/css">
#wrapper{
    width:996px;
    height:200px;
    position:relative;
    margin:0 auto;
    background:#f0f;
    z-index:2;
}
#sublogo{
    position:absolute;
    top:58px;
    left:-20px;
    width:126px;
    height:45px;
    background:#0f0;
    z-index:1;
}
#nav{
    position:absolute;
    top:20px;
    right:-40px;
    width:747px;
    height:56px;    
    background:#f0f;
    z-index:1;
}
#nav ul,
#nav ul li{
    margin:0;
    padding:0;
    list-style-type:none;
}
#nav ul li{
    float:left;
}
</style>

</head>
<body>
<div id="wrapper">
    <div id="nav">
        <ul>
            <li><a href="">item 1</a></li>
            <li><a href="">item 2</a></li>
            <li><a href="">item 3</a></li>
            <li><a href="">item 4</a></li>
            <li><a href="">item 5</a></li>
            <li><a href="">item 6</a></li>
            <li><a href="">item 7</a></li>
            <li><a href="">item 8</a></li>
            <li><a href="">item 9</a></li>
            <li><a href="">item 10</a></li>
        </ul>
    </div>
    <div id="sublogo" style=""></div>
</div>
</body>
</html>

Waar ik dus benieuwd naar ben en dus daarom de vraag nogmaals, waarom levert het rechter uitstekende element bij resolutie 1024x768 (met een viewport van 1014px in de breedte) wèl een horizontale scrollbar op en het linker uitstekende element niet?

maandag 11 april 2011 14:17

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

Design terugsturen. 996 is al te breed. 960 is ongeveer de gangbare breedte, o.a. ivm tablets zoals de iPad.

Antwoord op je vraag is simpel. Je document wordt alleen opgerekt als je rechts/onder langer wordt dan de viewport. Documenten zijn opgebouwd van linksboven naar rechtsonder.

[ Voor 106% gewijzigd door Bosmonster op 11-04-2011 14:21 ]

maandag 11 april 2011 14:23

Acties:

0 Henk 'm!

deBennie

Topicstarter

Bosmonster schreef op maandag 11 april 2011 @ 14:17:
Design terugsturen. 996 is al te breed.

Serieus? Ik heb bij 996 pixels in zowat alle browsers (windows: IE6, IE7, IE8, FF, Chrome, Safari, MAC: Chrome, Safari, FF) nog een klein strookje over...
Wat moet de max volgens jou zijn?

Antwoord op je vraag is simpel. Je document wordt alleen opgerekt als je rechts/onder langer wordt dan de viewport. Documenten zijn opgebouwd van linksboven naar rechtsonder.

Okay, klinkt logisch. Ik zie op internet een oplossing alsin je gooit een DIV om de wrapper heen met deze CSS:

code:

#outerContainer {
overflow: hidden;
min-width: 996px
}

IE7 pakt dit helaas niet...

Edit:
ah, ik zie dat je je post hebt aangepast, iPad en andere mobiele aparaten is geen issue in dit geval, daar komt een aparte oplossing voor. Thx voor het meedenken

[ Voor 10% gewijzigd door deBennie op 11-04-2011 14:24 ]

Onderwerpen