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"> </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