3 leere <div>'s mit Hintergrundbild horizontal anordnen?

[eon]

Hallo an alle!

Ich mache gerade meine ersten Experimente mit 3 Hintergrundbildern, die zusammen ein ganzes Bild ergeben. Ich habe drei leere <div>'s mit jeweils einem Hintergrundbild versehen.

Diese drei <div>'s (oder genauer die drei Hintergrundbilder) möchte ich nun horizontal hintereinander anordnen - weiß aber nicht wie.

Wie mache ich das am besten (ohne Tabellen)?

Mein CSS-Code:

#eins  
{  
	background-image:url(../image/eins.gif);  
	background-repeat:no-repeat;  
	height:100p;  
	width:200px;  
}  
  
#zwei  
{  
	background-image:url(../image/zwei.gif);  
	background-repeat:repeat-x;  
	height:100;  
	width:50px;  
}  
  
#drei  
{  
	background-image:url(../image/drei.gif);  
	background-repeat:no-repeat;  
	height:100;  
	width:200px;  
}

[Steel]

Hi!

Du koenntest z.B. float versuchen.

[eon]

Wenn ich im ersten <div> ein float:left; setzte, fallen alle drei Hintergrundbilder (bei mir) zusammen auf eine Anfangsposition (rücken alle nach ganz links).

[ChrisB]

Hi,

Wenn ich im ersten <div> ein float:left; setzte, fallen alle drei Hintergrundbilder (bei mir) zusammen auf eine Anfangsposition (rücken alle nach ganz links).

Dann machst du wohl irgendetwas falsch ... </hilfe/charta.htm#tipps-fuer-fragende>

(Die Fehler im eingangs gezeigten CSS hast du ja hoffentlich inzwischen korrigiert.)

MfG ChrisB

[eon]

Mit folgender Erweiterung klappt es für die ersten zwei Hintergrundbilder wunderbar. Hintergrundbild (<div>) Nummer drei rückt leider immer noch in die nächste Zeile:

#eins:  
float:left;  
  
#zwei:  
margin-left: 200px;  
  
#drei:  
margin-left: 250px;

[ChrisB]

Hi,

Mit folgender Erweiterung klappt es für die ersten zwei Hintergrundbilder wunderbar. Hintergrundbild (<div>) Nummer drei rückt leider immer noch in die nächste Zeile

Das ist klar, denn das DIV-Element ist ja immer noch ein block-Element.
Das kannst du bspw. ändern, in dem du es ebenfalls floatest.

MfG ChrisB

[eon]

Das ist klar, denn das DIV-Element ist ja immer noch ein block-Element.
Das kannst du bspw. ändern, in dem du es ebenfalls floatest.

(Anmerkung: HB = Hintergrundbild)
Das habe ich gemacht. Im Firefox entsteht dadurch ein vertikaler Spalt ohne HB (offenbar in der Größe von HB 3) zwischen HB 1 und HG 3.

[eon]

Korrektur meines letzten Postings:
Kein vertikaler, sondern ein horizontaler Spalt entsteht.

[ChrisB]

Hi,

(Anmerkung: HB = Hintergrundbild)
Das habe ich gemacht. Im Firefox entsteht dadurch ein vertikaler Spalt ohne HB (offenbar in der Größe von HB 3) zwischen HB 1 und HG 3.

Sprich bitte mal weniger in Buchstabenkürzeln, und berücksichtige stattdessen endlich die Tipps für Fragende.

MfG ChrisB

[eon]

Also ich bin raus aus der Diskussion

[eon]

Hier die Lösung (sehr schön klar, kurz und anhand eines Beispiels wunderbar verständlich auf den Punkt gebracht):

Lösung

[ChrisB]

Hi,

Hier die Lösung (sehr schön klar, kurz und anhand eines Beispiels wunderbar verständlich auf den Punkt gebracht):

Lösung

Na das hättest du hier auch haben können ... http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig

MfG ChrisB

[MudGuard]

Hi,

Ich mache gerade meine ersten Experimente mit 3 Hintergrundbildern, die zusammen ein ganzes Bild ergeben.

Dann mach 1 Bild daraus. Und gib das am besten einem sowieso schon vorhandenen Element mit, statt das Dokument sinnlos mit leeren div-Elementen zuzumüllen.

cu,
Andreas