Derekismetal
03-20-2008, 12:25 AM
Hi everyone, noob here -
Not experienced with css navigational menus...
I chose this menu and got it up and on the page alright - however it's always on the left side of the page. I want to center it. Help please!
Here's the css code for it.
#cfnavbar{
margin: 0;
padding: 0;
}
#cfnavbar ul{
background: url(bgpink.gif) bottom center repeat-x;
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}
* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}
#cfnavbar ul li{
display: inline;
}
#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(dividerpink.gif) bottom right no-repeat;
}
#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}
#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(leftcornerpink.gif) bottom left no-repeat;
}
#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(rightcornerpink.gif) bottom right no-repeat;
}
#cfnavbar ul li a:hover{
text-decoration: underline;
}
HERE IS THE HTML CODE:
<div id="cfnavbar">
<ul>
<li><span><a href="http://www.dynamicdrive.com" id="leftcorner">Home</a></span></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
<li><a href="http://www.dynamicdrive.com/contact.htm" id="rightcorner">Contact</a></li>
</ul>
</div>
Any help would be awesome and greatly appreciated.
Not experienced with css navigational menus...
I chose this menu and got it up and on the page alright - however it's always on the left side of the page. I want to center it. Help please!
Here's the css code for it.
#cfnavbar{
margin: 0;
padding: 0;
}
#cfnavbar ul{
background: url(bgpink.gif) bottom center repeat-x;
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}
* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}
#cfnavbar ul li{
display: inline;
}
#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(dividerpink.gif) bottom right no-repeat;
}
#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}
#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(leftcornerpink.gif) bottom left no-repeat;
}
#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(rightcornerpink.gif) bottom right no-repeat;
}
#cfnavbar ul li a:hover{
text-decoration: underline;
}
HERE IS THE HTML CODE:
<div id="cfnavbar">
<ul>
<li><span><a href="http://www.dynamicdrive.com" id="leftcorner">Home</a></span></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
<li><a href="http://www.dynamicdrive.com/contact.htm" id="rightcorner">Contact</a></li>
</ul>
</div>
Any help would be awesome and greatly appreciated.