Forums

olive21

I am having a few issues.

My first site. http://www.leadertours.ca

My footer text isn't showing up the bottom and my background doesn't fill the whole page. My nav isn't working the correct way. The home page is on its active state on all the pages. I tried the user the tutorial from another site for large background and it didnt work.

here is my css:



body {
	padding: 0;
	margin: 0;
	[color=#404000]background: #072e66 url(images/wdw-bg.jpg) no-repeat center top;[/color]
	color: #333333;
	font-family: Helvetica, sans-serif;
	font-size: 65.5%;
}
#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;

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

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

html:

</div>


<p style=\"padding-bottom: 800px\"> </p>



</div> <!-- END content -->

<div id=\"footer\">

<p>&copy; All Rights Reserved Downunder Travel Ltd.</p>
</div>
</div> <!-- END wrapper -->

Second site. http://www.greatsoutherngroup.ca

css:

ul#nav {
	height: 236px;
	background: url(images/header-bg.jpg) no-repeat;
	list-style: none;
	padding-left: 73px;
	}
	
	
	ul#nav li {
		display: inline;
		font-size: 1.3em;
	}
	
	
	ul#nav li a {
	display: block;
	width: 132px;
	float: left;
	margin-top: 172px;
	color: white;
	padding-top: 4px;
	font-weight: normal;
	text-decoration: none;
		}

html:

<div id=\"page-wrap\">
	
		<ul id=\"nav\">
			<li><a href=\"index.html\">Home</a></li>
			<li><a href=\"aboutus.html\">About Us</a></li>
			<li><a href=\"insurance.html\">Travel Insurance</a></li>
			<li><a href=\"intltravel.html\">International Travel</a></li>
			 <li><a href=\"contact.html\"> Contact Us</a></li>
		</ul>

The navigation isn't evenly spread out between international travel and contact, and I am not sure how to give it more space without disturbing the other navs. And its in a wrapper of 800px width.

When I am printing the page of the website the header doesn't appear. What do I do so that it does appear?

Please help.

treehouse : what would you like to learn today?

Forums

Problems Css Nav align, background