Chapter 5 - Layers
In the following two chapters, I will explain how to use layers with css to position you site content. A lot of people use tables for this. However, tables should be used to structure data, not design websites.
To make a layer you use the <div></div> tag where of course the <div> is the start and </div> is the end of the layer. let's say that you want to make a menu to the left and content to the right, you'll need to make two different layers. One for the menu and one for the content. Sounds simple enough? well... the hard part in this is that as standard. there can only be one layer per row. so if you create a layer with an height of 400 pixels. the other layer will be placed right under it. So what one must do is to float the layers.
example:
<html>
<head>
<title>A float example</title>
<style type='text/css'>
.menu {
float: left; <!-- The float property -->
width: 120px;
background-color: #dddddd;
}
.content {
float: left; <!-- The float property -->
width: 740px;
}
h1 {
font-family: helvetica, arial;
font-size: 18px;
color: #333333;
}
p {
font-family: lucida grande, verdana;
font-size: 12px;
color: #333333;
}
</style>
</head>
<body>
<div class='menu'>
<a href='start.html'>Start</a>
<a href='aboutme.html'>About me</a>
<a href='links.html'>Links</a>
</div>
<div class='content'>
<h1>Welcome to this float example!</h1>
<p>
There are three example links in the menu to the left. href='start.html' will try to find a page named start.html in your site folder.
</p>
</div>
</body>
</html>
The CSS property background-color: #dddddd; specifies the layers background color, in this case it will be light gray but you can put any hex code you want there.
Try and remove both float: left; properties in the css and see what happens. I repeat my self now because this is important, the very foundation of building websites with layers and CSS. If the layers are meant to coexist side by side, they must have the float property!
but there are more to this, if you would want to write text beneath these two layers with the float property, you must clear the row. To do this, we use the clear property.
.footer {
clear: both;
}
<!-- and in the body section -->
<div class='footer'>First name Last name - your_mail@domain.topdomain</div>
To be more clear, I'll show you a full example:
<html>
<head>
<title>A float example</title>
<style type='text/css'>
.menu {
float: left;
width: 120px;
background-color: #dddddd;
}
.content {
float: left;
width: 740px;
}
h1 {
font-family: helvetica, arial;
font-size: 18px;
color: #333333;
}
p {
font-family: lucida grande, verdana;
font-size: 12px;
color: #333333;
}
.footer_text {
font-size: 10px;
}
.footer {
clear: both; <!-- The clear property (clears the row) -->
}
</style>
</head>
<body>
<div class='menu'>
<a href='start.html'>Start</a>
<a href='aboutme.html'>About me</a>
<a href='links.html'>Links</a>
</div>
<div class='content'>
<h1>Welcome to this float example!</h1>
<p>
There are three example links in the menu to the left. href='start.html' will try to find a page named start.html in your site folder.
</p>
</div>
<div class='footer'><p class='footer_text'>First name Last name - your_mail@domain.topdomain</p></div>
</body>
</html>
You will notice a new class called "footer_text" I applied to the contact information in the footer, since this class is applied to a paragraph, it gains all the global properties I have specified for all paragraphs and the property specified in the "footer_text" class. But wait! The global paragraph class and the "footer_text" class both has the font-size property. Yes but specific classes are prioritized over global classes. In other words, the paragraph with class='footer_text' will prioritize font-size: 10px over font-size: 12px;.