Web Analytics Made Easy -
StatCounter CSS Rollover Buttons: Need Help Tweaking - CodingForum


No announcement yet.

CSS Rollover Buttons: Need Help Tweaking

  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Rollover Buttons: Need Help Tweaking

    Okay, so I got the code for CSS Rollver buttons from <a href="http://css.maxdesign.com.au/listutorial/horizontal_master.htm">THIS</a> 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;

    <div id="navcontainer">
    <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>

    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:

    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.

    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.

    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!
    Thanks so much!

  • #2
    For font size and color and such:
    I would put it in "#navcontainer ul li a"

    For size of buttons:
    I think it would be "#navcontainer ul li"

    For size of whole strip:
    Make a "#navcontainer" and put it in there

    I'm confused about what you want for positioning

    Hope that helps!
    My Site


    • #3
      Sorry to be confusing! As for the rollover buttons, I am looking for the effect found at the top of THIS page.
      See how it makes a "strip" clear across the top? That's what I'm going for positioning-wise


      • #4
        font-size:????; /*whatever your font-size is.*/
        font-family: verdana, arial, helvetica, sans-serif; /*font family*/
        line-height:20px; /*setting width and height on inline elements doesn't work or isn't supposed to be working (yet it does in IE)*/
        width:775px;/*how wide do you want to have it?*/
        /*(If you want us to help position it, a link to an online version of your page might help us more. Good, and now opacity.*/
        filter: alpha(opacity=80);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
        -moz-opacity: .80;
        #navcontainer ul.....
        etc etc......
        By the way, What dou you think about this:http://www.stunicholls.myby.co.uk/menus/centered2.html
        CATdude about IE6: "All your box-model are belong to us"


        • #5
          YOU are my HERO!