PDA

View Full Version : Quick - Centering DIV Menu

thepitfall
03-22-2007, 03:10 AM
Hey guys, one last Q,

Trying to get the menu in this layout centralized. At the moment it seems to be left aligned.. I tried using the text-align: tag but to no avail.

If possible, centralized in IE and FF would be ideal. The code I am using is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
background-color: #AC8367; /* f0e7d7 */
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
margin-top: 20px;
}

#topsection{
background: #f0e7d7;
height: 190px; /*Height of top section*/
padding-top: 10px;
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color: #f7f2ea;
height: 700px;
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
height: 700px;
background: #f0e7d7;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #f0e7d7;
height: 700px;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}



#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
text-align: center;
align: center;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 125%;
font-size: 0.8em;
}

ul#navlist li
{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #f0e7d7; /* active button colour */
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}


</style>



</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube">
<img src="images/IDBannerFinal.jpg" />
<br>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>


</div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <br>wewewee</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b>dsfdsdf</div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b>dsfdsdf</div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</body>
</html>
_Aerospace_Eng_
03-22-2007, 03:24 AM
You can't use margin:auto; on an element that is wider than its parent element. You'll need to use negative left margins or use a negative left value along with position:relative.
jlhaslip
03-22-2007, 05:27 AM
http://jlhaslip.trap17.com/samples/menus/
thepitfall
03-22-2007, 02:47 PM
http://jlhaslip.trap17.com/samples/menus/
Thank you so much again!

I'm having a slight problem applying that to my menu bar though..

Is that even possible? Going by what _Aerospace_Eng_ said, I'm not sure it is without tweaking alot of code??

Thanks again guys.
nodster
03-22-2007, 04:35 PM
Couldn't you just add some left padding to the following:

#navcontainer
{
background: #f0e7d7;
margin: 0;
padding: 1em 0 0 75px;
font-family: georgia, serif;
text-transform: lowercase;
text-align: center;
align: center;
}


Something basic but it seemed to work. look here for my solution (http://www.flugel.co.uk/examples/position1.html)
thepitfall
03-22-2007, 06:18 PM
Excellent stuff! I really do need to study CSS a lot harder.

Thank you so much. Much appreciated!
thepitfall
03-23-2007, 12:52 AM
One last thing..

Is it possible to strip the off the last labelled "Item 5" and still make the menu span the page? So essentially deleting the ladt link and increasing the size of each of the other links?

Can't seem to get it right.

Thanks aain CF!
thepitfall
03-23-2007, 02:53 AM
Ahh, solved it!!

Close this :).

Thanks guys.