This tutorial is similar to my
first one on creating a layout, only I go into greater detail as we design a whole webpage. You can see the final work
here which is what we will be creating in the tutorial.
If you've read my first tutorial, you'll know that html is not about how the resulting webpage will look, but it's structure. In other words, html is for content, CSS is for style! So let's create a page by starting with the content:
System Message: ERROR/3 (<string>, line 19)
Unknown directive type "sourcecode".
.. sourcecode:: xml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Farming</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="logo.png" alt="my company" />
Farming
<div id="tagline">Another design by joey101</div>
</div>
<div id="topbar">
<p>
Why did the tractor cross the road?<br />
He wanted to pick a fight
</p>
</div>
<div id="sidebar">
<ul class="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">A longer link</a></li>
<li><a href="#">An even longer link</a></li>
</ul>
<h1>Design by Joey</h1>
<p>
This template is by me (Joey Marshall aka joey101).
</p>
<h1>Logo</h1>
<p>
You should replace <i>logo.png</i> with your own logo.
I recommend you make it no larger than 70 pixels high.
</p>
<h1>Second navigation</h1>
<ul class="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<div id="body">
<h1>Some test content</h1>
<p>
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit, sed quia consequuntur magni dolores eos qui.
</p>
</div>
<div id="footer">
<a href="https://joey101.net">Design by joey101</a>
</div>
</div>
</body>
</html>
Again, it doesn't look very pretty yet! But there are a few things to note before we move on:
- I'll admit it; the div with an id "container" is for the display. We use it for the drop shadow around our page. I don't really see it as wrong to use extra divs or spans like this, even though they don't convey any information related to the content.
- We are using classes! (in the previous tutorial we did not) We have the class "nav" so that we can have multiple navigation bars along that side panel.
Now for the CSS! (the fun part) Let's break it up into steps and I'll explain what does what and why it's there.
System Message: ERROR/3 (<string>, line 99)
Unknown directive type "sourcecode".
.. sourcecode:: css
body
{
padding:0;
margin:0;
font-family:Sans-Serif, Arial;
}
Notice that there isn't a # or a . in front of "body". When that happens it applies to all the html element(s) with that name. So here we are not applying css to the div with the id of "body" but the body of the entire page (what is in the <body> tags). We set the margin and padding to 0 so that our stuff moves right up next to the edges of the browser. Also setting the font family here will change it for the whole page.
System Message: ERROR/3 (<string>, line 111)
Unknown directive type "sourcecode".
.. sourcecode:: css
#container
{
width:800px;
margin:0 auto;
padding:0 15px;
background:white url('shadow.png') top left repeat-y;
}
Aha! Here's the css for that wretched container div! We are using a background image (shadow.png) which is 800px wide, so we want to set the div's width to 800px (as we do on that first line).
Then we set the margin. Hold on, do I see two values set there!?! Yep you do. Here's the best way I can explain how it works; all three rows do the exact same thing:
System Message: ERROR/3 (<string>, line 125)
Unknown directive type "sourcecode".
.. sourcecode:: css
margin:0 auto;
margin:0 auto 0 auto;
margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;
Clear enough? The auto part just means that it will split up any extra space between all side that are set to auto (in this case the left and the right sides). This is how we center our layout on the page.
We set the left and right padding to 15px so that the html in the container won't overlap the shadow in the background image.
System Message: ERROR/3 (<string>, line 137)
Unknown directive type "sourcecode".
.. sourcecode:: css
#header
{
background:#724c1a url('header.png') bottom right no-repeat;
color:white;
padding:15px;
font-size:30px;
}
#header #tagline
{
color:#e3a14c;
padding-top:14px;
font-size:50%;
}
#header img
{
float:left;
margin-right:15px;
}
Allright, here's the css for our header (the div one, not the <head> tag which is pointless to style). You should be able to figure out what all this does, no new css properties. Only ting different is the #header #tagline definition which simply means to apply the styling to an html element with and id of "tagline" that is in an html element with an id of "header".
The indention doesn't mean anything, I just write my css like that to be easier to read, it doesn't effect how the css is applied in any way.
System Message: ERROR/3 (<string>, line 164)
Unknown directive type "sourcecode".
.. sourcecode:: css
#topbar
{
border-bottom: 2px solid #49300f;
border-top: 2px solid #49300f;
color:black;
background: white url('farm.jpg') center left no-repeat;
height:219px;
font-size:30px;
}
#topbar p
{
text-align:center;
padding-top:70px;
margin:0;
}
Only one new thing here; text-align. But it doesn't take a rocket scientist to figure out what that does! :D
System Message: ERROR/3 (<string>, line 185)
Unknown directive type "sourcecode".
.. sourcecode:: css
#sidebar
{
float:left;
width:200px;
background: white url('sidebar.png') top left repeat-y;
}
#sidebar h1
{
color: #472c08;
margin: 14px 0 0 0;
padding:0 7px;
font-size:15px;
border-bottom:1px solid #724c1a;
}
#sidebar p
{
margin:0 0 7px 0;
padding:0 7px;
font-size:11px;
}
#sidebar ul.nav
{
list-style-type:none;
padding:0;
margin:0;
}
#sidebar ul.nav a
{
font-size:13px;
display:block;
background:#724c1a url('nav.png') top left repeat-x;
padding:2px 5px;
color:white;
font-weight:bold;
text-decoration:none;
border:1px solid #724c1a;
border-width:0 1px 1px 0;
}
#sidebar ul.nav a:hover
{
background-image:none;
}
Here's a bit more lengthy section! Something new with the definitions; "ul.nave" is NOT the same as "ul .nav"! "ul.nav" means to apply the styling to all ul elements that have a style of "nav". Apposed to "ul .nav" which applies the style to html elements with a class of "nav" that are in a ul.
If you haven't already read my tutorial on styling the navigation you can go read it to understand what I'm doing here with the nav.
And the last bit of css you should already know what happens.
System Message: ERROR/3 (<string>, line 238)
Unknown directive type "sourcecode".
.. sourcecode:: css
#body
{
margin-left:214px;
padding:7px;
}
#body h1
{
color: #ab0202;
margin: 14px 0 0 0;
font-size:20px;
}
#body p
{
margin:0 0 7px 0;
font-size:13px;
}
#footer
{
clear:both;
font-size:80%;
text-align:right;
padding:2px 7px;
color:white;
background:#724c1a;
}
#footer a
{
color:white;
font-weight:bold;
text-decoration:none;
}
And that's it! You can see the final work here!
You can also download a zipped version of the source here.
