Learn how to design your own XHTML valid website

Sep 24, 2006

—

in CSS, How to, lessons and tutorials, HTML

Learn how to design your own XHTML valid website

I know from my experience, that it’s not easy to make a switch between table-based design, and CSS-based design. Been there, done that – thank you. On the web there are many great resources and lessons for designing layout or navigation you can all find them on Google. There are also many documented problems between Firefox/IE/Opera/Safari.

I will try to help you with that switch, I will try to answer all your questions with this list of articles that cover designing one imaginary firms website from scratch. This articles will help you design your own sites and understand the process, but if you are not a web designer, you should try to hire one if you have any problems in the process. Hey, I know about computers, but I never tried to fix one, right?

Defining the site

First, you have to answer several very simple questions. What is your website about? How many pages will be on your site? What are the colors you will be using? What kind of layout are you planning to have?

We will be creating a web site for our imaginary firm called “Leaf industries”. We don’t even know what this firm is doing, or what is it’s purpose of existing, but because of the logo and the colors in it (leaf symbol in the logo, used font Times New Roman, green and black colors) we will have a 2 column layout with header and footer. The header will be green with shadow, and the navigation will be on the left side. All the files needed for this lesson can be downloaded here.

Creating the CONTAINER, two columns and FOOTER

Let us first create our document structure. Here it is.



<body>
<div id="container">

	<div id="head">
		<h1><a href="#" title="Leaf industries">Leaf industries</a></h1>
	</div>
	
	<div id="content">
		<h2>Welcome to Leaf industries</h2>
		<p>Lorem ipsum ...</p>
		<p>Lorem ipsum ...</p>
	</div>
	
	<div id="navigation">
		<ul>
			<li><a href="#" title="Homepage" class="selected">Homepage</a></li>
			<li><a href="#" title="About us">About us</a></li>
			<li><a href="#" title="Our projects">Our projects</a></li>
			<li><a href="#" title="Contact us">Contact us</a></li>
		</ul>
	</div>
	
	<div class="spacer"></div>
	
	<div id="footer">
		<p>Copyright &copy; <a href="http://www.emanuelblagonic.com/" title="EmanuelBlagonic.com">EmanuelBlagonic.com</a> 2006.</p>
	</div>

</div>
</body>

Let’s explain the code. We will tile the page background image in the BODY element (through the x-axis). You can always use BODY element to repeat background image (repeat-x or repeat-y).

The CONTAINER is created for solely purpose of, as it name says, containing the whole page. We created CONTAINER 10px larger on both sides because of the shadow in his background image. Inside the CONTAINER we will put rest of the layout (head, content, navigation and footer).

HEAD is meant for header, and inside HEAD you could put the logo and H1 (widely used for page description and a link to homepage), but also the site navigation (in this example we will not put the navigation inside HEAD). While CONTENT goes right the NAVIGATION goes left, and both of them are floated (right and left) with a margin of 10px. Below both of them goes FOOTER that displays the standard footer information such as copyright notice. Between CONTENT, NAVIGATION and FOOTER we will put a SPACER which is supposed to clear the display and make a margin of 20px between CONTENT and FOOTER.

CSS

Now it’s time to explain the CSS for this example. Although I like to group similar rules in CSS file like in our example, in the explanation process I will try to guide you step by step.

First, we will reset the padding and margins for the entire page. When resetting the padding and margins using HTML * we tell to the browser that all element under HTML will inherit these rules. This is important because different browsers have their different default rules.


html * {
	margin:0;
	padding:0;
}

Because we have a background image that is repeated trough the x-axis, we can have BODY repeat the background image. You can always use BODY element to repeat you background image if you have to repeat it, or even position it. In the BODY, we will also define screen typefaces, font colors and font-size (we will define the base font size as 62.5%, as this value will reset the base font size to 10px, and every 0.1em will make our text 1px larger).


body {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:62.5%;
	color:#202020;
	background:url(bg-x.jpg) repeat-x top;
}

The second image in our example (container-bg.jpg) is meant to display the background of CONTAINER. The CONTAINER is 10px larger because of the shadow in the background, and the DIVs inside the container will be floated and positioned with margin-left and margin-right. Because text alignment is inherited, we will use text-align:left in the container to make all the text on our page aligned left.


#container {
	width:620px;
	margin:0 auto;
	text-align:left;
	background:url(container-bg.jpg) no-repeat;
}

Header

Header contains logo, company slogan and navigation (in our example the navigation is positioned on left below header). Not all of them are clickable, but the logo usually is. It is widely used as link to homepage, and we will use it for this purpose in our example too.


#head {
	width:600px;
	height:200px;
	margin-left:10px;
}

