Oct
08
2011

CSS Header Tutorial

Last week I did a walk through of the layout html and classes for this layout, this week I wanted to point out some tricks used on the header and navigation. Including use of text shadows, absolute positioning within a relative div, @font-face, and linking together multiple classes to one declaration.  To view the layout the tutorial was written about CLICK HERE.

The HTML:

<div id="cross">
    <div id="expiation-header"><a href="/"> ex piation.org</a></div> 
        <div id="nav">
            <span class="poetry"><a href="/index.php?x=poetry"> poetry </a></span>.
            <span class="blog blogactive</span><a href="/blog"> blog</a>.
            <span class="graphic"><a href="/index.php?x=graphic"> graphic </a></span>.
            <span class="etc"><a href="/index.php?x=etc"> etc </a></span>
        </div>
</div>

The HTML is fairly straight forward #cross contains the header and navigation and also displays the sideways cross (logo for this site). The #expiation-header is actually just a link to the front page. #nav contains the links for all sections of the site. Each section is contained within a span, span is an inline element, not a block element so no new spacing is introduced. Each span has it’s own class named after the link. The page that is currently active has a second class declared to alter the way the current section appears. In this case the active section is blog so the class declaration for the span is “blog blogactive”. The generation of the second classes is done via PHP, and there is sample PHP and links to related tutorials at the end of this article.

@font-face {
    font-family: "Annifont";
    src: url(/font/annifont.eot);
    src: local("Annifont"), url(/fonts/annifont.ttf) format("truetype");
}

The tutorial I used to begin implementing @fontface is linked at the end of this tutorial.

Primary IDs:

#cross {
    position: relative;
    margin: 0px;
    background-image: url('/images/layout/fall-redcross.png');
    background-repeat: no-repeat;
    width:500px;
    height: 200px;
}

#expiation-header {
    position:absolute;
    top:32px;
    left:38px;
    width:395px;
    height: 81px;
    font-family: 'Annifont', 'Lucida Handwriting', cursive;
    font-size: 40px;
    color: #EFEFEF;
    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
}

#nav {
    position:absolute;
    top:101px;
    left:126px;
    margin-right: 0px;
    width: 340px;
    height: 38px;
    font-family: 'Annifont', 'Lucida Handwriting', cursive;
    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
    font-size: 20px;
    color: #EFEFEF;
}

#cross sets up the sideways cross as a background and sets the size of the box. The key to this set of classes is that #cross is set to “position:relative”, while #nav and #expiation-header are set to “position:absolute”. Absolute positioning is possible within a relative div. The absolute positioning counts 0 0 as 0 0 of the area of the container div with relative positioning. This allows all elements to appear inline.

Link Definition Classes:

#nav a, #cross a {
    color: #EFEFEF;
}

This declaration sets the link color for all links in the header section, the link color does not need to be defined again.

div#expiation-header a:hover {
    background-image: url('/images/layout/fall-link-bg_header.png');
    background-repeat: no-repeat;
    background-position: center center;
}

span.blog a:hover, span.blogactive {
    background-image: url('/images/layout/fall-link-bg_02.png');
    background-repeat: no-repeat;
    background-position: center center;
}

Combining the background declarations for the link hover and the active class means the background only needs to be defined once. These classes follow the span tags for each other the sections. The active declaration is inserted based on a php script that tests for the active section.

Only the background declaration for the “blog” section is shown here, the ones for the other sections are identical except for the defined background image.

span.poetryactive a:hover,span.blogactive a:hover,span.graphicactive a:hover,span.etcactive a:hover {
    background-image: none !important;
}

span.poetryactive a, span.blogactive a, span.graphicactive a, span.etcactive a {
    text-shadow: 0 0 0.2em #FFFFFF, 0 0 0.2em #FFFFFF, 0 0 0.2em #FFFFFF, 0 0 0.2em #FFFFFF;
    color: #000000 !important;
}

The first declaration sets that when the active class is present there should be no background on hover, the !important tag overrides previous declarations.

The second declaration sets the link color and text shadow for the active section. Once again !important is used to override the previous link color and text shadow declarations.

The result is that on hover all of the section links have a unique background, and that on active the background stays behind the link and the text color and text shadow are inverted. Combining classes saves a lot of space.

Sample PHP:
This is the PHP I use, I do not use word press pages so the test is based on my own variables, however, WordPress Conditional Tags covers the functions that would be used in a site that is completely wordpress powered. The functions are easy to use.

<span class="poetrypoetryactive"; } ?>">
    <a href="/<? echo $home_file; ?>?x=poetry">&poetry&nbsp;</a>
</span>

The bolded text is the test that inserts the active class.  Below is a sample of a test for a wordpress page:

<? if(is_page('poetry')) { echo ” poetryactive”; } ?>

Related Links

One thought on “CSS Header Tutorial”

  1. Pingback: Expiation > Blog > Layout Love = Elegant CSS

Leave a Reply

Your email address will not be published. Required fields are marked *


*

CommentLuv badge