Question

我目前正在使用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;

感谢您的帮助！

Answer 1

尝试将剩下的所有三列浮动，然后设置边距以使它们分开。

CSS完全按照它所说的锡，样式级联，html也是如此。如果你把所有东西都漂浮下来，它们就会自然堆叠这将使您的生活更轻松。

请注意IE6双边距错误 - http://www.positioniseverything.net/explorer/doubled-margin.html

内容容器重叠菜单？

1 个答案: