[css] Onverklaarbare ruimte onder div

[DJH]

Ik ben bijna ten einde raad, vandaar mijn vraag aan jullie.

In de screenshot een website die volledig uit div's bestaat. Via de webdevelopment tool in Firefox heb ik de div's laten omlijnen met de naam erbij.

Duidelijk is te zien dat onder de #content div een ruimte van ongeveer 150 pixels zit, die ik er maar niet uit krijg. Aan de linkerkant zit een div met de adresgegevens.
Het lijkt dat de content div rekening houdt met de linker div (#left). Maar dat is dus niet zo. Als ik #left volledig uitschakel, blijft de website precies even hoog, dus daar ligt het niet aan.

De website rekt bij langere content prima mee, maar er blijft dus een ruimte onder de content div. Ik heb zowat alle hoogte's van de div's al eens aangepast, div's verwijderd, toegevoegd, maar kom er maar niet uit.

De screenshot:


CSS

Cascading Stylesheet:

body#bodymain
{ 
background-image: url(/website/images/background.jpg); 
background-repeat: no-repeat; 
background-attachment: absolute; 
background-position: top center;
line-height: 16px; 
}

h1,h2,h3,h4,h5,h6,pre,form,body,html,blockquote,fieldset,input
{ margin:0; padding:0; }

p
{ margin-top:0px; padding-top:0px;  margin-bottom:4px; padding-bottom:4px; }


h1
{ font-size: 20px; font-weight: none; font-family: Lucida sans; color: #0c3b49;  }


a:link    { font-weight: none; text-decoration: underline; color: #0c3b49;}
a:active  { font-weight: none; text-decoration: underline; color: #0c3b49;}
a:visited { font-weight: none; text-decoration: underline; color: #0c3b49;}
a:hover   { font-weight: none; text-decoration: underline; color: #000000;}

div#siteHolder
{ margin: 0px auto 0px auto; width: 750px; }

#distance {
position: relative;
width:1px;
height:30px;

}

div#container
{

background-image: url(/website/images/c_back.png); 
background-repeat: no-repeat; 
background-attachment: absolute; 
background-position: top center;
text-align:left;
position: relative;
width: 750px;
}

div#menu
{
position: relative;
left: 255px;
top: -30px;
height: 20px; 
width: 400px; 

}


div#logo
{
background-image: url(/website/images/logo.png); 
background-repeat: no-repeat; 
background-attachment: absolute; 
background-position: top right; 
position: relative;
left: 255px;
top: 10px;
height: 95px; 
width: 425px; 

}

div#submenu
{
position: relative;
text-align: left;
top: 100px;
left: 49px;
width: 160px;
height: 160px;
color: #0c3b49;
font-weight: bold;

}

div#left
{
position: absolute;
text-align: right;
bottom: 35px;
left: 40px;
width: 160px;
height: 160px;
color: #0c3b49;
font-weight: bold;

}

div#content
{
position: relative;
min-height: 275px;
width: 420px;
top: -160px;
left: 256px;

}

div#footer
{
background-image: url(/website/images/footer.png); 
background-repeat: no-repeat; 
background-attachment: absolute; 
background-position: bottom right; 
color: white;
position: relative;
bac/kground-color: #bbc5ce;
font-size: 10px;
height: 94px;
width: 100%;
text-align: center;
}

div#footer2
{
position: relative;
border:solid 0px blue;
top: 69px;

}

HTML:

HTML:

<div id="siteHolder">

 <div id="distance"></div>

 <div id="container">

  <div id="logo"></div>

  <div id="menu">
   <table>menu boven</table>
  </div>

  <div id="left">adres</div>

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

  <div id="footer">
  <div id="footer2">footer</div>
  </div>

 </div>

</div>

[Asator]

Je zegt dat je de namen van de div's opgezocht hebt met de webdevelopment tool in Firefox. Volgens mij kan je ook zo het probleem vinden via die tool (Firebug?), of minstens waar ergens in je code de fout kan zitten.

Nu post je gewoon al je css en wat html en verwacht dat iemand anders het allemaal door gaat lezen voor je.
Je zou beter een voorbeeld online kunnen zetten als je zelf niet weet waar de fout precies zit in de plaats van de hele lap code.

[Ook al Bezet]

Dat gat heb je gemaakt met top: -160px;

EDIT: Waarom zit je menu trouwens in vredesnaam in een tabel?

[ Voor 45% gewijzigd door Ook al Bezet op 05-03-2010 12:03 ]

[macciez]

Is het niet je container div die zich aanpast ipv de content div?

[DEiE]

Heb je ook een online testcase? Dat experimenteerd beter met mogelijke oplossingen.

[RM-rf]

Ook al Bezet schreef op vrijdag 05 maart 2010 @ 12:00:
Dat gat heb je gemaakt met top: -160px;

inderddaa. de position: relative; in combinatie met die top: -160px betekent dat het element op de originele positie gerenderd wordt en daar ook de ruimte 'inneemt, maar afgebeeld wordt op een positie die 'ge-herpositioneerd' voorkomt, namelijk 160pixel hoger dan het element eigenlijk staat...
dat schept inderdaad eronder een schijnbaar 'gat' van 160px.

het probleem is nu die "div#submenu ", die 160 pixel hoog is, en eigenlijk 'boven' de content staat en deze naar onder drukt, maar via relative positionering verplaatst is, waarna ook die content naar boven moest schuiven...
imho zou je dat submenu nu juist absoluut moeten positioneren, om deze uit de 'flow' te halen.

[ Voor 23% gewijzigd door RM-rf op 05-03-2010 12:18 ]

[MueR]

Waarom heb je uberhaupt alles absoluut of relatief gepositioneerd? Waarom werk je niet gewoon met de flow mee? Dat kan met deze simpele layout makkelijk.

[ Voor 16% gewijzigd door MueR op 05-03-2010 12:23 ]

[Matis]

Daarnaast missen er nog wat quotes en zit er nog een typefout in je css.

[DJH]

Allen bedankt voor jullie reactie! De top -160px was inderdaad het probleem. Het menu heb ik nu absolute en dan kan de content op top: 0px;

De oplossing is weer es makkelijker dan ik had verwacht

Ook al Bezet schreef op vrijdag 05 maart 2010 @ 12:00:
Dat gat heb je gemaakt met top: -160px;

EDIT: Waarom zit je menu trouwens in vredesnaam in een tabel?

Die tabel is voor het bovenste menu, met drie menu items. Zo kan ik de 3 items makkelijk (vind ik) uitlijnen. Daar is een tabel toch ook eigenlijk voor bedoeld?

[kaesve]

Neen, tabellen zijn bedoelt voor het weergeven van tabulaire data.. menu-items vallen ábsoluut niet onder die noemer.
beter gooi je je menu-items in een lijstje (het is immers niet meer dan een opsomming van plekken op je site) en zorg je met een beetje css dat de list items netjes naast elkaar komen te staan. daar is niks moeilijks aan

[Ook al Bezet]

DJH schreef op vrijdag 05 maart 2010 @ 15:10:
Die tabel is voor het bovenste menu, met drie menu items. Zo kan ik de 3 items makkelijk (vind ik) uitlijnen. Daar is een tabel toch ook eigenlijk voor bedoeld?

ehm, NEE!, niet dus. Tabellen zijn bedoeld voor tabulaire data. Menu's horen in lijsten <ul>, die je vervolgens met CSS vorm kunt geven. Als je de lijst horizontaal weer wilt geven kun je dat met display:inline; doen.

[DJH]

Oke, dat was mij niet helemaal bekend. Bedankt voor de uitleg!

[RM-rf]

DJH schreef op vrijdag 05 maart 2010 @ 15:10:

Zo kan ik de 3 items makkelijk (vind ik) uitlijnen. Daar is een tabel toch ook eigenlijk voor bedoeld?

enkel wanneer het om 'uitlijnen' in zowel verschillende rijen én kolommen gaat..
als je data gewoon een 'plat' lijstje is dat onder elkaar verschijnt, is de UL-tag (Unordered List) véél beter...

visueel die vervolgens te formateren doe je dan met CSS