Putting it Together

Armed with our knowledge of HTML and CSS let us now put the two together to build a sample web page.

The Wireframe

The wireframe of the web page design we are going to build is as follows:

Simple Wireframe

In terms of structural HTML we would therefore need five <div> elements – one for the header, mainmenu, main content, submenu and then the footer. Finally we will 'wrap' the whole layout in a 'container' <div> to give us more design control.

Building the Wireframe HTML

To start building the wireframe HTML we will create a <div> element inside the element. We will give this an ID selector of 'container'.

<body>
<div id="container">
</div>
</body>

Next we will place the 'header', 'maincontent' and 'footer' logical divisions inside the 'container'. Each will be allocated an appropriate ID selector.

<div id="container">

    <div id="header">

    </div>
    
    <div id="maincontent">
    
    </div>
    
    <div id="footer">
    
    </div>

</div>

Remember that white spacing inside the HTML is ignored so add indents and extra lines to make the HTML as easy to read as possible.

Our wireframe had two menus. A main horizontal menu and a menu to the right of the main content. These will both be added next. The 'mainmenu' will go after the header and the 'submenu' after the 'maincontent'. Both again will be given appropriate ID selectors such that our HTML now looks as follows.

<div id="container">

    <div id="header">
    
    </div>

    <div id="mainmenu">

    </div>
    
    <div id="maincontent">
    
    </div>

    <div id="submenu">

    </div>
    
    <div id="footer">
    
    </div>

</div>

Great that is the skeleton of the HTML! Now let's add some content using some of the HTML tags from earlier.

<div id="container">

	<div id="header">
            <h1>Renewable Energy Consultancy</h1>
            <h2>Putting wind in your sales</h2>
        </div>
    
    <div id="mainmenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">What we do</a></li>
        <li><a href="#">How we can help</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    
  <div id="maincontent">
    <h3>Latest News</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <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 ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </div>
    
     <div id="submenu">
     <h3>Latest Projects</h3>
      <ul>
        <li><a href="#">Sheffield Wind Farm</a></li>
        <li><a href="#">Bradford Water Mill</a></li>
        <li><a href="#">Yorkshire Solar Centre</a></li>
      </ul>
    </div>
    
    <div id="footer">
    <p>&copy; 2011</p>
    </div>

</div>
 

Creating the CSS File

Now let's create the CSS file to style up this basic document. Open and save a new text file with a CSS file extension. A good convention to follow would be to create a folder called 'styles' to save the CSS file into. We will save the file as 'main.css' We will set some initial defaults to define the documents default text and background colors and choose a font.

To do so we will create a rule for the <body> tag as everything is a child of this element and will therefore inherit the properties set.

body{
	color:#666;
	background-color:#FFC;
	font-family:Arial, Helvetica, sans-serif;	
}

To attach this style sheet to our HTML document add the <link> tag inside the head of the HTML, referencing the CSS file using a relative path. As we saved our CSS file in a 'styles' folder the path will therefore be 'styles/main.css'.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Renewable Energy Consultancy</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>

Our page is filling the whole page width and we would like the text on a white background. Therefore create a rule for the container as follows. This is an ID selector so we use #.

#container{
	width:960px;
	margin:auto;
	padding:10px;
	background-color:#FFF;		
}

The properties set in this rule are as follows. Width sets the width of the container to 960 pixels. This is currently a popular width setting for web designers as it seats nicely within the current crop of screen resolutions and avoids horizontal scroll. The margin auto setting allocates any space left evenly between the left and right sides and as a result centres the container in the browser window. The text is a little close to the edge of the container so we'll add some padding. Then a white background colour is assigned to the container. All the other <div>s, which are children of the container thus inherit these settings.

Turning Vertical Lists Horizontal

Next we want our vertical bulleted list of links to appear horizontal. The following CSS rule will target just the list in #mainmenu and turn it horizontal.

#mainmenu ul, #mainmenu li{
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
}

Changes the display type to inline for both the <ul> and <li> elements which are by default block elements makes them appear on one line. The list-style rule is not always necessary but is in here to remove the bullets if display failed to do so. Margin and padding are set to zero to give us a new base level to style the list.

