Integrated CA - Site elements

All browsers apply default styling to tags. for example a ul > has some margin left. I used a CSS reset to over ride these. Essentially I was starting with a blank canvas.

Some the elements I designed Appear on all the pages. These are the Header/ Nav and the Footer.

Header/ Nav

I feel that sites try to reinvent the wheel when it comes to the navigation and forget the basics. One of the major things for me is to keep it consistent and easy to use. Some times the Nav changes on a site  and the user gets confused.

I kept mine as simple as you can with just typography and colours as my Nav. I evenly positioned the words out to keep it clean. I styled the a:hoover with a dark grey. On my CSS3 version I added a transition of 1s, which fades it from light grey to dark grey over 1 second.

I also created an active class so the user knows what page they are on. The class is a top border with the orange from my swatch. I added some padding to align it with the top of my logo. I also used nth-child(1) to apply some styling to the first child of the parent in this case the first li of the ul. This is CSS3

Footer

For the footer I want to create some that I have seen on a few websites that I like but put my own twist on it. This is the ribbon. I thought of how I would create it and at first thought of using images I sliced from the PSD but I wanted to try it using CSS. I'm a firm believer in that if it can be done in CSS it should be to keep the HTTP request down. My first attempt was using three divs. Two positioned at the bottom to give it the effect of the curl.

In a new book I got on HTML and CSS it discussed the pseudo elements before and after. Pseudo is greek for "Lying". In simple terms these are like a div but the do not appear in the HTML. They apply what ever is applied to before and after the div. See my code below


.footer {
position: relative;    //need to position the curls
left: -30px;
width: 1040px;
height: 150px;
background-color: #013440;
}

.footer:before,.footer:after {
position: absolute; // set the position of the curls absolutely to the div
border-width: 0;
border-style: solid;
border-color: #01242c;
border-top-width: 20px; // creates a triangle too the colour above.
        content: '';
}

.footer:before {
bottom: -20px;  
left: 0;
border-left: 30px solid transparent; // another triangle but this time transparent
}

.footer:after {
right: 0;
bottom: -20px;
border-right: 30px solid transparent;
}

This is my first time using the Pseudo elements before and after and I found them extremely useful for keeping my HTML clean and easy to understand. I also use them to style my block quotes.