內容容器重疊菜單？

我目前正在使用CSS divs的Joomla模板。我有一個標題，標題的圖像放在左側浮動的div中，廣告空間右側浮動，底部菜單欄浮動。內容容器重疊菜單？

我的內容被分成三個div列，包含在「容器」中：左列向左浮動，中心不浮動，右向右浮動。

的問題是「容器」三個內容div的是重疊的菜單，你可以在此圖像中看到：http://www.ndpstudentcouncil.org/images/shot1.png

這裏的HTML代碼：

> <body> <div id="backdrop"> <div 
> id="wrapper"> <div id="header"> 
> <div id="topimage"> </div> 
> <div id="adspace1"><jdoc:include 
> type="modules" name="Ad Space #1" /> 
> This will be the location for our 
> "newsflash" items. </div> 
> 
> <div id="ddtopmenubar" 
> class="mattblackmenu"> 
>  <ul> 
>  <li><a href="http://www.ndpstudentcouncil.org">Home</a></li> 
>  <li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li> 
>  <li><a href="http://www.dynamicdrive.com/style/" 
> rel="ddsubmenu2">CSS</a></li> 
>  <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> 
>  <li><a href="http://tools.dynamicdrive.com/" 
> rel="ddsubmenu3">Web Tools</a></li> 
>  </ul> 
>  <script type="text/javascript" src="js/ddlevelsmenu.js"> 
>  ddlevelsmenu.setup("ddtopmenubar", "topbar") 
> //ddlevelsmenu.setup("mainmenuid", 
> "topbar|sidebar") 
>  </script> 
>  <ul id="ddsubmenu1" class="ddsubmenustyle"> 
>  <li><a href="#">Item 1a</a></li> 
>  <li><a href="#">Item 2a</a></li> 
>  <li><a href="#">Item Folder 3a</a> 
>  <ul> 
>  <li><a href="#">Sub Item 3.1a</a></li> 
>  </ul> 
>  </li> 
>  <li><a href="#">Item 4a</a></li> 
>  <li><a href="#">Item Folder 5a</a> 
>  <ul> 
>  <li><a href="#">Sub Item 5.1a</a></li> 
>  <li><a href="#">Item Folder 5.2a</a> 
>  <ul> 
>  <li><a href="#">Sub Item 5.2.1a</a></li> 
>  <li><a href="#">Sub Item 5.2.2a</a></li> 
>  </ul> 
>  </li> 
>  </ul> 
>  </a> 
>  </li> 
>  <li><a href="#">Item 6a</a></li> 
>  </ul> </div> </div> 
>  <div id="container"> <script language="javascript"> 
>  matchHeight=function(){ 
>  var divs,contDivs,maxHeight,divHeight,d; 
>  // get all <div> elements in the document 
>  divs=document.getElementsByTagName('div'); 
>  contDivs=[]; 
>  // initialize maximum height value 
>  maxHeight=0; 
>  // iterate over all <div> elements in the document 
>  for(var i=0;i<divs.length;i++){ 
>  // make collection with <div> elements with class attribute 
> 'container' 
>  if(/\bcontainer\b/.test(divs[i].className)){ 
>  d=divs[i]; 
>  contDivs[contDivs.length]=d; 
>  // determine height for <div> element 
>  if(d.offsetHeight){ 
>  divHeight=d.offsetHeight; 
>  } 
>  else if(d.style.pixelHeight){ 
>  divHeight=d.style.pixelHeight; 
>  } 
>  // calculate maximum height 
>  maxHeight=Math.max(maxHeight,divHeight); 
>  } 
>  } 
>  // assign maximum height value to all of container <div> elements 
>  for(var i=0;i<contDivs.length;i++){ 
>  contDivs[i].style.height=maxHeight; 
>  } 
>  } 
>  // execute function when page loads 
>  window.onload=function(){ 
>  if(document.getElementsByTagName){ 
>  matchHeight(); 
>  } 
>  } 
>  </script> <div id="left"> 
>  <jdoc:include type="modules" name="left" /> </div> <div 
> id="middle"> 
>  <jdoc:include type="component" /> </div> <div id="right"> 
>  <jdoc:include type="modules" name="right" /> 
>  </div> 
> </div> 
>  <div id="footer" class="clear"><jdoc:include 
> type="modules" name="footer" /> 
> &copy; 2010 NDP Student Council<br 
> />Website Development Subcommitee 
> </div> </div> </div> </body>

的CSS：

> #backdrop { width:100%; height:100%; background: #FFFFFF 
> url(../images/gradient.jpg) repeat-x; 
> } 
> 
> #wrapper { margin:auto; width:95%; height:95%; border-right:thick solid 
> black; border-bottom:thick solid 
> black; border-top:thick solid black; 
> border-left:thick solid black; 
> background-color:white; } 
> 
> #header { height:131px; width:100%; background-color: #FFFFFF; 
> border-bottom:thick solid black; } 
> 
> #topimage { float:left; height:131px; width:63%; 
> background-image: 
> url("../images/ndps2.png"); 
> background-repeat:no-repeat; } 
> 
> #adspace1 { float:right; width:27%; height:131px; } 
> 
> #container { clear:both; } 
> #left{ width:20%; float:left; padding:5px; text-align:center; } 
> 
> #middle{ width:60%; padding:5px; text-align:center; } 
> 
> #right{ float:right; width:20%; padding:5px; text-align:right; } 
> #footer { border-top:thick solid black; width:100%; 
> text-align:center; } .clear { 
> clear:both; }

這裏是菜單本身的CSS，這是從DynamicDrive.com：

> .mattblackmenu ul{ margin: 0; padding: 
> 0; font: bold 12px Verdana; 
> list-style-type: none; border-bottom: 
> 1px solid gray; background: #414141; 
> overflow: hidden; width: 100%; 
> clear:both; } 
> 
> .mattblackmenu li{ display: inline; 
> margin: 0; } 
> 
> .mattblackmenu li a{ float: left; 
> display: block; text-decoration: none; 
> margin: 0; padding: 6px 8px; /*padding 
> inside each tab*/ border-right: 1px 
> solid white; /*right divider between 
> tabs*/ color: white; background: 
> #414141;

感謝您的幫助！

來源

2010-06-17 Harold

嘗試將所有三列左移，然後只設置頁邊空白處。

CSS完全按照錫，樣式級聯的說法，html也是如此。如果你把所有東西都留下來了，它們自然會堆疊起這會讓你的生活更輕鬆。

小心IE6的雙緣錯誤的，雖然 - http://www.positioniseverything.net/explorer/doubled-margin.html

來源

2010-06-17 08:42:07 theorise

當我離開浮動所有三列，最右列放置在第一列的下面。我不知道爲什麼會這樣，因爲我能夠將標題圖像和頂部留下的「新聞快訊內容」都浮起來。就三個內容列的容器而言，這些屬性是否正確？我清楚：both和overflow：隱藏爲三個內容列的包裝的屬性。我在代碼中稱它爲「容器」。我會老老實實比較喜歡讓網站比靜態更流暢。我們也有基於這個移動網站的計劃。 – Harold 2010-06-20 13:05:00

是的，列自然會在下面。這將是因爲列的總寬度和邊距超過其容器的寬度。嘗試減小寬度，它將被修復。同樣，要小心IE6的雙重保證金錯誤，這會爲頁面增加一個隱藏寬度。 – theorise 2010-06-20 14:55:09

內容容器重疊菜單？

回答

相關問題