3x Divs nebeneinander = Hintergrundbild wird nicht angezeigt

JackCimberly · #1 (**permalink**) 15.06.2011, 20:57

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- &amp; Gehaltsabrechnung" title="Lohn- &amp; 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.

K.Roland · #2 (**permalink**) 16.06.2011, 10:32

Zitat:

von JackCimberly
DIV 'col_left2' - hier wird das Hintergrundbild angezeigt (mit Inhalt).
Die anderen DIVs 'col_main2' und 'col_right2' nicht (leerer Inhalt).

Leerer Div zeigt Halt keine Grafiken an.

Wieso hasten soviel position relative?

- height würde ich mal rausnehmen bei #page

Gruß, Roland

JackCimberly · #3 (**permalink**) 21.06.2011, 23:26

Hi Roland.

Komme leider erst dazu, zu antworten.
Ich habe das die Tagen umgeschrieben.

Klappt soweit.
Nur mit einer festen Höhe (px) wird mir das Hintergrundbild angezeigt.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIVs erscheinen im IE nicht nebeneinander	prinzipal	CSS	4	15.12.2010 15:11
Divs nebeneinander...	Sengi	CSS	4	23.05.2009 08:23
divs fließend nebeneinander, der letzte bis zum seitenrand	deelite	CSS	2	17.03.2009 21:04
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32
geschachtelte Divs Background wird nicht angezeigt	Cojote	CSS	2	23.03.2006 12:09