On Making a Web Site – HTML / CSS Layout

Putting it All Together

Now we’re going to take our image that we created at the end of the last tutorial and use it to create a web page.

First, let’s create the HTML necessary. Feel free to copy from below:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
	<title>Web Page Layout</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
 
<body>
 
	<div id="header"></div>
 
</body>
</html>

You may have noticed there are a few changes from our simple HTML page from earlier. There’s now a DOCTYPE and extra attributes in the html and head tags. All of those items tell the browser exactly what type of file you’re creating here. I used to know what they all meant, but I’ve been copying and pasting them for so long now I’ve honestly forgotten. Just suffice it to say that they help standardize your web page.

The other thing you might notice that’s different is the link element that’s introducing our CSS file. This is one way — and my preference — to add CSS to your web page. By having the CSS file as a separate file instead of including all the CSS in your header, you allow yourself to have the same file be accessible to all your different pages that comprise your web site. The rest of the attributes (rel, type, and media) communicate with the browser to tell it what type of file its looking at and how to deal with it.

So once we have all of that in a file, we go ahead and save it as index.html and also create an empty text file and name it style.css. Make sure that your header image is in the same directory as those two files. If you didn’t keep your image, or need mine, you can find it here. I’m going to do all the measurements off my image, so you may want to work on that along with me.

Find out the size of the image. You can do this in Photoshop (ALT + CTRL + I) or just hover over the file in a Windows browser and it’ll show you the dimensions (width x height).

Now, open your style.css file. Input the following:

1
2

body { background-color: #B0C3FE; }
#header { background: #B0C3FE url('header.jpg') no-repeat; width: 935px; height: 207px; }

The first line tells the web page what background color we’re going with. And, you guessed it, that’s the background color I use on this page.

The second line is an abbreviated background property. The first value tells it the background-color (same as the body, so if the image is broken it’ll keep the same background). The second tells it the background-image, in this case our header image. You just put the name and location of the image inside the url(”). The third value deals with repeating. We only want this background to appear once, so we tell it not to repeat.

We also assign a width and a height so that the div shows all the background image. If we didn’t assign those values, we wouldn’t see anything at all since the div has no content to speak of.

You can see the web site as it is right here: Step 1

The next step is to add columns for our main content and our sidebar. The best way to do this is via floats and margins. Let’s adjust our html to add the new divs for the content (and I’m going to add some paragraphs to fill it out):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body>
 
	<div id="header"></div>
 
	<div id="main">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nec nisl quis sem mattis eleifend. Praesent tellus urna, venenatis a, ornare in, fringilla at, diam. Donec ut libero at justo semper posuere. Nunc facilisis pede eget ipsum. Aliquam eros tortor, consectetuer quis, suscipit quis, fermentum eu, felis. Quisque nisi nisl, malesuada nec, condimentum at, commodo sit amet, magna. Aliquam posuere. Phasellus mi. Sed ullamcorper turpis a enim. Mauris elit lectus, semper in, bibendum at, aliquam id, eros. Nulla eget pede quis est sodales tristique. Nulla aliquam augue vitae tortor. Donec tortor diam, convallis eu, commodo non, tempus nec, mauris. Phasellus malesuada ultricies justo. Pellentesque dapibus tortor ac nisi. Ut eu arcu. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
		<p>Mauris id justo ac libero rhoncus sollicitudin. Praesent eget dui et tellus consequat rutrum. Curabitur non diam ut risus vulputate faucibus. Nunc posuere consequat quam. Mauris laoreet mauris vitae orci. In dui turpis, euismod mollis, dapibus vel, euismod in, nisl. Proin ipsum. Quisque a enim. Vivamus aliquam posuere metus. Vestibulum vitae ligula id erat vehicula ultricies. Aliquam ac sapien eu nisi imperdiet aliquam. Nullam euismod enim euismod libero. Praesent iaculis, elit eu ullamcorper luctus, sem justo euismod sem, in laoreet quam magna in est. Ut volutpat gravida libero. Integer tellus leo, dictum ac, bibendum sit amet, facilisis vitae, mi. Nullam placerat, felis sed congue suscipit, arcu lorem commodo dui, at mattis odio diam ac justo. Mauris justo diam, faucibus sit amet, pulvinar id, venenatis nec, risus. </p>
	</div>
 
	<div id="sidebar">
		<p>Ut at massa a quam pellentesque porta. Nunc justo ante, pellentesque ut, facilisis nec, fermentum a, lacus. Etiam laoreet. Nulla tempus, nibh nec ultrices molestie, felis turpis cursus lacus, sed faucibus sapien tortor ac urna. Sed tempor ipsum vitae elit. Curabitur lobortis dui. Nullam eget eros in ipsum consequat volutpat. Integer at lacus sit amet neque rutrum facilisis. Fusce viverra. Nullam laoreet nulla vestibulum purus. Sed velit diam, placerat eu, sollicitudin vitae, auctor et, tortor. Phasellus non mi at nulla vulputate ullamcorper. </p>
	</div>
 
</body>

Now add the following lines to your CSS file:

1
2

#main { float:left; background-color: #E7ECFF; width: 501px; margin-left: 9px; }
#sidebar { float:left; background-color: #E7ECFF; width: 197px; margin-left: 76px; }

Here I’m making both columns float to the left, which means they’ll stack horizontally and slide up next to one another. In order to make the main column match the header image, I have it a left margin of nine pixels. The header image had the main column at 501 pixels wide, so I made the CSS match. I repeated the process with the sidebar, noting that it was 76 pixels right of the main column and 197 pixels wide.

You can see our progress here: Step 2

If you take a look at your work or my example, you may notice that it doesn’t look perfectly correct. The image doesn’t match well with the solid color columns. This means I went a little overboard with the eraser on the original image or I need to add a background to the columns.

A word of caution on the column background, however. This might be your first experience with fluid layouts. The amount of text is what determines the height of the column. Therefore, we can never truly know what height the column will end up. That’s why CSS can repeat backgrounds (with the values of repeat, repeat-x and repeat-y). It can be tough to create repeatable backgrounds that don’t suck. It’s easier to just make the header fade into the background color of the column, or sparingly use the eraser on the column. Here’s my background image that I repeat on this column.

Also, you may notice that part of the header image is chopped off on the bottom right side. This is on purpose because in my original header image it overflowed vertically. What I would do (and did do on this site) is have a slice of that image and add it in yet another floating div next to the sidebar. You can see the real image here to get a better idea of which I speak.

That’s it! You’ve now learned a bit of HTML and a bit of CSS and put them together to create a facsimile of a web page! (Ha! You get no love from me.)

If you had a completely different layout idea for your site and are having trouble adapting my example, visit this site for lots of different css layouts.

page 1 page 2 page 3 page 4 page 5 page 6

Jul 30.08

Filed under: This Site by ianswens

One Response to “On Making a Web Site – HTML / CSS Layout”

  1. May 26th, 2009

    john commented thusly:

    Very helpful. Just wanted to say thanks.

Leave a Reply

You must be logged in to post a comment.