Der Navigationsbereich wird im CSS-Teil folgendermaßen definiert:
#menufest {
position:absolute;
top:25px;
left:10px;
width:150px;
z-index:10;
color:#556677;
border:2px outset #F9E677;
padding:10px
}
Im HTML-Teil steht dann
<div id="menufest"> <p>Navigation<br> <a target="_self" title="Startseite dieses Designs" href="background_bs1.html">Start</a><br> <a target="_self" title="Hinweise zur Bildauswahl" href="das_bild.html">Mehr zum Bild</a><br> ... </div>
Die Farben des Textes und der Links wurden entsprechend dem Farbcharakter des Hintergrundbildes folgendermaßen angepasst:
#menufest p{
text-decoration: none;
color: #FBED9F;
font-weight: bold;
font-size:14px}
#menufest a{
text-decoration: none;
color: #C0C0C0;
font-weight: bold}
#menufest a:hover{
text-decoration: none;
color: #F3F3F3;
font-weight: bold }
...muss auch mal sein
Weiter geht es mit dem...
Der Inhaltsbereich wird im CSS-Teil wie folgt defniert:
#inhalt {
padding-left:200px; padding-right:15%; padding-top:5px; padding-bottom:20px
}
Bei der Positionierung des Inhaltsbereiches ist vor allem der linke Abstand zu beachten. Wenn der Menübereich 150px breit ist und noch Abstände dazukommen, dann ist links=200px sinnvoll. Für den rechten Abstand wurde eine prozentuale Größe gewählt. Das hat den Vorteil, dass sich die Größe des rechten Randes an die Bildschirmgröße anpasst. Bei einer festen Größe, z.B. 250px wird lediglich der eigentliche Inhalt angepasst.