Anyone good with HTML + CSS?

Tanax · 02-23-2009, 12:56 PM

Hi!

I'm trying to create a website layout. Right now I've just used different background colors to distinguish the different elements and the positioning of them.

Anyhow, the "problem" is:

1. I want margins between the logo and the header, but I can't seem to get any margins cause of the float: left; I've done on the logo.

2. I want the same margin between the left menu(products) and the menu-bar, and also the content.

3. This CSS doesn't seem really good, seeing as if I try to use padding on the header, cause of the h1 element, it get's pushed down really weird.

4. I tried to do the links in the menu-bar like a ul list, and I got rid of the list "dots", but they still were on different rows, how would I solve that?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		<title>Eldobado</title>
		
	</head>
	
	<body>
	
		<div id="container">
			
			<div id="logo">&nbsp</div>
			
			<div id="header"><h1>Eldobado</h1></div>
			
			<div id="left-menu">Products</div>
			
			<div id="menu-bar">
				
				Link 1

			</div>
			
			<div id="content"><h1>Content</h1></div>
		
		</div>
	
	</body>
</html>

Code:

body {
	
	margin: 0;
	padding: 0;
	padding-left: 30px;	
	padding-right: 30px;

}

#container {

	background-color: #E0EEEE;
	padding: 10px;

}

#logo {

	background-color: #838B8B;
	width: 200px;
	height: 170px;
	float: left;

}

#header {

	background-color: #2F4F4F;
	height: 170px;
	text-align: center;

}

#header h1 {

	margin: 0;
	padding: 0;
	
}

#left-menu {
	
	margin-top: 10px;
	background-color: #00C78C;
	width: 200px;
	float: left;
	height: 600px;

}

#menu-bar {

	background-color: #00C957;
	margin-top: 10px;

}

#content {

	height: 570px;
	text-align: center;
	background-color: #98FB98;
	margin-top: 10px;

}

#content h1 {

	margin: 0;
	padding: 0;

}

I'm a complete newbie at CSS so any help will be appriciated!
Thanks