We have to define the CSS for displaying H1 as page description and to position it on our logo. We gave it the width and height of 200px, which is the width and height of white box in the header in which logo is centered. Text is indented 8000px to prevent it to show on the page, and the H1 is absolute positioned.


h1 {
	width:200px;
	height:200px;
	position:absolute;
	text-indent:-8000px;
}
h1 a {
	height:200px;
	display:block;
	text-decoration:none;
}
h1 a:hover {
	text-decoration:none;
	background:transparent;
}

In H1 A we told the LINK to display as block and gave it the height of 200px (if we didn’t gave the link this height, the link would be the size of the text). We removed the text-decoration to prevent showing the default value – which is underline. This must be applied to both H1 A and H1 A:HOVER only if you wish the links to display without underline, and hover to display with them. We also used the background:transparent; value because in our example link are hovered with black background.

Redefining the tags

In next portion of CSS we will redefine some more main elements such as H2, P, A and A:HOVER.


h2 {
	font-size:2em;
	font-weight:normal;
	line-height:40px;
	color:#BC3310;
}
p {
	line-height:160%;
	font-size:1.4em;
	margin-bottom:10px;
}
a {
	color:#BC3310;
	text-decoration:none;
}
a:hover {
	color:#fff;
	background:#202020;
}

We made H2 20px in size as we used font-size:2em; (remember the base font size defined in the BODY?), removed the default value BOLD with font-weight:normal; and gave it the red color. We also used line-height to make the header vertically aligned to the first element in navigation. To move each next paragraph from the previous we used margin-bottom:10px;.

Please note: nevertheless I used line-height to vertically align the header, I do not advise you to do the same. Why? Line height is used to make lines removed one from another, and not to vertically aligned elements. If your header would go in two or more rows you will have a problem because each row will be moved from the previous by line-height. Instead of line-height you could use padding.

Content – Navigation – Footer

Both CONTENT and NAVIGATION are floated elements and moved from the edge of the container with margin 10px, depending on the float (left or right). The #CONTENT and #NAVIGATION are displayed inline because of IE float/margin bug. On the elements that are floated and that we gave margin on the side of the float, IE doubles the margin. This can be fixed by changing the display to inline.


#content {
	width:380px;
	float:right;
	margin-right:10px;
	display:inline;
}
#navigation {
	width:200px;
	margin-left:10px;
	float:left;
	display:inline;
	font-size:1.1em;
}


#navigation ul {
	list-style:none;
	padding:0;
	margin:0;
}
#navigation a {
	display:block;
	text-decoration:none;
	background-color:#F2D6CF;
	color:#202020;
	border-bottom:1px solid #fff;
	height:1%;
	line-height:40px;
	padding:0 10px;
}
#navigation li li a {
	padding-left:20px;
	background-color:#555;
}
#navigation a:hover, #navigation a.selected {
	background-color:#BC3310;
	color:#fff;
}
#navigation a.selected {
	font-weight:bold;
}

I won’t be explaining much of the navigation, because I explained it in article Creating menus: Vertical Navigation Explained. The only change is that we used line-height:40px; to make the buttons 40px high, and we used padding:0 10px; to remove the text 10px from left and right.

To display the FOOTER we used padding:10px 0; to remove the text 10px from top and bottom, text-align:right; to right align the text, and border:2px solid #202020; so the footer stays visually detached from the rest of the page.


#footer {
	padding:10px 0;
	border-top:2px solid #202020;
	text-align:right;
}

Last, but not least is the SPACER which is here to clear both floated elements and make a margin of 20px between them and FOOTER. Why is the spacer important? If you don’t have any text inside CONTAINER (or in our case CONTENT and NAVIGATION) the CONTAINER (to whom we gave a background image) won’t show the background image. If there is text the CONTAINER will expand to cover the text. But, there is a strange problem in Firefox when there are floated elements (like in our case). The background won’t show. So we have to “enlarge” the container by clearing the floats of both elements.


.spacer {
	clear:both;
	margin-bottom:20px;
}

The example

Here is our example

Please note: you can use this example as much as you like without any restrictions as long as you credit the author.

Comments

One response to “Learn how to design your own XHTML valid website”

Miha Hribar

September 25, 2006

I seem to be repeating this over and over again, but a great article! You seem to have a nack for writing concise tutorials.

But again, I have a few things to suggest ;) The thing I would do differently in this case is instead of using the <div id="head"><h1>...</h1></div> I would simply remove the surrounding div and simply replace it with the na<h1 id="head">...</h1>. You will find it has the same effect with a few bytes of code less. The same thing can be done with the navigation. I use surrounding divs only when the design is forcing me to use them :)

Reply