CSS

 Tabbed Vertical Menu

For this tutorial we are going to make a box shape main with a vertical nav down the right hand size that changes when hovered in pure CSS. Doc type is required to centre in internet explorer

So to start type the following HTML for the main and wrapper

 and add the following CSS 

The first thing that we need to do is remove defaults margins and paddings and set the main font colour. Next the wrapper is created and we set a width of 602px and centre it using auto margins(doc type needed for ie). The wrapper is also pushed down by 50 pixels.

The main part we apply some dimensions and colour with a border to give it its shape and then set the font settings for the text we will have inside it later. Float it left because the menu will be placed next to it.Padding is added to push the content from the edge of the border.

Now to style the content inside the main with this

The h1 tag we use as our title and remove bold and add font, colour and size to it. The line class is just line that will separate the heading from the text. We set the margin to have a 90% width so its only 90% width of the main and set the height to 1px and set the colour of by using the background colour property. Margins are put it to make some space and for this to work properly in ie you will need a doc type.

Now for the menu and the end of the wrapper

and add the CSS

Lastly comes the menu that sits on the right hand side of the main and changes when we hover over each menu part. The menu div just wraps the list nicely and we use to position it next to the main by floating left and giving it a shape. The li tag is each list block and we apply colours, shape and font size. Margins are to separate each of them so they are not next to each other.