Web Page Layout #7
Tutorial on How to Design a Web Page

We have developed a simple way for beginners to design their own web page template using division tags and CSS (style sheets).

Layout #7Layout #7 is a very simple design that uses 3 single column divisions. The first is used for our heading. The second is used for our links. The third is used for our body content.

Note: We added a fourth division to the code for the footer to complete the design. If you were creating a second version of your websites for mobile devices only, this is the layout you would use.


Layout 7This simple web page, Layout 7 was created using this set up.

The basic HTML code without content is shown on the right.


Alignment of columns, color and font properties are all set using the style sheet, layout7.css.

<html>
<head>
<link rel="stylesheet" href="layout7.css" type="text/css">
</head>
<body>
<div id="heading"></div>
<div id="links"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>

The CSS Layout #7

/* remove all default padding and margins */
* {
padding: 0 0 0 0;
margin: 0 0 0 0
}

/*set background color for body */
body {
background: #5a0000;
padding: .5% 5%;
font-family:arial, verdana, serif; 
font-style: normal;
font-weight: normal
}

#heading {
/* set width  of heading division*/
width: 100%;
float: left;
background: #800000
}



#links {
/* set width  of links division*/
width: 100%;
float: left;
background: #ff8080
}

#main {
width: 80%;
float: left;
background-color: #ffbfbf;
padding: 0 10%
}

#footer {
width: 100%;
float: left;
background: #800000
}

/* Liquify images */
img {
max-width: 100%
}

/* set font properties of h1 tag in heading div */
#heading h1 {
font-size: 24px;
float: left;
color:#efefef;
padding: 5% 0 5% 10%
}


/* set font properties for p tag and links in links div */
#links p {
font-size:14px;
float: left;
padding: .5% 1%
}

/* set color of links and remove underline */
#links a {
color: #800000;
background-color: transparent;
text-decoration: none
}

/* set hover or rollover color of links */
#links a:hover {
color: #ffffff;
}

/* set font properties for h1 tag in main div */
#main h1 {
font-size:20px;
text-align:center;
color:#800100;
padding: 2% 0
}


#main h2 {
font-size:16px;
text-align:center;
color:#000000;
padding: 2% 0
}

/* set font properties for paragraph tag in main div */

#main p {
font-size:16px;
text-align:left;
text-indent: 16px;
padding: 2% 0

}



#main img {
margin: .5% 2%;
border: solid #000000 1px
}


address {
color: #efefef;
font-size: 14px;
font-weight: bold;
text-align: center;
padding: .5% 0
}

Kit and More Information

You can download the web page code , style sheet and images in a zip file for further study.
Download Layout7.zip

Use these lessons in our HTML tutorial to get a better understanding of building web pages with division tags and CSS.
The Division Tag
The ID Attribute

More Web Page Resources

You can get a logo for your web page made free at our Web Graphics Gallery.

Get your navigational buttons at our Button Gallery or go to Creating Buttons With CSS