<div id=\"left-col\"> <h1>"Discover the joy of traveling with others\"</h1> <img src=\"images/indexleftpic.jpg\" alt=\"St.Peter Vatican City\" width=\"498\" height=\"279\" />
<p><h2> UPCOMING TOURS – DEPARTURES</h2> <br /> <h5><p>Melbourne Cup <br /> Korean Tae Kwon Do |<br /> Dive Fiji<br /> 2010 Oberammergau Passion Play<br /> Adventure Africa <p> The <a href=\"\">EMAIL US</a> – where you would like to travel <br /> on a GROUP Tour, we will see what can be arranged. </p></h5>
<h3><a href=\"\">BOOK NOW</a></h3> <p> <h1>CONTACT US 1-888-485-6589</h1> </p> </div> <!-- END left-col -->
<div id=\"right-col\"> <img src=\"images/indexrightlogo.jpg\" alt=\"Leader Tours Logo\" dth=\"195\" height=\"72\"/><h2>JOIN A GROUP TOUR TODAY!</h2><br /> <br /> Shared experiences,memories,create new friendships. Join one of our upcoming GROUP Tours or let us design a tailor-made GROUP Itinerary.<br /> <br /> CALL TODAY, our GROUP Specialists are excited to share our knowledge and expertise with you. <br /> <br /> <h3><a href=\"\">Book now!</a></h3><br /> <br /> <h2>GROUP DISCOUNT ASK US HOW!</h2></p> <p>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.<br /> <br /> Ask us how your GROUP can quality for GROUP rebates and travel incentives.<br /> <br /> Ask us to get you the most competitive group rate with the most flexibility.</p><h3><a href=\"\">Learn more</a></h3><br /> </p> </div>
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:
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%; }
<div id=\"left-col\"> <h1>"Discover the joy of traveling with others\"</h1> <img src=\"images/indexleftpic.jpg\" alt=\"St.Peter Vatican City\" width=\"498\" height=\"279\" />
<p><h2> UPCOMING TOURS – DEPARTURES</h2> <br /> <h5><p>Melbourne Cup <br /> Korean Tae Kwon Do |<br /> Dive Fiji<br /> 2010 Oberammergau Passion Play<br /> Adventure Africa <p> The <a href=\"\">EMAIL US</a> – where you would like to travel <br /> on a GROUP Tour, we will see what can be arranged. </p></h5>
<h3><a href=\"\">BOOK NOW</a></h3> <p> <h1>CONTACT US 1-888-485-6589</h1> </p> </div> <!-- END left-col -->
<div id=\"right-col\"> <img src=\"images/indexrightlogo.jpg\" alt=\"Leader Tours Logo\" dth=\"195\" height=\"72\"/><h2>JOIN A GROUP TOUR TODAY!</h2><br /> <br /> Shared experiences,memories,create new friendships. Join one of our upcoming GROUP Tours or let us design a tailor-made GROUP Itinerary.<br /> <br /> CALL TODAY, our GROUP Specialists are excited to share our knowledge and expertise with you. <br /> <br /> <h3><a href=\"\">Book now!</a></h3><br /> <br /> <h2>GROUP DISCOUNT <br /> ASK US HOW!</h2></p> <p>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.<br /> <br /> Ask us how your GROUP can quality for GROUP rebates and travel incentives.<br /> <br /> Ask us to get you the most competitive group rate with the most flexibility.</p><h3><a href=\"\">Learn more</a></h3><br /> </p> </div>
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
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:
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; }
<div id=\"left-col\"> <h1>"Discover the joy of traveling with others\"</h1> <img src=\"images/indexleftpic.jpg\" alt=\"St.Peter Vatican City\" width=\"498\" height=\"279\" />
<p><h2> UPCOMING TOURS – DEPARTURES</h2> <br /> <h5><p>Melbourne Cup <br /> Korean Tae Kwon Do |<br /> Dive Fiji<br /> 2010 Oberammergau Passion Play<br /> Adventure Africa <p> The <a href=\"\">EMAIL US</a> – where you would like to travel <br /> on a GROUP Tour, we will see what can be arranged. </p></h5>
<h3><a href=\"\">BOOK NOW</a></h3> <p> <h1>CONTACT US 1-888-485-6589</h1> </p> </div> <!-- END left-col -->
<div id=\"right-col\"> <img src=\"images/indexrightlogo.jpg\" alt=\"Leader Tours Logo\" dth=\"195\" height=\"72\"/><h2>JOIN A GROUP TOUR TODAY!</h2><br /> <br /> Shared experiences,memories,create new friendships. Join one of our upcoming GROUP Tours or let us design a tailor-made GROUP Itinerary.<br /> <br /> CALL TODAY, our GROUP Specialists are excited to share our knowledge and expertise with you. <br /> <br /> <h3><a href=\"\">Book now!</a></h3><br /> <br /> <h2>GROUP DISCOUNT <br /> ASK US HOW!</h2></p> <p>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.<br /> <br /> Ask us how your GROUP can quality for GROUP rebates and travel incentives.<br /> <br /> Ask us to get you the most competitive group rate with the most flexibility.</p><h3><a href=\"\">Learn more</a></h3><br /> </p> </div>
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?
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?
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:
http://www.leadertours.ca
here is my css:
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:
It would be every helpful if you can give suggestions in code how to rectify this web problem. Thank you
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
http://www.leadertours.ca
here is my css:
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:
Now, wrap the nav in a div with the id of top-nav:
#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;
}
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?
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/