Susanne's version of PRETTY IN PINK

skip to content, skip to navigation

The Power of CSS

When I started with webdesign, I had no idea about CSS. However, the more I learned about layouts, webstandards amd the possibilities of CSS, the more I got fascinated.

This layout-template is just for fun, playing with the motive of paeonies and pink, a girl's page. It is pure CSS and aiming at fullfilling the standards published by the Web Accessibility Initiative of the Worldwide Web Consortium.

If you enjoy it, too; feel free to use my template and and change the design according to your wishes. However, please do credit me.

This page is written in XHTML 1.0 strict end UTF-8 encoded. I have used structural mark-up; devided the page into sections using the <div> block element and postiong the header and the navigation. The same structure is used for the astrology page listed i my examples.

The navigation bar includes a list style image. I created the lbig and the small paeonies with Photoshop. The design works down to a resolution of 800 x 600. Enjoy.

<body>

<div id="kopfzeile">
<h1>...</h1> ...
 <p class="unsichtbar">....</p><!-- invisible links for screen readers: skip to content -->>
 </div>

<div id="navigation">
 <h2><a id="navi" name="navi"></a>Navigation</h2>
 <ul title="navigation">
 <li> ...<!-- include new ul for nested list before the end tag of li--> 
<ul> <li class="aktiv"><dfn>2.1 </dfn>Pink dreams</li>
 </ul> 
</li>
 <li> ...</li>
 </ul>
 </div>

<div id="container"><!-- Wrapper -->

<div id="inhalt">
 <h2><a id="content" name="content">...</h2> 
<p>....</p>
 </div>

</div>

</body>

For those who are interested, here comes the relevant CSS:

CSS Stylesheet for positioning header, navigation and content
Element Declaration Why MSIE
* 
{
margin: 0;
padding: 0
}
 These declarations overwrite browser default settings. Internet Explorer needs separate definitions.
body 
{
color: #fff;
font: 100.01% Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
background: #ff1493 none;
}
 Font-family, font-size and font-color for the whole page. * html body 
{
width: 100%;
height: 100%;
overflow: hidden
}
#kopfzeile 
{
color: inherit;
 background: #ff1493 url("file:paeonie-1.gif") repeat-x;
margin-right: 16px;
position: fixed;
z-index: 3;
top: 0; right: 0; left: 0;
width: 100%;
height: 180px
}
 Container for header * html body #kopfzeile/ 
{
position: absolute
}
h1 
{
font-size: 150%;
font-weight: bold;
text-align: center;
margin-top: 70 px;
}
 Center horizontally and vertically
#navigation 
{
color: #fff;
background: #ff1493 none;
position: fixed;
 top: 200px;
 left: 0;
 width: 200px
}
 Absolute positioning for site navigation * html body #navigation 
{
position: absolute
}
#container This container wraps the scroll area. * html body #container 
{
width: 100%;
height: 100%;
overflow: auto 
}
#inhalt 
{
color: #fff;
background: transparent none;
margin-top: 180px;
margin-left: 200px
padding 2%
}
 To help avoid conflicts with user style sheets, background-imageshould be specified whenever background-coloris used. In most cases, background-image: none is suitable according to WDG.
.unsichtbar, dfn 
{
display: inline;
position: absolute;
top: -1000px;
left: -1000px;
width: 0;
height: 0;
overflow: hidden
}
 This is for the invisible links and <dfn> necessary for internet users who use screen readers. My invisible links are skip to content and skip to navigation. according to standard they are the first links in the document.
Validtation results Valid XHTML 1.0 Strict Valid CSS!      go back to top
Credits Thanks to Dennis Riehle for the idea Thanks to rene.e.e.hirt for demonstrating the correct wrapping of containers.  © hugodesign, 2007