I'm currently working on a Joomla template using CSS divs. I have a header set up with our logo image in a div floated to the left, an adspace floated to the right, and the menu bar on the bottom.
My content is divided into three div columns that are contained in "
container.": the left column is floated left, the center is not floated, and the right is floated to the right.
The problem is the "
container" for the three content divs is overlapping the menu, as you can see in this image: http://www.ndpstudentcouncil.org/images/shot1.png
Here's the HTML code:
> <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" />
> © 2010 NDP Student Council<br
> />Website Development Subcommitee
> </div> </div> </div> </body>
The 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; }
Here is the CSS for the menu itself, which is from 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;
Thanks for the help!
