Grafische Rahmen mit background-image
Olaf Bosch am 04.02.2003 – Keine Kommentare
Um eine Seite wird ein Rahmen mittels Einbindung von Hintergrundbildern erstellt. Alles ist absolut positioniert. Bei Bedarf wird zum Inhalts- und Menübereich ein Scrollbalken hinzugefügt.
Das wichtigste aus der rahmen.css:
body {
background: #036;
color: #FF9;
font: 101% tahoma, arial, verdana, helvetica, sans-serif;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#inhalt {
background: transparent;
color: #FF9;
font: 95%/20px tahoma, arial, verdana, helvetica, sans-serif;
height: 74%;
left: 210px;
margin: 0;
overflow: auto;
padding: 0;
position: absolute;
top: 65px;
width: 67%;
z-index: 4;
}
#menu {
background: transparent;
color: #903;
height: 65%;
left: 35px;
margin: 0;
overflow: auto;
padding: 0;
position: absolute;
top: 80px;
width: 140px;
z-index: 4;
}
#oben {
background: url(/2003/02/04/grafische-rahmen-mit-background-image/bilder/oben.jpg);
color: #000;
height: 60px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
#reoben {
background: url(/2003/02/04/grafische-rahmen-mit-background-image/bilder/rechtsoben.jpg);
height: 60px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 60px;
z-index: 2;
}Nur ein Ausschnitt, vollständig im Download) Getestet mit IE6, NN7, Opera7 und Mozilla1.0.2. auf Win2000pro Für Fragen und Anregungen stehe ich selbstverständlich zur Verfügung: Olaf Bosch
Hier habe ich dieses Beispiel umgesetzt: www.olaf-bosch.de
