View Single Post
Old 08-12-2011, 07:59 PM   PM User | #6
Sammy12
Registered User

 
Join Date: Jun 2011
Posts: 1,063
Thanks: 12
Thanked 241 Times in 240 Posts
Sammy12 is on a distinguished road
you had a lot of problems with your code, here's it fixed:

to mark a thread as resolved, go to edit (on your first post), "go advanced", then there should be a little select next to the edit title

Remember that id's can only be used once, I made the "current" page .selected because classes can be used again and again

Code:
<!DOCTYPE html>
<html>
	<head>
		<title>Tropical Tidbits</title>
		<meta name="description" content="Tropical Tidbits - tropical weather and Atlantic hurricane information, analysis, and forecasts" />
		<meta name="keywords" content="tropical, tidbit, tidbits, atlantic, hurricane, weather, storm, Levi, Cowan, Levi Cowan, analysis, information, forecast, cyclone, ocean, caribbean, united states, tracking, models, news, depression, honduras, nicaragua, jamaica, cuba, puerto rico, florida, gulf of mexico, radar, satellite, surface, data, loops, maps, current, invest, africa, rain, wind, flooding, storm surge, meteorology, official, links" />
		<meta name="author" content="Levi Cowan" />
		<style type="text/css">
		
			/* resets margins and paddings for all tags */
			* { margin: 0; padding: 0; }
			
			ul { list-style: none; }
			
			body { 
				font-family: arial, sans, sans-serif;
				/* pt is not resizable, try using px or ems */
				font-size: 10pt;
				margin-top: 0;
				background-image: url('images/wrapper-dropshadow.jpg');
				background-position: center;
				background-repeat: repeat-y;
			}
			
			#wrapper {
				width: 1024px;
				margin: 0 auto;
			}
			
			#banner { 
				background-image: url('images/banner.jpg');
				width: 100%;
				height: 169px;
			}
			
			#navbar	{
				width: 758px;
				margin: auto;
				height: 49px;
				padding-top: 100px;
			}
			
			#navbar li	{ 
				float: left;
				margin-left: 5px;
			}
			
			#navbar li:first-child {
				margin-left: 0;
			}
			
			#navbar a {
				display: block;
				padding: 13px 15px;
				color: #FFF;
				/* your forgot an ; */
				font-size: 14pt;
				background-color: rgba(0,106,205,0.35);
				/* Need more browser support */
				border-radius: 12px; 
				-webkit-border-radius: 12px;
				-moz-border-radius: 12px;
			}
			
			#navbar a:link {
				text-decoration: none;
			}
			
			#navbar li:hover a {
				/* rgba is not suppoted in all browsers, try using hex codes instead */
				background-color: rgba(0,16,97,0.35);
			}
			
			#navbar li.selected a {
				background-color: rgba(0,16,97,0.35);
			}
			
			#main-section {
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="banner">
				<ul id="navbar">
					<li class="selected"><a href="index.html">Home</a></li>
					<li><a href="storminfo.html">Current Storm Info</a></li>
					<li><a href="invest-tracking.html">Invest Tracking</a></li>
					<li><a href="analysis.html">Analysis Tools</a></li>
					<li><a href="links.html">Links Database</a></li>
				</ul>
			</div>
			<div id="main-section">
				This is the home page.
			</div> 
		</div>
	</body>
</html>

Last edited by Sammy12; 08-12-2011 at 08:05 PM..
Sammy12 is offline   Reply With Quote