Horizontale Menüliste
CSS:
#menu li {
display: inline;
list-style-type: none;
}
Template zentriert mit 2 Spalten
HTML:
HEADER
Menue links
Inhalt
CSS:
body {
background-color: #404040;
padding:0;
margin:0;
}
#container {
width: 800px;
margin: 20px auto;
background-color: #c0c0c0;
margin-top: 20px;
}
#header {
background-color: #808080;
}
#content {
background-color: #ffffff;
margin: 0 0 0 200px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
#left {
float: left;
width: 200px;
}
#footer {
clear: left;
background-color:#808080;
}
3 Hintergrundbilder
Wenn man z.B. in der Mitte ein Logo haben möchte und rechts und links ein Teil des Bildes als Verlauf dargestellt werden soll.
HTML:
INHALT VON HEADER LOGO ETC.
CSS:
* {
border: 0 none;
margin: 0;
padding: 0;
}
.body1 {
background: url('links.jpg') repeat-x center top; /* linkes Bild wiederholend, z.B. 1px links vom mittleren Bild nehmen */
}
.body2 {
background: url('rechts.jpg') repeat-x center top; /* rechtes Bild wiederholend */
height: 241px;
position: absolute;
right: 0;
width: 50%;
}
.body3 {
background: url('mitte.jpg') no-repeat center top; /* mittleres Bild */
position: relative;
width: 246px;
height: 241px;
overflow: hidden;
margin: 0 auto;
}
