Archief - Website centreert niet

Dastardly · 29 okt 2011

tiens, dat iedereen zich afvraagt waar die position:relatives vandaan komen. standaard gaat uw browser die altijd als relative positioneren. de reden dat je dat expliciet vermeld is wegens 'bugs' in bepaalde browsers.

neem volgende divs:

HTML:

<div id="wrapper">
  <div id="content">
    <div id="menu">
    </div>
  </div>
</div>

wrapper is uw gecentreerde div die ge gebruikt om heel uw site te centreren. content is de wrapper voor uw daadwerkelijke inhoud. om een of andere reden ga je de div 'menu' absoluut willen positioneren. als je volgende stijl gebruikt:

Code:

#menu { position:absolute; top:50px; left:50px; }

ga je nu als resultaat hebben dat je menu ergens op 50px van de bovenkant en 50px van de linkerkant van je body staat. niet echt het verwachte resultaat aangezien je je content gecentreerd hebt met uw wrapper en eventueel lager hebt laten beginnen met uw 'content' div. door uw content div expliciet de volgende style te geven:

Code:

#content{ position:relative; }

gaat er uiteraard niks veranderen aan de positionering van uw div 'content'. wat er wel gaat gebeuren is dat uw div 'menu' nu op 50px van de bovenkant en 50px van de linkerkant van uw div 'content' staat.

die explicitiet op relative zetten zorgt er voor dat de positionering van onderliggende elementen correct is. ben het nu even kwijt of het zo in alle browsers is of enkel in IE (en misschien enkel in de oudere).

hoop dat dit het een beetje verklaard. is hetzelfde als met z-indexen. in sommige browsers moet je het parent item een hogere z-index geven om er voor te zorgen dat de z-index van zijn kinderen in orde is. meer uitleg daarover hier.

het kan dus zeker geen kwaad om het overal te doen (is immers standaard), maar ik doe het enkel waar nodig om de css toch zo leesbaar mogelijk te houden.

Zero Grav · 29 okt 2011

Standaard positioneert een browser op static, niet op relative. Wat op zich wel waar is is dat dat ongeveer op hetzelfde neerkomt als relative positioning zonder values, in dat opzicht dat het element komt te staan op zijn normale locatie.

Ge bewijst dat eigenlijk door uzelf tegen te spreken in uw voorbeeld. Als position: relative de standaard was dan zouden absolute gepositioneerde elementen zich ook altijd tegenover hun parents verhouden, terwijl ze zich nu verhouden tegenover de body of de nearest parent die expliciet relative positioning gekregen heeft.

Neen, ik heb het gisteren eens opgezocht en het is gewoon een IE6/7 scrollbar bug die hiermee wordt opgelost. Door position: relative toe te voegen wordt de hasLayout property getriggered die een element gaat redrawen en daardoor een overflow bug omzeilt.

position:relative and overflow in Internet Explorer - Snook.ca

Dastardly · 29 okt 2011

Zero Grav zei:
Neen, ik heb het gisteren eens opgezocht en het is gewoon een IE6/7 scrollbar bug die hiermee wordt opgelost. Door position: relative toe te voegen wordt de hasLayout property getriggered die een element gaat redrawen en daardoor een overflow bug omzeilt.

dat van die standaard kan, zo goed houd ik al die zaken niet bij. maar probeer gewoon even volgend voorbeeld:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="Styles.css" rel="stylesheet" type="text/css" />

</head>
<body>

    <div id="wrapper">
        <div id="content">
            <div id="menu">
                <p>
                    I'm a menu! :)
                </p>
            </div>
        </div>
    </div>

</body>
</html>

Code:

body { margin:0; padding:0; }

#wrapper { background-color:#666; margin: 0 auto; width:1024px; height:500px; }
#content { background-color:Green; height:200px; width:1024px; }
#menu { background-color:#111; height:50px; width:1024px; color:#FFF; }

#content { margin-top:150px; /*position:relative;*/ }
#menu { position:absolute; top:10px; }

heb de css waar het om gaat op twee aparte lijnen gezet. zie nu gewoon wat die menu div doet als je de position bij de content div aanpast.

Zero Grav · 29 okt 2011

Ik begreep inderdaad dat ge dat bedoelde, maar dat is normaal gedrag. De standaard omschrijft dat een relatief gepositioneerd object zich zo moet gedragen. Dus het is logisch dat ge relative positioning gaat toevoegen van het moment dat ge wilt dat een absolute positioned child zich daar tegenover gaat positioneren.

Maar het lijkt me sterk dat omdat ge ooit misschien mogelijkerwijs ergens position: absolute aan kunt toevoegen dat een docent dan gaat aanraden om overal maar standaard relative positioning aan toe te voegen. Anders zit ge straks nog met 20 andere css properties die feitelijk overbodig zijn maar toch toegepast worden omdat ge misschien ooit x of y zoudt willen doen. Daarmee dat ik eerder denk dat em probeert die bug te omzeilen van IE6/7.

-BVR- · 29 okt 2011

Ja, tuurlijk is het nodig als je bepaalde elementen anders wilt gaan positioneren, maar waar het in dit topic om ging, was het echt niet nodig

Enkel je parent van je child dat je absoluut wilt positioneren moet je relative maken, en niet ook diens parent en diens parent etc.

En grappig dat ge zegt dat het standaard op relative zou staan

Dat mist uiteraard heel het punt van 'relative' dan aangezien de left, right, top, bottom values standaard op auto staan en bij static geen effect hebben.

Archief - Website centreert niet

Dastardly

Legacy Member

Zero Grav

Legacy Member

Dastardly

Legacy Member

Zero Grav

Legacy Member

-BVR-

Legacy Member