The next rule targets the hyperlinks in the list and gives them all a left border, left padding and removes the default hyperlink underline.

#mainmenu li a{
	border-left:1px solid #666;
	padding-left:5px;
	text-decoration:none;
}

The above changes all the links and to tidy things up we will target the first link to remove its left border. Here we are using a pseudo class called 'firstchild' that will target the first <li> in our list.

#mainmenu li:first-child a{
	border-left:none;
}

Finally to indicate to the user that these are still links we'll add the underline back in on rollover using text-decoration.

#mainmenu li a:hover{
	text-decoration:underline;
}

Floating the Sub-Menu

We want our ‘submenu’ to the right side of the ‘maincontent’. We can achieve this by using the CSS ‘float’ property. If we float both ‘maincontent’ and ‘submenu’ to the left they will ‘pile’ up against each other. What we need to be aware of here is that if total width of ‘maincontent’ and ‘submenu’ exceed 960px then the ‘submenu’ will be forced below the ‘maincontent’. To ensure this doesn’t happen we just need to do a little maths using the box model.

Say we want the ‘submenu’ to be 300px wide and give it a padding of 10px on all four sides, then the box model tells us that we actually have width of 320px in total.

If we therefore make the ‘maincontent’ 620px and give it an all round padding of 10px the box model gives us a width 640px in total.

So 320px for the ‘submenu’ and 640px for the ‘maincontent’ gives us a grand total of 960px. Note this assumes that we don’t put a margin on either ‘maincontent’ or ‘submenu’.

The CSS for this would be:

#maincontent{
	width:620px;
	float:left;	
	padding:10px;
	margin:0;
}
#submenu{
	margin:0;
	width:300px;
	padding:10px;
	float:left;	
}
#footer{
	padding:10px;
	clear:both;	
}

Now if we decide that we want to separate the ‘maincontent’ and ‘submenu’ with a border we could add the following to ‘maincontent’.

#maincontent{
	width:620px;
	float:left;	
	padding:10px;
	margin:0;
	border-right:1px solid #666;
}

But remember that the border value is also used to calculate the width of the content and this will add one pixel to the width of ‘maincontent’. That humble one pixel is enough however to cause the ‘submenu’ to be forced underneath ‘maincontent’.

Therefore we need to make a minor adjustment to the width of ‘maincontent’ – ie reduce its width by one pixel to compensate for the right border.

Our new rule for ‘maincontent’ is now:

#maincontent{
	width:619px;
	float:left;	
	padding:10px;
	margin:0;
	border-right:1px solid #666;
}

Do the Math

Our structure is can now be visualized as follows.

Maths of the Box Model

960px = 10 x 2 (padding on maincontent) + 619 (width) + 1 (right border)
+ 10 x 2 (padding on submenu) + 300 (width of submenu).

You may find it useful to sketch out your layout with numbers to check your calculations before getting stuck in.

Styling the Header

We could start to add some images to our design now. One common technique is to use background images in the document header. The following rule for ‘header’ applies a background image and adds a height value to the header that matches the dimensions of the background image.

#header{
	background-image:url(../images/renewable-energy.jpg);	
	height:250px;
}

Clearing the Footer

The only remaining section that doesn’t have a CSS rule is the ‘footer’. We obviously want the footer to be placed at the bottom of our document. To ensure it does we will add a ‘clear’ property such that the float level is reset. We will also add some padding, centre the text and add a border to the top.

#footer{
	border-top:1px solid  #666;
	padding:10px;
	text-align:center;
	clear:both;	
}

Adding Images and Floating them

If we want to add some images into the ‘maincontent’ to support the text, we would probably want the text to flow around the image. The ‘float’ property will help us out here. The following CSS rule is created as a class so that it can be used on lots of images. Images that have this class applied will be floated to the right, given a padding and margin and also have a border and background added.

.imgfloatright{
	float:right;
	padding:5px;
	margin:5px;
	border:1px solid  #666;	
	background-color:#FFC;
}

To apply the class place an image at the beginning of a paragraph of text and then the class can be assigned to any image as follows.

<p>
<img src="images/wind1.jpg" width="150" height="150" class="imgfloatright" />Lorem ipsum dolor sit amet, co …

Leave a Reply

*