meupatdoes
08-02-2005, 03:48 AM
Okay, so I got the code for CSS Rollver buttons from THIS (http://css.maxdesign.com.au/listutorial/horizontal_master.htm) site.
This is the code:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
The code itself works just fine alone with the tutorial example but I need a little more from it. I know basic CSS codes but I'm new to this whole nav container thing and I am unsure WHERE in it to put in specific customized codes. I've tried playing with it but I only succeed in messing the whole thing up royally.
I just need help with 3 areas:
font:
I need to know WHERE in the CSS code I should put the font information for the buttons themselves (like "font-family" and "font-size") and how I can size the buttons. I need them to be 20px high to fit in with my layout.
positioning:
Where do I put the code to position the nav container? I need it to be flush with the left side of the layout (which will be centered and 775 px wide) and to start exactly 130 px from the top. I also need the nav container (the whole strip) to be 775 px wide.
transparency:
Where do I put the code to make the background of the nav container transparent?
Also, I am using Mozilla Firefox and testing it in IE and I can't seem to customize it either way.
If anyone can help me I will be eternally grateful as I am pulling every last hair out of my head! :bow:
Thanks!
This is the code:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
The code itself works just fine alone with the tutorial example but I need a little more from it. I know basic CSS codes but I'm new to this whole nav container thing and I am unsure WHERE in it to put in specific customized codes. I've tried playing with it but I only succeed in messing the whole thing up royally.
I just need help with 3 areas:
font:
I need to know WHERE in the CSS code I should put the font information for the buttons themselves (like "font-family" and "font-size") and how I can size the buttons. I need them to be 20px high to fit in with my layout.
positioning:
Where do I put the code to position the nav container? I need it to be flush with the left side of the layout (which will be centered and 775 px wide) and to start exactly 130 px from the top. I also need the nav container (the whole strip) to be 775 px wide.
transparency:
Where do I put the code to make the background of the nav container transparent?
Also, I am using Mozilla Firefox and testing it in IE and I can't seem to customize it either way.
If anyone can help me I will be eternally grateful as I am pulling every last hair out of my head! :bow:
Thanks!