[HTML & CSS] Absoluut gepositioneerde div op 100% breedte

[Rexomnium]

Ik heb een layout met een logobalk op 100% schermbreedte. Deze is gepositioneerd op top: 0px; en left: 0px;. Daaronder heb ik een menuutje. Deze heeft ook 100% breedte en is absoluut gepositioneerd op top: 50px; en left: 0px;.

Hieronder moet een div box komen die ook op 100% schermbreedte is, maar aan beide zijden een marge van 10px heeft. Ik heb het geprobeerd om de div in een andere div van 100% breedte te zetten, maar dat leverde niets op, want dan moet ik nog steeds zijwaarts scrollen.

Cascading Stylesheet:

#weekholder_div1 {
position: absolute; top: 90px; width: 100%; }
#weekholder_div2 {
margin-left: 10px; margin-right: 10px; border: 1px solid black; }

Bovenstaande code werkt dus niet. Kan iemand mij vertellen hoe ik een div over de volle breedte van het scherm kan krijgen op 10 pixels aan beide zijdes na?

[crisp]

Rexomnium schreef op maandag 02 januari 2006 @ 22:07:
Ik heb een layout met een logobalk op 100% schermbreedte. Deze is gepositioneerd op top: 0px; en left: 0px;. Daaronder heb ik een menuutje. Deze heeft ook 100% breedte en is absoluut gepositioneerd op top: 50px; en left: 0px;.

Waarom gebruik je daarvoor absolute positioning? blocklevel-elementen nemen standaard al de volledige breedte in...

Bovenstaande code werkt dus niet. Kan iemand mij vertellen hoe ik een div over de volle breedte van het scherm kan krijgen op 10 pixels aan beide zijdes na?

Gewoon margin-left en -right op 10px zetten zou genoeg moeten zijn voor een gewoon blocklevel element.

[Rexomnium]

crisp schreef op maandag 02 januari 2006 @ 22:39:
[...]

Waarom gebruik je daarvoor absolute positioning? blocklevel-elementen nemen standaard al de volledige breedte in...

[...]

Gewoon margin-left en -right op 10px zetten zou genoeg moeten zijn voor een gewoon blocklevel element.

Werkt niet als ik de bovenste 2 blocklevel-elementen ook op 100% zonder position zet. De balk die ik daarmee creeer, komt 10 pixels van de linkerkant af te staan, maar loopt 10 pixels door in de rechterkant, wat dus zijwaarts scrollen veroorzaakt.

Ik heb nu 3 blocklevel-elementen:

Cascading Stylesheet:

body {
margin: 0px; }

#header {
width: 100%; 
height: 44px;
background-color: #036; 
border-bottom: 1px solid white; 
color: white; 
text-align: right; }

#navigation {
width: 100%; 
background-color: #006699; 
color: white; 
height: 25px; 
border-bottom: 1px solid black; }

#weekholder {
width: 100%; 
margin: 20px 10px 0px 10px; 
border: 1px solid black; }

Als ik deze in de HTML zet met
<div id="header">Titel</div>
<div id="navigation">navigatie</div>
<div id="weekholder">Hierin komt de week</div>

Werkt dat dus niet, want ik krijg dit resultaat:

[ Voor 5% gewijzigd door Rexomnium op 02-01-2006 23:29 ]

[Victor]

Rexomnium schreef op maandag 02 januari 2006 @ 23:29:
[...]


Werkt niet als ik de bovenste 2 blocklevel-elementen ook op 100% zonder position zet. De balk die ik daarmee creeer, komt 10 pixels van de linkerkant af te staan, maar loopt 10 pixels door in de rechterkant, wat dus zijwaarts scrollen veroorzaakt.

Ik heb nu 3 blocklevel-elementen:

Cascading Stylesheet:

body {
margin: 0px; }

#header {
width: 100%; 
height: 44px;
background-color: #036; 
border-bottom: 1px solid white; 
color: white; 
text-align: right; }

#navigation {
width: 100%; 
background-color: #006699; 
color: white; 
height: 25px; 
border-bottom: 1px solid black; }

#weekholder {
width: 100%; 
margin: 20px 10px 0px 10px; 
border: 1px solid black; }

Als ik deze in de HTML zet met
<div id="header">Titel</div>
<div id="navigation">navigatie</div>
<div id="weekholder">Hierin komt de week</div>

Werkt dat dus niet, want ik krijg dit resultaat:
[afbeelding]

Probeer de width eens weg te halen, wellicht dat het met default waarde (auto) wel goed gaat.

[crisp]

haal dan ook die width: 100% weg

En zet voor de zekerheid (en voor Opera) ook de padding van je body-element op 0

[ Voor 8% gewijzigd door crisp op 02-01-2006 23:34 ]

[Dennis]

Niet zo netjes, maar een noodoplossing is altijd een <div> in die <div> te zetten met daarin een padding en die de eigenlijke content te laten bevatten.

[Victor]

Dennis schreef op maandag 02 januari 2006 @ 23:39:
Niet zo netjes, maar een noodoplossing is altijd een <div> in die <div> te zetten met daarin een padding en die de eigenlijke content te laten bevatten.

Dat is net zo min een oplossing als het gebruik van tables om je pagina mee op te maken. Dit soort problemen liggen bij je CSS, dus je fixt ze ook met CSS. Niet door elementen toe te voegen.

[Rexomnium]

crisp schreef op maandag 02 januari 2006 @ 23:33:
haal dan ook die width: 100% weg

En zet voor de zekerheid (en voor Opera) ook de padding van je body-element op 0

Hartstikke bedankt iedereen. Het werkt