Lo all,
It's been a while since i did any web design stuff (ie frames many moons ago in uni
) I'm slowly wanting to get back into it, just for a personal site really. I know divs are the way to go, so tonight i've been having a bit of a mess about but i've got a bit stuck.
Now i know it looks bad, but it's just so i can see where each div is and see it move about as i fumble with the concepts lol
basic html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test1.css"/>
<title>test 1</title>
</head>
<body>
<!-- Main Div Container -->
<div id="bg">
<!-- Top title container -->
<div id="title">
</div>
<!-- Bottom content container -->
<div id="bg2">
<!-- left navigation menu container -->
<div id="nav">
</div>
<!-- main content container -->
<div id="main">
</div>
<!-- footer container -->
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Css:
body {
margin: 0 auto;
padding: 30px 30px 30px 30px;
font-family: Arial, Verdana, Sans-Serif;
font-size: 0.8em;
background: #F0F0F0;
}
#bg {
width: 760px;
margin: 0 auto;
height: 580px;
padding: 10px 10px 10px 10px;
background: #CDCDCD;
border: 2px solid black;
}
#title {
width: 740px;
margin: 0 auto;
height: 130px;
padding: 10px 10px 10px 10px;
border: 2px solid black;
}
#bg2 {
float:left;
clear: left;
width: 740px;
height: 390px;
margin: 10px 10px 10px 0px;
padding: 10px 10px 10px 10px;
border: 2px solid black;
}
#nav {
width: 50px;
height: 40px;
margin: 0 auto;
padding: 10px 10px 10px 10px;
background:#00FF33;
border: 2px solid black;
}
#main {
width: 75px;
height: 50px;
color: #00FFFF;
padding: 0px 0px 0px 0px;
margin: 10px 10px 10px 10px;
border: 5px solid black;
}
#footer {
clear: both;
color: #00FFFF;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 5px solid black;
}
I want the nav div down the left hand side, the main to the right of that and the footer at the bottom all inside the bottom content div. I just cant think at the moment, my head has switched off completely.
What am i missing/doing wrong?
Thanks all
It's been a while since i did any web design stuff (ie frames many moons ago in uni
) I'm slowly wanting to get back into it, just for a personal site really. I know divs are the way to go, so tonight i've been having a bit of a mess about but i've got a bit stuck. Now i know it looks bad, but it's just so i can see where each div is and see it move about as i fumble with the concepts lol
basic html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test1.css"/>
<title>test 1</title>
</head>
<body>
<!-- Main Div Container -->
<div id="bg">
<!-- Top title container -->
<div id="title">
</div>
<!-- Bottom content container -->
<div id="bg2">
<!-- left navigation menu container -->
<div id="nav">
</div>
<!-- main content container -->
<div id="main">
</div>
<!-- footer container -->
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Css:
body {
margin: 0 auto;
padding: 30px 30px 30px 30px;
font-family: Arial, Verdana, Sans-Serif;
font-size: 0.8em;
background: #F0F0F0;
}
#bg {
width: 760px;
margin: 0 auto;
height: 580px;
padding: 10px 10px 10px 10px;
background: #CDCDCD;
border: 2px solid black;
}
#title {
width: 740px;
margin: 0 auto;
height: 130px;
padding: 10px 10px 10px 10px;
border: 2px solid black;
}
#bg2 {
float:left;
clear: left;
width: 740px;
height: 390px;
margin: 10px 10px 10px 0px;
padding: 10px 10px 10px 10px;
border: 2px solid black;
}
#nav {
width: 50px;
height: 40px;
margin: 0 auto;
padding: 10px 10px 10px 10px;
background:#00FF33;
border: 2px solid black;
}
#main {
width: 75px;
height: 50px;
color: #00FFFF;
padding: 0px 0px 0px 0px;
margin: 10px 10px 10px 10px;
border: 5px solid black;
}
#footer {
clear: both;
color: #00FFFF;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 5px solid black;
}
I want the nav div down the left hand side, the main to the right of that and the footer at the bottom all inside the bottom content div. I just cant think at the moment, my head has switched off completely.
What am i missing/doing wrong?
Thanks all
