What I am still learning about the web

In this tutorial I am going to show the basics of using CSS to create easily manipulated navigation. In a further post to be created later I will demonstrate drop down, pop out functionality using CSS. Before we try to implement the advanced drop down, pop out functionality, I need to show you the basics.

The XHTML

There are many ways to layout your navigation with XHTML, but I prefer the simple approach, utilising the ul and li tags. An example of this type of navigation can be found below. I have not placed any CSS within the first step so we can step through and view the changes.

<ul>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul>

If we display this code in a browser you will see four links listed with bullet points vertically.

Adding the CSS

CSS needs to be able to associate it’s styles with your XHTML code. To do this we use a selector, this is the element you are wanting to add styles to. In this tutorial you are going to be introduced to three of the available selectors. The attribute selector, the ID selector and the class selector.

The Attribute Selector

The attribute selector is the simplest form of selection available within CSS, for example if we wanted to select and transform the colour of the text within every occurrence of the li tag to black in a given document. We would simply place the following code within our CSS:

li {
color:#000;
}

This is relatively simple and the colour shown here is in Hex format, hex is a six digit representation for colour, in this case being as each second character is the same as the first we can use a short hand version of the hex for example:

#000000  black can be shortened to #000

#FFFFFF white can be shortened to #FFF

The attribute selector is the very basics of CSS.

The ID Selector

If we take our example unordered list above we are going to utilise an ID selector here by simply adding the following to the ul element:

<ul id=”nav”>

We have opened up the ul element to be uniquely identified within our style-sheet and document. The ID selector should be used sparingly within a document. To demonstrate using the ID selector within your CSS code I have set a height of 56px like so:

#nav {
height:56px;
}

As you can see from above the ID selector is accessed using the # symbol.

The Class Selector

this selector is designed for reuse for instance in our code we have  an li tag that has a class of last defined like so:

<li class=”last”><a href=”#”>Link</a></li>

we can now declare the rules for this class in our css like so:

#nav li.last {
border-right:solid #000 1px;
}

you can see that I am combining selectors here an ID selector with a Class selector, this is not required but I have done this to demonstrate two points, the first being that of Specificity, this is the internal scoring system used within CSS to determine which rules to use for a given element. for more on Specificity look at the W3C’s candidate recommendation 6.4.3 Calculating a selector’s specificity. and the second being that you can use the parent child relationship to increase specificity and isolate elements you wish to have unique styles. In our example any li with a class of last will only be affected if they have an ancestor with with an id of nav.

Styling the Example

We need to make our list items line up so in line, at this point most people would use the display:inline attribute as this will take the list items and line them up horizontally along the page. My problem with this method is that there is an inherent margin which means we cant get them lined up next to each other. To remedy this I use float left, this has the same effect as display:inline but without the margin. as you can see from the following navigation example.
Now we have taken away the gap, placed a grey background on the links, also we have a border and made the font white.

Developer Tools

great way to view CSS and other style related features is through two Firefox plug-ins I would highly recommend, the first is the Web Developer tool, and the second is Firebug. If you do not have these add-on’s then you can get the CSS from the file here by viewing the source navigation example.

This relatively short post should give you an insight into image replacement. Image replacement is the technique of taking some text usually a logo and replacing it with an image.

XHTML Code

this code can be done with relatively little XHTML code, a good example would be a logo for a company.

<h1 class="thelogo">Company logo</h1>

As you can see all I have done is a simple H1 tag and added a class of thelogo. this can now be referenced via our CSS.

CSS code

In the CSS we need to do several things firstly set the image as the background for H1.

.thelogo { background-image:url('logo.gif'); }
if you refresh the page within a browser you will now see the image in the background with the text Company Logo in the forefront. We can now use the text-indent attribute to remove the text like below:

.thelogo { background-image:url('logo.gif'); text-indent:-9999px;}

Now when you refresh your browser the image will remain but the text will have been pushed far off to the left as to not be visible.

This post will help you create a three column site containing a header, navigation, three columns and a footer. The design you are about to use is a basic layout for  a simple  site. I have used pixels for the dimensions. This is not my preferred method as I use em which is relative to the font size, and in my opinion much better. However,  you will need a clear understanding of the basics before attempting to make your sites dimensions relative to the font size.

DTD declaration

This declaration is very important, without it not only will your page fail validation but if you choose to add CSS 2 functionality into your layout it may not work. Now we need to consider the differences between browsers and how they interpret CSS.

CSS Code

To start with each browser has its own style-sheet that it loads on elements that do not have styles defined. These styles can be overridden by our style-sheet. As a point of reference users can have their own style-sheet that overrides our styles but this is rare and usually used mainly by users with disabilities.

The CSS starts with a declaration of * that sets the margin and padding to ‘0′ for all elements that do not have margin or padding defined. I like to do this to set a level playing field for all elements across all browsers.

The next two lines are used to centre the site across browsers. Internet Explorer and Firefox have a difference of opinion when it comes to dealing with the text-align attribute. when defined as text-align:center, Internet Explorer places all content in the center, where as Firefox places just the text elements centrally. You can see from the example that we have set the body tag to have its text aligned to the centre. On the next line we have defined a class called wrapper which we will use as a container. Within wrapper their are three very important attributes to make this technique work, firstly width. A fixed width must be defined, in this case I have chosen 1024px. next margin:0 auto; this clamps the container to the top and center of the browser within Firefox. The third is to correct our text setting, to do this we set text-align:left; now all content within the wrapper will be left aligned. so treated as normal.

The Header & Nav

Here is where the calculations start but don’t panic they are not that hard really. We have to take into account width and height, I have purposefully set them within the container to 1024 by 600. You will notice I have not set a width for the  Navigation div, this is to demonstrate that CSS will make any element without fixed dimensions fill it’s container automatically. I have however used height in the Header and Navigation which I have set to heights of 50px and 25px respectively. We now have to take these off the 600px so we are left with 525px left to play with.

Nav Links

With the links I have just removed the bullet point styling and displayed them inline. I then gave them a padding of 20px this spaces the links adequately. But it pushes out the first link too far, to combat this I have given the first link a class of first and removed the padding to the left, this pulls the links back to the left and inline with the rest of the design.

The Footer

It may sound weird to be adding the footer at this stage before the content but it really doesn’t matter, it makes sense to me because i like to know how much space I have to play around with for my content. This is the easiest code of all, we are going to set the height of the Footer to 50px, and then add a clear:both; setting. The clear:both; is because we are going to be floating the columns that hold our content so in order to make sure our Footer does not disappear beneath those columns we clear:both;

The Columns

All that remains is for us to create the three columns. I have given the three divs used to create the columns classes of left, middle and right. I now float all three columns to the left, setting their heights to the remainder of our height calculation 475px and the overall width is divided up evenly between them. left & right having 250px each and middle having the remaining 524px. Below you can find a link to a very colourful example of the finished product of this tutorial. hope it helped.

3 column Example