Grow your CSS skills. Land your dream job.

CSS Menu Issue

  • # July 3, 2009 at 6:57 pm

    Hello All,

    Can you take a look and see what the menu issue is – as you can see I would like the gray to go up the sides of the menu bar – plus the darker orange doesn’t extend the full length of the menu bar. Also, I had a rollover shade when you were selecting the menu you wanted and it seems to be gone. I think it might be an image problem but not sure – any help appreciated.

    Thanks!
    Kendra

    The link is http://funfamilyparties.com/index1.htm

    Here is the html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    4OAK Fantasy Football

    The game that blends fantasy football and poker.

    © All rights reserved. KVR Company 2009


    Here is the CSS:

    body {
    position:relative;
    margin: auto;
    width:100%;
    height:100%;
    background-color: #986547;
    background-image:url(images1/football.jpg);
    body text=”#FFFFFF”;
    padding-top: 10px;
    }

    #container
    {
    width: 1000px;
    line-height: 130%;
    }

    #wrap {
    margin: 10px auto;
    width: 1000px;
    }

    #top h1 {
    background-image:url(images1/test1.jpg);
    background-repeat:no-repeat;
    height: 225px;
    clear: both;
    }

    #menu {padding:0 10px;
    margin-top:-22px;
    height: 40px;
    line-height: 40px;
    background: white url(images1/menu.jpg) no-repeat;
    }

    #menu li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
    font-size: 0px;
    }
    #menu li a{
    background-color:#8A4117;
    color:yellow;
    display:block;
    font-size:17px;
    line-height:40px;
    padding:0 40px;
    text-align:center;
    text-decoration:none;
    width:auto;
    }

    #menu ul {
    padding:0;
    }
    #menu ul li ul li a {
    color:yellow;
    display:block;
    font-size:15px;
    line-height:40px;
    padding-right:40px;
    text-align:left;
    text-decoration:none;
    width:8em;
    }

    #menu li a:hover{
    background-color: #8A4117;
    }

    #menu ul ul {
    margin: 0; padding: 10;
    top: 40px;
    position: absolute;
    visibility: hidden;
    }
    #menu ul li.forms ul li a {width: 240px;}
    #menu ul li.parent resources ul li a {width: 240px;}

    #menu ul li:hover ul{
    visibility:visible;
    }

    #content {
    background: #666666 url(images1/content.jpg) repeat-y;
    color: black;
    padding: 50px;
    }

    #bottom {
    background: #8A4117 url(images1/bottom.jpg) no-repeat;
    padding: 20px 0;
    }

    #footer {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;}

    .clear {
    clear:both;
    }

    # July 4, 2009 at 12:43 am

    You should start by validating your markup, 53 errors http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffunfamilyparties.com%2Findex1.htm

    You have the same colour set for hover as you have for the normal background #8A4117.

    # July 7, 2009 at 11:45 pm

    Thank you – I have changed the color so I can see the hover color now – I will go thru and fix the validator issues. My biggest question is how do I fix the menu bar issue with the color not extending or wrapping at the sides – I don’t want that different color at the end.

    I would appreciate a quick response as I want to go live soon. Thanks so much for your help – this forum is great!

    I have it on a new site now – http://www.4oakfantasyfootball.com/

    The html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    4OAK Fantasy Football

    The game that blends fantasy football and poker.

    © All rights reserved. KVR Company 2009


    The css:

    body {
    position:relative;
    margin: auto;
    width:100%;
    height:100%;
    background-color: #986547;
    background-image:url(images/football.jpg);
    body text=”#FFFFFF”;
    padding-top: 10px;
    }

    #container
    {
    width: 1000px;
    line-height: 130%;
    }

    #wrap {
    margin: 10px auto;
    width: 1000px;
    }

    #top h1 {
    background-image:url(images/test1.jpg);
    background-repeat:no-repeat;
    height: 225px;
    clear: both;
    }

    #menu {padding:0 10px;
    margin-top:-22px;
    height: 40px;
    line-height: 40px;
    background: white url(images/menu.jpg) no-repeat;
    }

    #menu li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
    font-size: 0px;
    }
    #menu li a{
    background-color:#986547;
    color:yellow;
    display:block;
    font-size:17px;
    line-height:40px;
    padding:0 40px;
    text-align:center;
    text-decoration:none;
    width:auto;
    }

    #menu ul {
    padding:0;
    }
    #menu ul li ul li a {
    color:yellow;
    display:block;
    font-size:15px;
    line-height:40px;
    padding-right:40px;
    text-align:left;
    text-decoration:none;
    width:8em;
    }

    #menu li a:hover{
    background-color: #8A4117;
    }

    #menu ul ul {
    margin: 0; padding: 10;
    top: 40px;
    position: absolute;
    visibility: hidden;
    }
    #menu ul li.forms ul li a {width: 240px;}
    #menu ul li.parent resources ul li a {width: 240px;}

    #menu ul li:hover ul{
    visibility:visible;
    }

    #content {
    background: #666666 url(images/content.jpg) repeat-y;
    color: black;
    padding: 50px;
    }

    #bottom {
    background: #8A4117 url(images/bottom.jpg) no-repeat;
    padding: 20px 0;
    }

    #footer {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;}

    .clear {
    clear:both;
    }

    # July 8, 2009 at 5:40 am

    If you don’t want that lighter orange on the menu why are you using it as a background image?

    I’ve just done a quick fix and replaced that with the content background:

    Code:
    #menu {
    background:#666666 url(images/content.jpg) repeat scroll 0 0;
    height:40px;
    line-height:40px;
    margin-top:-22px;
    padding:0 10px;
    }

    and I gave the first menu item a class of home and added a bit of extra padding

    Code:
    #menu li.home a {
    padding:0 30px 0 40px;
    }
    # July 8, 2009 at 2:21 pm

    Thanks so much. I was trying to make it too hard. Some CSS is still not quite clicking with how it works but when I took that image out for the menu bar it made sense to me. I tried to add the div class of "home" to the index page plus add the css but I can’t seem to get it to work. How do I put it in the html – is it <div id = "home">? and then how do I put the rest of the menu bar – the home ends up small and blue. Sorry for my noviceness but I’m learning. Thanks again for your help!

    Kendra

    # July 8, 2009 at 3:22 pm
    Code:
  • Home
# July 8, 2009 at 3:32 pm

Thank you! It worked.

Kendra

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".