- This topic is empty.
-
AuthorPosts
-
June 21, 2009 at 5:20 pm #25224olive21Member
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”
UPCOMING TOURS – DEPARTURES
Melbourne Cup
Korean Tae Kwon Do |
Dive Fiji
2010 Oberammergau Passion Play
Adventure AfricaThe 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.
June 21, 2009 at 10:37 pm #59496apostropheParticipantIt’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 #59594olive21MemberThanks 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?
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:
LEADER TOURS by Downunder Travel – Specializing in Group Travel Worldwide "Discover the joy of traveling with others”
UPCOMING TOURS – DEPARTURES
Melbourne Cup
Korean Tae Kwon Do |
Dive Fiji
2010 Oberammergau Passion Play
Adventure AfricaThe 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
June 23, 2009 at 9:47 pm #59599WesParticipantI’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 #59620apostropheParticipantPut #nav before #content.
June 24, 2009 at 2:57 am #59606superprakashMemberHi,
Try this is working for uBcos 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 #59721olive21Memberhello, 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.
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 AfricaThe 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.
June 26, 2009 at 6:28 am #59747apostropheParticipantOk, 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 #59833olive21Memberthanks 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 #59838apostropheParticipant3 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 #60019olive21Memberthanks so much. Really appreciate the info. :D
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.