Introduction
I am designing a website as a hobby. As you can probably tell from the code below, I am an absolute beginner. The first thing I'd like to do is to create a nice webpage template that I can use for every page. This is what I have so far (I've added background-color
s to the div
s just for visability):
HTML
<!DOCTYPE html>
<html>
<head>
<title>Fiddling Bits</title>
<meta charset="utf-8">
<meta name="description" content="All Things C and Embedded C">
<meta name="author" content="Paul Dunn">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="layout">
<div class="layout header">
</div>
<div class="layout main_nav">
</div>
<div class="layout sub_nav">
</div>
<div class="layout content">
</div>
<div class="layout footer">
</div>
</div>
</body>
</html>
CSS
.layout
{
position: relative;
width: 1000px;
margin: 0 auto;
}
.layout .header
{
float: left;
display: inline;
height: 100px;
background-color: red;
}
.layout .main_nav
{
float: left;
display: inline;
height: 50px;
background-color: orange;
}
.layout .sub_nav
{
float: left;
display: inline;
height: 300px;
width: 20%;
background-color: yellow;
}
.layout .content
{
float: left;
display: inline;
float: right;
height: 300px;
width: 80%;
background-color: blue;
}
.layout .footer
{
float: left;
display: inline;
height: 50px;
background-color: green;
}
Output
Sections
- Header (Red)
- Main Navigation (Orange)
- Sub-Navigation (Yellow)
- Content (Blue)
- Footer (Green)
Conclusion
Any advice that you can render on how I can improve, no matter how minor, would be greatly appreciated.