MaKo 4 CSS: CSS-P Tutorial: Positioning (3)

This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

Positioning the elements: Header and Footer

We are missing the Header and the Footer. Both are "flexible" positioned, since the browsers are not (yet) able to support the CSS declaration of "fixed positioning".

Well, we need something to look forward to...

The declarations for Header and the Footer classes are:

.Header {
    margin-top: 10px;
    margin-left: 160px;
    } 
.box {/*this is a box where the bottom-navigation*/
      /* and the copyright will be placed*/
  background: #FFFFFF;
  color : #000099;
  font-family : Arial, Tahoma, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  padding : 2px;
  margin: 2px;
  border-color : #48D1CC;
  border-style : groove;
  border-width : 2px;/* the border property in longhand*/
  }

Back to the Top

First the Header. In reality, this class is superfluous. We could take the graphic with the "CSS Issues" and simply plop it into the <div class="Inhalt">-area. A couple of <br>s, and we are done.

The reason why I have it in the stylesheet is that I've learned that this area is the one that gets changed quite often, and sometimes dramatically so. The client wants to add a tag line. The client wants the logo in white on a black background. The client wants the header bigger, or the tag line in red. "Could you show me the logo, well, differently?"

The easiest way to have it positioned and still have all the possibilities of changing almost everything is to have it in a class of it's own. I like to position the header on top of everything else in the code, directly after the </head> tag, but we could also take this class, change the margins and nest it in the Content class.

The Footer box will be nested in the main content area, but again, this is personal preference. If you put it outside the main content area, it will stretch over the whole window and obscure the background pattern that is used to put focus on the navigation. If you have another design or another layout this feature could be exactly what you need...

Back to the Top

We put both items in our document, simply insert the Header image into the Header section and the code should now look like this:

<body>

<div class="Header">HEADER with image
<img src="images/CSS-2.gif" width="277" height="38" alt="CSS Issues">
</div>

<div class="Navigation"> NAVIGATION
ABCDE
</div>

<div class="Inhalt">CONTENT, with the nested FOOTER box
Some text here, like: With this tutorial I'll show 
you how easy this is, and I'll provide you with the CSS stylesheet 
and the graphics. Some CSS vs. NN 4.xx issues are already addressed 
at CSS Issues.
<br>

<div class="box">FOOTER BOX
This will be the secondary navigation
</div>closing tag for the FOOTER BOX

</div>closing tag for the CONTENT BOX
</body>

Back to the Top

The reason why I called it "box" and not "Footer" is very simple: I plan to re-use it, or at least I want the option to recycle it if need be. I could use the same box to

have a visual break in the page, and stress certain issues where I could play around with whatever I want to...

and the effort to do so is negligible. Simply put in <div class="box">. The other possibility could be to copy this class, change the border to red and double, the font-size to 16px and call it box2 - then you have an "Alert!" box.

Important: If you plan on using a <div class> within the text, take care not to declare any width. NN 4.xx will lose any styles after such a <div> (take a look at Tips & Tricks).

Now that we've prepared the ground, we can draw those little boxes that separates the navigational items. The boxes are not necessary, you could go ahead and start with the fonts and links.

Back to the Top

.navbox {/*button-like box for the left-side navigation*/
   font-size: 15px;/*readability for the links*/
   font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   background-color: #003399;
   border-color: #FF6633;/*or, in shorthand, the three*/
   border-style: groove; /*border-properties would read:*/
   border-width: 2px;/*border: 2px groove #FF6633;*/
   padding: 1px;
   margin: 2px;
   }

In the document, you implement those boxes like:

<div class="Navigation">
<div class="navbox"><a class="nav" href="Link1.htm">Link 1</a></div>
<div class="navbox"><a class="nav" href="Link2.htm">Link 2</a></div>
<div class="navbox"><a class="nav" href="Link3.htm">Link 3</a></div>
</div>

See an example (with the styles in the <head> section).

Wait a minute - we already have the navigation-boxes for the links, but to implement them we have to think about the Fonts and Links.