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-colors to the divs 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
Webpage
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.
1 Answer 1
Here's a quick demo of what I did
Heights
First off, I'd avoid height. Let the content define the container's height. Otherwise, you'll run into problems, like when the content is taller than the container. You can set a min-height for times when the content is small (like 1-line of text).
Target styles
I notice that .layout is targetted to both the container and the sections. Unless you're setting common styles, I'd avoid doing so. I see that you are setting 1000px width on .layout, which you assign to elements that don't need 1000px.
<div> is a block element
Just so you know, a <div> is a block element. It takes up 100% width automatically and forces itself below the previous element, and forces the one after it below it.
So as long as your container is 1000px, any <div> in it automatically is 1000px.
Sidebars
We all came across the problem of fitting the sidebar to the side, another just across the page, and have a central content that fills the remaining center.
Floats
Commonly done in floats, but the issue every developer I come across is that they set the width for just about everything. You know, there's a way to set the sidebar width to a fixed size, and have the content fill up the rest of the space without setting a width for it:
HTML:
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
CSS:
.container{
overflow:hidden;
}
.sidebar{
background: red;
float:left;
width: 100px;
height: 200px;
}
.content{
background: blue;
height: 200px;
overflow:hidden;
}
CSS Tables
No, I'm not talking about HTML tables. I'm talking about the display properties that allow elements to display similar to tables. It has the same HTML structure as your tables, but aren't tables. I like this approach better, and Bootstrap seems to use it too.
HTML:
<div class="table">
<div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
</div>
CSS:
.table{
display:table;
width: 100%;
height: 200px;
}
.table > *{
display:table-row;
}
.table > * > *{
display:table-cell;
}
.sidebar{
background: red;
width: 100px;
}
.content{
background: blue;
}
Design Trends
Just so you know, most of the websites today (save the traditional and unmaintained) are dropping sidebars because people today design for mobile too. You don't want an annoying sidebar all the time, it just takes up space.
HTML5 Tags
It would be better if you start adopting the new HTML5 tags. <header>, <nav>, <section> and <footer> would be good for starters.
Floats force display:block
Yes, if you set float for an element, it will force the element to be a block element. There's no use assigning a display property anymore after you do that.