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

[olive21]

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:

• HOME
• ABOUT US
• GROUP TRAVEL
• CONTACT US

"Discover the joy of traveling with others”

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

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

© All Rights Reserved Downunder Travel Ltd.

[apostrophe]

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

[olive21]

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:

• HOME
• ABOUT US
• GROUP TRAVEL
• CONTACT US

"Discover the joy of traveling with others”

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

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

© All Rights Reserved Downunder Travel Ltd.

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

[Wes]

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

[apostrophe]

Put #nav before #content.

[superprakash]

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

[olive21]

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”

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

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

© All Rights Reserved Downunder Travel Ltd.

[apostrophe]

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;
}

[olive21]

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?

[apostrophe]

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/

[olive21]

thanks so much. Really appreciate the info. :D

[Author]

Posts