zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3x Divs nebeneinander = Hintergrundbild wird nicht angezeigt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.06.2011, 21:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.05.2011
Beiträge: 5
JackCimberly befindet sich auf einem aufstrebenden Ast
Frage 3x Divs nebeneinander = Hintergrundbild wird nicht angezeigt

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.06.2011, 11:32
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2011, 00:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.05.2011
Beiträge: 5
JackCimberly befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:16 Uhr.