Question : CSS Issues...

Hello Experts-Exchange! This being my first post at this website I've heard so much about. I am new to web development and am learning more and more, but css has been a struggle with me so far. I've been working on converting a photoshop mock-up into valid html/css. It's a simple theme (I think) and although I've made some progress I'm afraid my code has gotten sloppy as things began to break and I grew more frustrated getting things in the right place. At this point I'm not sure what my question is, just can someone help me make sense of this? I know I'm new at this and maybe this isn't even the right place to learn the basics, but a point in the right direction would be greatly appreciated. Sorry this went so long, here is the code (first is html, second is css):
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
<html>

<head>

<meta http-equi="Content-Type" content="text/html; charset-UTF-8" />

<title>Human Resource Associates</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>
<div id="wrap">
		<div class="sidebar">
				<div id="top">
				<a href="#" title="mywebsite"><img src="images/logo.png" alt="mywebsitelogo" id="header-logo" /></a>
				</div>
				<img src="images/navbar.jpg" alt="navigation" id="nav-bar" />
				
		</div> 
		
	<div id="main-nav">
		<ul>
			<li><a href="#" title="Home">Home</a></li>
			<li><a href="#" title="Our Team">Our Team</a></li>
			<li><a href="#" title="Services">Services</a></li>
			<li><a href="#" title="Contact Us">Contact Us</a></li>
		</ul>
	</div>
	
	
	
	
		<div id="main-content" >
	
		<!--<img src="images/slide1.jpg" alt="Mom and Son" class="slide" /> -->

		<div id="bottom">
		</div>
		<div id="text">
		<h1>Welcome to Human Resource Associates</h1>
		
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

		<div id="line1">
		</div>
		
		<div id="line2">
		</div>

		<div id="line3">
		</div>
		
		<ul id="footernav">
			
			<li><a href="#" title="Contact Us">Contact Us</a></li>
			<li><a href="#" title="Services">Services</a></li>
			<li><a href="#" title="Our Team">Our Team</a></li>
			<li><a href="#" title="Home">Home</a></li>
			
		</ul>
		</div>
	</div>
		
</div>
</body>

</html>
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
body		{color: black; font: 14px Georgia, Serif;}

a   			{text-decoration: none;}
a img		{border: 0;}

#wrap { margin:0 auto; width: 770px; }

.sidebar { float: left; width: 190px; border: 2px solid #e9e8e8;

				background: #82909e; /* for non-css3 browsers */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#98a3af', endColorstr='#718190'); /* for IE */
				background: -webkit-gradient(linear,100% 0%,0% 0%, from(#718190), to(#98a3af)); /* for webkit browsers */
				background: -moz-linear-gradient(left,  #98a3af,  #718190); /* for firefox 3.6+ */;				}
			
#wrap #nav-bar { position: relative;  right: 80px;}

.sidebar #header-logo { position: relative; float: left; margin-left: 200px; }

#bottom { position: relative; width: 190px; border: 2px solid #e9e8e8; height: 100%; right: 15; z-index: 0;

				background: #82909e; /* for non-css3 browsers */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#98a3af', endColorstr='#718190'); /* for IE */
				background: -webkit-gradient(linear,100% 0%,0% 0%, from(#718190), to(#98a3af)); /* for webkit browsers */
				background: -moz-linear-gradient(left,  #98a3af,  #718190); /* for firefox 3.6+ */; }
				
				


#main-nav 	{ width: 750; }
#main-nav ul	{ position: relative; Top: 150px; left: 15; list-style: none;}
#main-nav li a	{ display: block; text-align: center; width: 130px; float: left; color: black; font: 20px Georgia; }
#main-nav li a:hover,  #main-nav li a:active	{color: red;}

#main-content {position: relative; top: 180px; left: 15;}
#main-content #slide { width: 743; position: relative; }
#main-content #text { float: right; }

#line1 { float: left; width: 537px; height: 1px; background: #145495; }
#line2 { float: left; width: 537px; height: 1px; background: #FFFFFF; }
#line3 { float: left; width: 537px; height: 1px; background: #7d8c9a; }

#footernav { width: 688; position: relative; list-style: none; padding: 5px,0,5px,0;}
#footernav li a { display: block; text-align: center; width: 52; float: right; color: black; font: 10px Georgia; }
#footernav li a:hover, #footernav li a:active { color:red; }
Attachments:
 
Here is the website mock-up
Here is the website mock-up
 

Answer : CSS Issues...

I dislike RealPlayer along with the Quicktime. I still think those two applications are nothing but trouble.
I can recommend you Real Alternative that I am using which is light and spyware free.
http://www.free-codecs.com/download/real_alternative.htm
Random Solutions  
 
programming4us programming4us