CSS redesign
Ok, the basic CSS and HTML has the header and content panel there (no navbar yet, but I’m going to do a trick with that), and now I’ll use server side includes to pull in content from another file. I generally use 2 types of includes – common includes, such as the stylesheet or a copyright notice or my navigation bar, and local includes that are used only on a specific page. It’s better to use use content includes than embedding the content in your core HTML file, that way you have content files, style files (CSS) and layout files (HTML).
I’ll create a file called localcontent.inc, and paste in the following:
<h1>Content Heading</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi non
pede. Praesent eu neque. Vivamus sagittis diam a sapien. In faucibus
aliquet magna. Vivamus eget magna in orci mollis fermentum. Vestibulum
pulvinar consectetuer nisi. Mauris leo. Nulla hendrerit venenatis nunc.
Pellentesque pretium dolor in augue. Praesent volutpat. Nulla sed ante.
Sed et sapien. Cras in nulla.
And in my HTML where I want the content to be I paste in this:
<!–#include virtual = “localcontent.inc” –>
That will get me a block of text, and a heading. So I make the change to the HTML file, and I upload it and content file.
And find it doesn’t work.
After some head bashing I remember a simple rule – if you are going to use Server Side Includes, you MUST save the file with the extension ‘.shtml’ – note that ‘s’ in there. I rename the file, upload, and it works:
See how far we are? The end is close I can taste it.
A few things to fix up with the content though – the mad spacing between ‘the top bit’ and the included content. Earlier we set the space for the 3 content elements (top and bottom caps and the contentblock) to be 30 pixels. Thats 30 above, below and to each side.
However, what we now see is that the 30 pixels gap between ‘the top bit’ and ‘contentblock’ is actually 60 pixels – 30 from each. What I’ll do is simply tell the content block to have no padding above or below it:
.contentblock {
padding: 30px;
padding-top:0px;
padding-bottom:0px;
}
Also, the <h1> tag used in the content is quite large, so we can use css to define the size we want it to be. The H1 tag also adds it’s own padding and margins, so I’ll zero those too:
h1 {
font-size:1.8em;
padding: 0px;
margin: 0px;
}
Here’s the cool bit – using what I’ve already shown so far, we can redefine the H1 tag to be any size or colour. The H1 is a container, just like a div is, so we can use padding to indent it. We could give it a background colour or image. If we wanted, we could use the CSS so that everytime we used H1 it would indent the header text 20 pixels to the left, put in a background image of a 16×16 pixel pencil on a transparent background and tell it not to tile the background – in effect you end up with a customised header with an icon – but in the HTML all you need to use is a simple <h1>.
The Navigation
Finally!
Ok, the navigation on a website is the same on every page, unless you have extra local navigation. So instead of hard coding it into every page, we use an include to pull in a common navigation file. We could also have an additional local navigation file if we wanted, but we don’t need on for this.
Lets make a really basic file called navigation.inc, and we’ll store it in the includes folder:
<a href=”">Option1</a>
<a href=”">Option2</a>
<a href=”">Option3</a>
And then I’ll use a Server Side Include to pull it in:
<div id = “navigation”>
<!–#include virtual=”/tmh/includes/navigation.inc” –>
</div>
Which gives this:
At this stage I pause, for I will need to edit some graphics and consider the best way to table the navigation without using php – normally I use php to tell me what the active page was, then in the navigation I’d update it to say class = “active” to tell it to style the active tag differently.
I’ll tag each option on the menu bar as option1, option2 etc., and have a default style of an orange background that matches the site background. Also by default I’ll use CSS to define my rollover colour – if you put the pointer over a navigation item it will turn the background red, thus indicating that you are hovering (this visual feeback really helps). Finally I want the active tab to be a dark orange. To do this without CSS I’ll use a simple trick – override the default stylesheet with a local copy, much like I pull in a local content file. I don’t have to redefine the entire sheet, only the few lines that I want to change.
But before I do all this, I need to remove the background colour from the link buttons.