Grow your CSS skills. Land your dream job.

Nav # ul li – Not working. Please Help!!

  • # June 21, 2009 at 5:20 pm

    Hello,

    My nav isn’t showing up in the orange tabs. I created a ul, the nav are apparent on the site but not in the right section.

    The site is leadertours.ca, if you hover your mouse above the " Discover the joy…." you ll see the nav.

    Here is my css code. I have played with the margins and I am not sure why its not working?

    Code:
    body {
    padding: 0;
    margin: 0;
    background: #072e66 url(images/wdw-bg.jpg) no-repeat center top;
    color: #333333;
    font-family: Helvetica, sans-serif;
    font-size: 65.5%;
    }

    #content {
    width: 800px;
    margin: 228px auto 0;
    margin-bottom: 5px;
    background: #fff;
    border: solid 1px #ccc;
    padding: 20px;

    }

    #nav{
    list-style: none;
    padding-left: 130px;

    }

    ul#nav li {
    display: block;
    font-size: 1.3em;
    }

    ul#nav li a {
    display: block;
    width: 156px;
    float: left;
    margin-bottom:0px;
    color: white;
    padding-top: 5px;
    font-weight: bold;
    text-decoration: none;
    }

    ul#nav li a:hover, ul#nav li a:active {
    color: #000;
    }

    div#left-col {
    float: left;
    width: 510px;
    padding-left: 20px;
    }

    div#right-col {
    float: right;
    width: 200px;
    border-top: 8px solid #ffc866;
    padding-top: 15px;
    font-size: 1.1em;
    }
    div#main-content div#right-col p {
    font-size: 1.1em;

    }

    a {
    color: #FFC864;
    text-decoration: none;
    }
    a:hover, a:active { text-decoration: underline; }

    h1 {
    font-size: 2.5em;
    font-family: Palatino, serif;
    font-style:italic;
    margin-bottom: 0.8em;
    padding-left: 4px;
    color:#f88016;
    }
    h2 { font-size: 1.5em; text-transform: uppercase; margin-bottom: 0.8em;text-spacing:3px; }
    h3 {
    font-size: 1.2em;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 2px;
    color: #e8e4db;
    padding: 5px;
    margin-bottom: 0.5em;
    text-align: left;
    }
    h4{ font-size:3em;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom:inherit;
    text-align:center
    }

    h5{
    font-size:1.3em;
    font-style:normal;
    letter-spacing:1px;
    color:#000;
    text-transform:uppercase;
    }

    #footer-text {
    color: #FFF;
    text-align:center;
    font-weight:bold;
    padding: 10px 0 10px 0;
    text-transform: uppercase;

    }

    Html:

    Code:

    "Discover the joy of traveling with others”

    St.Peter Vatican City

    UPCOMING TOURS – DEPARTURES

    Melbourne Cup

    Korean Tae Kwon Do |
    Dive Fiji
    2010 Oberammergau Passion Play
    Adventure Africa

    The EMAIL US – where you would like to travel
    on a GROUP Tour, we will see what can be arranged.

    BOOK NOW

    CONTACT US 1-888-485-6589

    Leader Tours Logo dth="195" height="72"/>

    JOIN A GROUP TOUR TODAY!

    Shared experiences,memories,create new friendships. Join one of our upcoming GROUP Tours or let us design a tailor-made GROUP Itinerary.

    CALL TODAY, our GROUP Specialists are excited to share our knowledge and expertise with you.

    Book now!

    GROUP DISCOUNT ASK US HOW!

    We are able to access quantity discounts due to the large volumes traveling every year. We negotiate the best possible Group Rates on your behalf.

    Ask us how your GROUP can quality for GROUP rebates and travel incentives.

    Ask us to get you the most competitive group rate with the most flexibility.

    Learn more

    # June 21, 2009 at 10:37 pm

    It’s not working because the orange tabs are part of the body background and the ul is inside the container div.

    # June 23, 2009 at 9:41 pm

    Thanks for the info. So i changed the css and made the tabs sprites. However I am not sure how to make them go above the white box. And the fourth tab isn’t showing up. What do I do?

    http://www.leadertours.ca

    here is my css:

    Code:
    body {
    padding: 0;
    margin: 0;
    background: #072e66 url(images/wdw-bg.jpg) no-repeat center top;
    color: #333333;
    font-family: Helvetica, sans-serif;
    font-size: 65.5%;
    }

    #content {
    width: 800px;
    margin: 228px auto 0;
    margin-bottom: 5px;
    background: #fff;
    border: solid 1px #ccc;
    padding: 20px;

    }

    ul#nav{
    list-style: none;
    }

    ul#nav li {
    display: inline;
    }

    ul#nav li a {
    display: block;
    height: 50px;
    text-indent:-9099px;
    float:left;
    }

    ul#nav li.home a {
    width:171px;
    background:url(images/nav-home.jpg) botttom center no-repeat;}

    ul#nav li.about a {width:172px;
    background:url(images/nav-about.jpg) bottom center no-repeat;}

    ul#nav li.group a {width:168px;
    background:url(images/nav-group.jpg) bottom center no-repeat;}

    ul#nav li.contact a {width:174px;
    background:url(images/nav-contact.jpg) bottom center no-repeat;}

    ul#nav li a:hover {
    background-position: center center;
    }

    div#left-col {
    float: left;
    width: 510px;
    padding-left: 20px;
    }

    div#right-col {
    float: right;
    width: 200px;
    border-top: 8px solid #ffc866;
    padding-top: 15px;
    font-size: 1.1em;
    }

    div#main-content div#right-col p {
    font-size: 1.1em;
    }

    a {
    color: #FFC864;
    text-decoration: none;
    }
    a:hover, a:active { text-decoration: underline; }

    h1 {
    font-size: 2.5em;
    font-family: Palatino, serif;
    font-style:italic;
    margin-bottom: 0.8em;
    padding-left: 4px;
    color:#f88016;
    }
    h2 { font-size: 1.5em; text-transform: uppercase; margin-bottom: 0.8em;text-spacing:3px; }
    h3 {
    font-size: 1.2em;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 2px;
    color: #e8e4db;
    padding: 5px;
    margin-bottom: 0.5em;
    text-align: left;
    }
    h4{ font-size:3em;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom:inherit;
    text-align:center
    }

    h5{
    font-size:1.3em;
    font-style:normal;
    letter-spacing:1px;
    color:#000;
    text-transform:uppercase;
    }

    #footer-text {
    color: #FFF;
    text-align:center;
    font-weight:bold;
    padding: 10px 0 10px 0;
    text-transform: uppercase;

    }

    html:

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

    "Discover the joy of traveling with others”

    St.Peter Vatican City

    UPCOMING TOURS – DEPARTURES

    Melbourne Cup

    Korean Tae Kwon Do |
    Dive Fiji
    2010 Oberammergau Passion Play
    Adventure Africa

    The EMAIL US – where you would like to travel
    on a GROUP Tour, we will see what can be arranged.

    BOOK NOW

    CONTACT US 1-888-485-6589

    Leader Tours Logo dth="195" height="72"/>

    JOIN A GROUP TOUR TODAY!

    Shared experiences,memories,create new friendships. Join one of our upcoming GROUP Tours or let us design a tailor-made GROUP Itinerary.

    CALL TODAY, our GROUP Specialists are excited to share our knowledge and expertise with you.

    Book now!

    GROUP DISCOUNT
    ASK US HOW!

    We are able to access quantity discounts due to the large volumes traveling every year. We negotiate the best possible Group Rates on your behalf.

    Ask us how your GROUP can quality for GROUP rebates and travel incentives.

    Ask us to get you the most competitive group rate with the most flexibility.

    Learn more


    It would be every helpful if you can give suggestions in code how to rectify this web problem. Thank you

    Wes
    # June 23, 2009 at 9:47 pm

    I’m not 100% sure but in your HTML you have the nav within your "content" div. Another thing that I’m sure will come up; I am assuming you want you navigation tabs to be horizontal instead of vertical so you need to change "display" to block instead of inline and then float them left

    # June 23, 2009 at 10:45 pm

    Put #nav before #content.

    # June 24, 2009 at 2:57 am

    Hi,
    Try this is working for u

    Bcos ul li is block level element its come one below another;

    ul#nav li {
    display: block;
    font-size: 1.3em;
    display:inline; /* just this line u get it*/
    }

    Superprakash

    # June 25, 2009 at 6:05 pm

    hello, thanks for all the suggestions, it worked. But its not complete in its right place and i am not sure how to go about it. All your suggestions and tips have placed the tabs closer to its destination. Can you guys help me I am not sure how to go about i changed the float to right, center and it doesn’t come out the right way. And the fourth tabs isn’t appearing and i doubled checked the link. I updated the site for you to see.

    http://www.leadertours.ca

    here is my css:

    Code:
    body {
    padding: 0;
    margin: 0;
    background: #072e66 url(images/wdw-bg.jpg) no-repeat center top;
    color: #333333;
    font-family: Helvetica, sans-serif;
    font-size: 65.5%;
    }

    ul#nav{
    list-style:none;

    }

    ul#nav li {
    display: block;
    }

    ul#nav li a {
    display: block;
    height: 50px;
    text-indent:-9099px;
    float: left;
    }

    ul#nav li.home a {
    width:171px;
    background:url(images/nav-home.jpg) botttom center no-repeat;}

    ul#nav li.about a {width:172px;
    background:url(images/nav-about.jpg) bottom center no-repeat;}

    ul#nav li.group a {width:168px;
    background:url(images/nav-group.jpg) bottom center no-repeat;}

    ul#nav li.contact a {width:174px;
    background:url(images/nav-contact.jpg) bottom center no-repeat;}

    ul#nav li a:hover {
    background-position: center center;
    }

    #content {
    width: 800px;
    margin: 228px auto 0;
    margin-bottom: 5px;
    background: #fff;
    border: solid 1px #ccc;
    padding: 20px;

    }

    div#left-col {
    float: left;
    width: 510px;
    padding-left: 20px;
    }

    div#right-col {
    float: right;
    width: 200px;
    border-top: 8px solid #ffc866;
    padding-top: 15px;
    font-size: 1.1em;
    }

    div#main-content div#right-col p {
    font-size: 1.1em;
    }

    part of my html:

    Code:

    "Discover the joy of traveling with others”

    St.Peter Vatican City

    UPCOMING TOURS – DEPARTURES

    Melbourne Cup

    Korean Tae Kwon Do |
    Dive Fiji
    2010 Oberammergau Passion Play
    Adventure Africa

    The EMAIL US – where you would like to travel
    on a GROUP Tour, we will see what can be arranged.

    BOOK NOW

    CONTACT US 1-888-485-6589

    Leader Tours Logo dth="195" height="72"/>

    JOIN A GROUP TOUR TODAY!

    Shared experiences,memories,create new friendships. Join one of our upcoming GROUP Tours or let us design a tailor-made GROUP Itinerary.

    CALL TODAY, our GROUP Specialists are excited to share our knowledge and expertise with you.

    Book now!

    GROUP DISCOUNT
    ASK US HOW!

    We are able to access quantity discounts due to the large volumes traveling every year. We negotiate the best possible Group Rates on your behalf.

    Ask us how your GROUP can quality for GROUP rebates and travel incentives.

    Ask us to get you the most competitive group rate with the most flexibility.

    Learn more

    # June 26, 2009 at 6:28 am

    Ok, the home tab isn’t showing because you have 3 t’s in bottom in the stylesheet.

    Now, wrap the nav in a div with the id of top-nav:

    Code:

    and then do this in your css:

    Code:
    #top-nav {
    margin:0 auto;
    position:relative;
    right:22px;
    top:187px;
    width:800px;
    }

    ul#nav {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0 auto;
    width:685px;
    }

    #content {
    background:#FFFFFF none repeat scroll 0 0;
    border:1px solid #CCCCCC;
    clear:both;
    margin:0 auto 5px;
    padding:20px;
    position:relative;
    top:187px;
    width:800px;
    }

    # June 27, 2009 at 6:34 pm

    thanks so much it worked!!!. Well, almost, just wondering what you meant by 3t’s in the style sheet. Since the Home nav hasn’t shown up yet.

    update: http://www.leadertours.ca

    And note, I have just noticed that the background image on top isn’t necessarily expanding to the full page width. Any suggestion on how to rectify it?

    I was thinking in adding a #wrapper over the whole thing in HTML and then adding width of 100% on my stylesheet but it didn’t work? What now?

    # June 28, 2009 at 3:52 am

    3 t’s in bottom, count them:

    Code:
    ul#nav li.home a {
    width:171px;
    background:url(images/nav-home.jpg) botttom center no-repeat;}

    Background image http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

    # July 1, 2009 at 3:06 pm

    thanks so much. Really appreciate the info. :D

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

You must be logged in to reply to this topic.

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