View Full Version : CSS Buttons: Just need a little help tweaking!


meupatdoes
08-02-2005, 05:32 AM
Sorry that this is a re-post. I'm not trying to be annoying, for some reason the forum won't let me edit my post....

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 {:bow:} as I am pulling every last hair out of my head!
Thanks so much!

COBOLdinosaur
08-03-2005, 12:06 AM
The font stuff should probably go in here

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

For the rest you need a new rule:

#navcontainer {
background-color:transparent;
position: absolute;
left:0;
top 133px;
}

Don't be surprised if it messes up the rest of the page. That menu was not designed to be beat up with that kind of nasty treatment, and it will almost certainly have cross-browser issues even with a strict doctype.

It is actually quite difficult to guess about this stuff if you don't post a link to the page. CSS is an integrated part of a page and if you don't look at the whole page then the change you do in isolation generally messes up something else.