Hi CSS-Gemeinde.
Aus den FAQ bin ich auch nicht schlau geworden.
Ich habe drei DIVs nebeneinander.
Alle drei haben jeweils ein Hintergrundbild, dieses wiederholt werden soll.
DIV 'col_left2' - hier wird das Hintergrundbild angezeigt (mit Inhalt).
Die anderen DIVs 'col_main2' und 'col_right2' nicht (leerer Inhalt).
HTML-Code:
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
}
body {
height: 100%;
}
.pic_navi {
border: 0px;
padding-left: 1px;
}
#page {
width: 1000px;
height: 214px;
text-align: left;
margin: 0 auto;
}
#header {
position: relative;
height: 214px;
width: 1000px;
display: block;
overflow: auto;
background-image: url('../images/bhar_01.gif');
background-repeat: no-repeat;
background-position: top;
}
#col_left1 {
width: 209px;
height: 97px;
float: left;
position: relative;
background-image: url('../images/bhar_02.gif');
background-repeat: no-repeat;
background-position: top;
}
#cols2x_1 {
width: 791px;
float: right;
position: relative;
}
#col_right1 {
width: 99px;
height: 97px;
float: right;
position: relative;
background-image: url('../images/bhar_04.gif');
background-repeat: no-repeat;
background-position: top;
}
#col_main1 {
width: 692px;
height: 97px;
float: left;
position: relative;
background-image: url('../images/bhar_03.gif');
background-repeat: no-repeat;
background-position: top;
}
/* Content */
#wrapper2:after {
/* this is for NN6 to clear floats */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#col_left2 {
width: 209px;
float: left;
position: relative;
background: url(../images/bhar_05.gif) repeat-y 100%;
}
#cols2x_2 {
width: 791px;
float: right;
position: relative;
}
#col_right2 {
width: 99px;
float: right;
position: relative;
background: url(../images/bhar_07.gif) repeat-y 100%;
}
#col_main2 {
width: 692px;
float: left;
position: relative;
background: url(../images/bhar_06.gif) repeat-y 100%;
}
/* Footer */
#footer {
width: 1000px;
height: 28px;
clear: both;
display: block;
overflow: auto;
background: url(../images/bhar_08.gif) no-repeat;
}
/* Clearfix */
.clearer
{
clear: both;
display: block;
height: 1px;
margin-bottom: -1px;
font-size: 1px;
line-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}</style>
HTML-Code:
<div id="page">
<div id="header"></div>
<div id="wrapper1">
<div id="cols2x_1">
<div id="col_main1"></div>
<div id="col_right1"></div>
</div>
<div id="col_left1"></div>
</div>
<div id="wrapper2">
<div id="cols2x_2">
<div id="col_main2"></div>
<div id="col_right2"></div>
</div>
<div id="col_left2"><img src="images/startseite.gif" alt="Startseite" title="Startseite" width="207" height="33" class="pic_navi" /><br /><img src="images/buchhaltung.gif" alt="Buchhaltung" title="Buchhaltung" width="207" height="33" class="pic_navi" /><br /><img src="images/lohn-gehaltsabrechnung.gif" alt="Lohn- & Gehaltsabrechnung" title="Lohn- & Gehaltsabrechnung" width="207" height="33" class="pic_navi" /><br /><img src="images/bueroorganisation.gif" alt="Büroorganisation" title="Büroorganisation" width="207" height="33" class="pic_navi" /><br /><img src="images/uebermich.gif" alt="Über mich" title="Über mich" width="207" height="33" class="pic_navi" /><br /><img src="images/kontakt.gif" alt="Kontakt" title="Kontakt" width="207" height="33" class="pic_navi" /><br /><img src="images/impressum.gif" alt="Impressum" title="Impressum" width="207" height="33" class="pic_navi" /></div>
</div>
<div id="footer"></div>
</div>
Wie ich die 'clearfix' einbinde => keine Ahnung. Besser gesagt, werde aus den vielen Webseiten nicht schlau.
Was stimmt da nicht?
Wäre euch dankbar, wenn mir jemand helfen kann.
Danke.