Div probleempje, 2 op elkaar en dan een container er onder.

[R2D2]

Ik zit met een irritant probleem. Ik ben bezig mijn site te verbouwen en ik ben inmiddels al een middag aan het klootviolen en ik heb het nog steeds niet voor elkaar.... nu is niets onmogelijk is mij altijd verteld maar ik loop nu toch tegen een nogal irritant probleem aan.


Wat is het probleem, ik heb een div met daarin een background image (roterende header) en daar bovenop nog een div met het menu er in. Werkt allemaal prima en zelfs de transparantie werkt zoals het hoort. Maar nu het probleem, als ik mijn suckerfish menu naar beneden laat komen heeft deze meer ruimte nodig dan de background image hoog is (de achterliggende div dus) en drukt ie de div onder de container waar deze 2 in staan naar beneden... en dat mag dus niet. Het menu moet gewoon over alle lagen heen vallen.

Hier 2 images waarin het hopelijk duidelijk word wat het probleem is,



Dit is de juiste afstand tussen tussen het menu en de main tekst. Trek ik echter mijn suckerfish menu naar beneden gebeurd er dit,



En het is dus niet de bedoeling dat de main tekst naar onder word geschoven maar dat het menu ook gewoon daar overheen valt.

Mijn html

code:

<div id="sticky">&nbsp;</div>
<div id="container">
  <div id="logo_search">
    <div id="logo">Hier mijn logo</div>
    <div id="search">hier de search</div>
  </div>
  <br clear="all" />
  <div id="headerimage">
    <div id="nav">navigatie menu</div>
  </div>
  <div class="clear">
    <hr />
  </div>
  <div id="maintable">
    <div id="content"></div>
    <div id="diversen"></div>
    <div id="ad">ads</div>
  </div>
  <div class="clear">
    <hr />
  </div>
  <div id="footer">
    <div class="copyright">Content copyright AboutDJ 2002 - 2007</div>
  </div>
</div>

De CSS

code:

#sticky {background:url(../images/brandnew.gif) right top no-repeat; 
height: 165px; 
width: 168px; 
position:absolute; 
top: 0; 
right: 0; 
z-index:1;}

/* Container */
#container {width:950px; 
margin:0 auto; 
border:10px solid #fff; 
border-top:10px solid #fff; 
background:#fff; 
overflow:hidden;}

#logo_search { width:100%}

#logo {float:left; height:100px;}

#search { float:right;}

/* Header image */
#headerimage {overflow:hidden; 
position:relative;}

/* Pulldown menu */
#nav {border-top:1px solid #666; 
border-bottom:1px solid #666; 
background:url(../images/menu_back.gif) repeat; 
height:25px; 
padding-left:10px; 
padding-right:10px; 
filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80; 
position:absolute; 
width:100%;}

/* Content container */
#maintable {width:100%; 
background:url(../images/2faux.jpg) repeat-y; 
overflow:hidden; 
margin-top:5px; 
border-top:1px solid #666;}

/* Content */
#content {float:left; 
width:575px; 
background:#fff; 
padding:10px; 
overflow:hidden;} 

/* Diversen */
#diversen {float:left; 
width:175px; 
padding:10px; 
overflow:hidden; 
border-left:1px solid #999; 
border-right:1px solid #999; 
text-align:left;}

/* Ad space */
#ad {float:right; width:135px; 
text-align:center; 
background:#fff; p
adding-top:10px; 
padding-right:10px; 
overflow:hidden;}

/* Pulldown menu styling */
#twocols{z-index:200;}
#leftcol{z-index:100;}
.moduletablemainnav{vertical-align:middle; top:187px; left:20px; z-index:100; margin:0; padding:0; padding-top:0px;}
#mainlevelmainnav, #mainlevelmainnav ul{float:left; list-style:none; line-height:15px; background:transparent; font-weight:bold; margin:0; padding:0;}
#mainlevelmainnav a {display:block; color:#fff; text-decoration:none; margin-right:30px; padding:0.3em;}
#mainlevelmainnav a:hover {color:#fff; text-decoration:underline;}
#mainlevelmainnav li{float:left; padding:0; background:none;}
#mainlevelmainnav li ul{position:absolute; left:-999em; height:auto; width:125px; background:url(../images/menu_back.gif) left repeat; border-left:1px solid #666; border-right:1px solid #666; border-bottom:1px solid #666; margin:0; padding:0;}
#mainlevelmainnav li li{width:125px;}
#mainlevelmainnav li ul a{width:125px; color:#fff; line-height:15px; font-weight:normal;}
#mainlevelmainnav a.sublevelmainnav:hover {color:#404040; text-decoration:none;}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{left:-999em;}
#mainlevelmainnav li:hover ul, #mainlevelmainnav li li:hover ul, #mainlevelmainnav li li li:hover ul, #mainlevelmainnav li.sfhover ul, #mainlevelmainnav li li.sfhover ul, #mainlevelmainnav li li li.sfhover ul{left:auto;z-index:6000;}
#mainlevelmainnav li li:hover, #mainlevelmainnav li li.sfhover{background:#fff url(../images/menu_arrow.gif) 98% 50% no-repeat;}

/* Footer */
#footer {border-top:1px solid #999; 
padding-top:10px; 
margin-top:5px;}
.copyright {float:left;}
.validation {float:right;}

Normaal laat ik BtM909 (Randy) dit opknappen maar die is vanavond al op pad naar SAE studio's voor de site dus die kan ik nu ook niet lastig vallen met deze vraag

[ Voor 14% gewijzigd door R2D2 op 08-08-2007 20:25 . Reden: opgeschoond ]

[R2D2]

En opgelost... de overflow:hidden uit de headerimage div halen was de oplossing!

Kwam er net per ongeluk achter toen ik weer eens een regel teveel weg had gehaald. Zodra ik de overflow:hidden terug zet schuift de div weer uit elkaar zodra het menu word uitgeklapt, haal ik de overflow:hidden weg dan gooit ie hem netjes over zowel het plaatje als de main tekst heen

Toch grappig dat ik altijd bij stom toeval achter zulke dingen kom