Creating a CSS layout from scratch : Subcide

7. Additional Structure

Now that we have the base layout divs in place, we can add the rest of the structure that will make up the bare bones of this website.

The main things we still need to add are:

Navigation Links
Headings (Site Headings and Content Headings)
Content
Footer Information (copyright info, credits, and alternative navigation)

In order to start implementing these things without breaking the page layout, we will create a helpful little class called "hidden".

Add this near the top of your stylesheet, after the body tag definition:

.hidden {
	display: none;
}

What this means is now we can set any element in the site to have the class "hidden", and it won't show on the page at all. This will come in handy later. You can forget about it for now.

Lets talk about headings.

Headings in an HTML document are defined by the tags <h1> through to <h6> in order of importance to the document. For example, <h1> for the website name, <h2> for the primary headings (ie page name), <h3> for secondary headings, etc...

We'll add an <h1> inside our Header div, and set it to the name of the company, Enlighten Designs in this case.

<div id="header">
	<h1>Enlighten Designs</h1>
</div>

If you refresh your page you will notice that Enlighten Designs has come up in big letters inside the header, but there is also now a lot of white space around the heading. This is caused by the default margins on <h1> tags. So we need to strip the margins and padding by doing this:

h1 {
	margin: 0;
	padding: 0;
}

Now we'll add the navigation. The ins and outs of how the navigation will work can be rather complicated, and will be addressed fully in its own section later on.

The navigation will be structured as a definition list (<dl>) with individual id's relevant to each navigation item on each definition term (<dt>). These Definition terms will have links to our major sections inside them. If that sounds confusing, just add this code to your main-nav div:

<div id="main-nav">
	<dl>
		<dt id="about"><a href="#">About</a></dt>
		<dt id="services"><a href="#">Services</a></dt>
		<dt id="portfolio"><a href="#">Portfolio</a></dt>
		<dt id="contact"><a href="#">Contact Us</a></dt>
	</dl>
</div>

Note: Most people use unordered lists for their navigation, but for these single level navs I use definition lists because I find them a lot easier to get working in IE. There are a few annoying css bugs with unordered lists in Internet Explorer. But with very little modification, an unordered list would do the same thing just fine. Its personal preference I guess.

In easy to understand terms, the <dl> acts as a container, the <dt>'s are unique identifiers for each navigation item, and the links are...links.

We use the unique id's later when we come to make this navigation look like it should, with its sexy image rollovers. But more on that later.

If you refresh, you'll notice it looks a bit ugly, so for now, we'll just hide the navigation we added, with the "hidden" class we made earlier.

<div id="main-nav">
	<dl class="hidden">
		<dt id="about"><a href="#">About</a></dt>
		<dt id="services"><a href="#">Services</a></dt>
		<dt id="portfolio"><a href="#">Portfolio</a></dt>
		<dt id="contact"><a href="#">Contact Us</a></dt>
	</dl>
</div>

"And like *that*, it was gone..."

Now we'll jump down to the footer 'cause its relitively easy. There are 2 parts to the footer, the copyright info and credits on the left, and the alternative site nav on the right.

We want the alternate navigation to float right, like we did with the sidebar and the content, so we'll put that in the div first. In theory you should be able to float divs regardless of where they are in the source, but bugs in IE make this difficult, so for now, any floated items should come first in the source order.

Place it in a div with a unique id like so:

<div id="footer">
	<div id="altnav">
		<a href="#">About</a> - 
		<a href="#">Services</a> - 
		<a href="#">Portfolio</a> - 
		<a href="#">Contact Us</a> - 
		<a href="#">Terms of Trade</a>
	</div>
</div>

Underneath that div, we will add the copyright and credits text.

<div id="footer">
	<div id="altnav">
		<a href="#">About</a> - 
		<a href="#">Services</a> - 
		<a href="#">Portfolio</a> - 
		<a href="#">Contact Us</a> - 
		<a href="#">Terms of Trade</a>
	</div>
	Copyright &copy; Enlighten Designs

	Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
	<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

And thats the footer done for now. Just to make sure you're doing fine, this is what your site should look like:

Moving onto the main content area, lets add the content. I'm ripping this content directly off the design in step 2. Use <h2> tags for the headings "About" and "Contact Us". Enclose the paragraphs in <p></p> tags, and use <br /> for line breaks.

<div id="content">
	<h2>About</h2>
	<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in 
	   front and back end development. To view some of the web sites we have created view our 
	   portfolio.</p>
	<p>We are currently undergoing a 'face lift', so if you have any questions or would 
	   like more information about the services we provide please feel free to contact us.</p>
	
	<h2>Contact Us</h2>
	<p>Phone:   (07) 853 6060<br />
	Fax:     (07) 853 6060<br />
	Email:   <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a><br />
	P.O Box: 14159, Hamilton, New Zealand</p>
	<p><a href="#">More contact information...</a></p>
</div>

Refresh your page you'll notice there is more of that white space popping up around the content div. This is because of the default margins on the <h2> tags and the <p> tags.

We need to strip their margins and padding. However, we don't want to do this to every single paragraph tag or secondary heading that's going to be on the website. To do this we need to use 'child' CSS selectors.

All elements in HTML have a 'parent, child' relationship to one another. If 'tag a' is inside 'tag b', then tag b is the parent of tag a. In the code above, our <h2> tags and our <p> tags are both children of the #content div.

If we want to select the child elements of a specific parent, we separate them with a space, like the example below:

#content h2 {
	margin: 0;
	padding: 0;
}

#content p {
	margin: 0;
	padding: 0;
}

So the above rules tell the browser to apply these styles ONLY to <h2>'s and <p>'s that are child elements of the #content div.

Next we make the text look a bit better.

Subcide

Creating a CSS Layout from scratch

7. Additional Structure