Aufbau des Designs

Seitenaufteilung

Obwohl das Design auf den ersten Blick durch die feststehenden Bereiche den Eindruck eines Frame-Designs erweckt, werden ausschließlich <div>-Layer verwendet, die teilweise mit Grafiken hinterlegt sind. Die meisten der <div>-layer sind absolut positioniert. In einigen Fällen wird die Transparenz der Grafiken noch durch eine teilweise Transparenz der Layer ergänzt. Die Einzelheiten des Layeraufbaus sind dem kommentierten Quellcode zu entnehmen.

Verwendete Grafiken

Die Verweise für vier in diesem Design verwendeten Grafiken werden ausschließlich in der CSS-Datei festgelegt. Bei der Erstellung eigener Grafiken muss darauf geachtet werden, dass

• ausschließlich gif-Dateien mit entsprechenden transparenten Bereichen verwendet werden.
• die Abmessungen der Grafiken möglichst genau den Abmessungen des Musterdesigns entsprechen.

Folgende Grafiken werden verwendet:

• Grafik halbrechts mitte spongebobpseudo01body03.gif: 284 x301 Pixel; body
• Grafik aus dem Menü herausragend spongebobpseudo01hand01c.gif: 104 x87 Pixel; HTML; <div id="hand"><img src=; Größenangabe wie Grafikdatei
• spongebobpseudo01kopf02b.gif 327 x 252 Pixel; HTML; <div id="face"><img src=; Größenangabe wie Grafikdatei
• spongebobpseudo01linkhover.gif: 18 x 23 Pixel; #menu a:hover

 

Wichtige CSS-Teile

Abstand des Haupttextes

/*Hier wird der Abstand des Haupttextes definiert*/
#pad {
display:block; 
//height:200px;
height:230px;
}

Menüblock

/*Definition des Menüblocks Position, Größe*/
#menu {
position:fixed; 
display:block; 
//top:160px; 
//left:20px; 
top:140px; 
left:15px; 
width:130px; 
height:400px; 
background-color:transparent; 
z-index:20;
}
* html #menu {
position:absolute;
}