[Erledigt] 3 Bilder nebeneinander

pfump · 08.05.2010, 11:09

Hallo,

folgendes Problem. Ich habe ein Div. Darin sollen 3 Bilder sein.
1 links 1 mittig und 1 rechts.
Diese sollen immer da bleiben. Also links am Rand, mittig und rechts am Rand.
Ich hab mir das folgendermaßen gedacht:

Html-Code:

Code:

<div class="header">
   <img src="header_links.gif" style="float:left;" />
   <img src="header_mitte.gif" />    
   <img src="header_rechts.gif" style="float:right;" />
</div>

Dem Div habe ich ein text-align:center gegeben (für Bild in der Mitte)

Das funktioniert ja auch soweit. Aber leider nur im IE8 und FF.
Im IE7 ist das Bild in der Mitte nicht mittig und das rechte Bild ist in der nächsten Zeile.

Kann mir einer sagen wie ich das im IE7 hinbekomme?

Destruction · 08.05.2010, 12:16

<div class="header">
<img src="header_links.gif" style="float:left;" />
<img src="header_mitte.gif" style="float:left;margin-left:150px" />
<img src="header_rechts.gif" style="float:right;" />
</div>
Würde versuchen das so zu positionieren

hehe94 · 08.05.2010, 12:22

Pack doch die Bilder in eine extra DIV und mach dann bei der float.

pfump · 08.05.2010, 14:04

@Destruction:
Das ist ne Möglichkeit. Jedoch ist das etwas schwierig. Das Div kann
nämlich dynamisch vergrößert werden. Somit wäre das mittlere Bild
dann nicht mehr in der Mitte.

@hehe94:
Du meinst also ich soll 3 Divs anlegen, mit background-image?

nikosch · 08.05.2010, 14:28

Zitat:

Das Div kann
nämlich dynamisch vergrößert werden.

Dann ist der Begriff "Mitte" sowieso nicht mehr definiert. Oder werden immer alle vergrößert? Dann musst Du eben den margin anpassen. Wie das Wort text-align schon sagt, bezieht es sich auf Text in Blockelementen.

Du kannst auch mal margin-left:33% probieren.

pfump · 08.05.2010, 14:37

Das komplette div wird vergrößert.
So wie es jetzt ist funktioniert das ja auch.
Und mit text-align:center im Style des Div, ist das mittlere Bild immer in der Mitte.

Nur im IE7 halt nicht.
Da ist das rechte Bild ist zwar rechts, aber leider in ner neuen Zeile.
Und das mittlere Bild ist nicht in der Mitte.

pfump · 08.05.2010, 16:37

Also ich habs jetzt mit float:left und margin-left hinbekommen.
War zwar ganz schönes Gefriemel das mit Prozentangaben richtig
hinzukriegen, aber hauptsache es geht

Danke für eure Hilfe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] CSS: Elemente nebeneinander anordnen		HTML, Usability und Barrierefreiheit	21	29.08.2011 08:05
Bilder aus Spalten in Zeilen anzeigen	Typ15	PHP Tipps 2010	5	31.03.2010 21:46
[Erledigt] Geänderte Bilder neu resizen	smilla	PHP Tipps 2010	3	06.03.2010 19:13
[Erledigt] Wie kann man Bilder sinnvoll verkleinern?	Squall	PHP Tipps 2009	7	17.06.2009 15:55
Bilder ohne DB sicher speichern	Diet	PHP Tipps 2005	6	25.03.2009 00:07
Entscheidung für Bilder	maclaim1988	PHP Tipps 2009	2	07.02.2009 18:50
[Erledigt] Bilder weren ncht aktualisiert	pfump	PHP Tipps 2008	26	25.08.2008 19:09
[Erledigt] Galerie - Bilder nebeneinander Problem	noOx	PHP Tipps 2008	14	03.07.2008 23:48
Zip Archiv entpacken und Bilder verkleinern	Simon9990	PHP Tipps 2008	5	08.10.2007 00:32
Bilder "schützen"		PHP Tipps 2006	4	06.03.2006 15:25
Bilder löschen		PHP Tipps 2005-2	4	24.10.2005 11:37
Bilder aus einem unterverzeichis anzeigen.Hilfe		PHP Tipps 2005-2	3	12.09.2005 15:36
Mehrere Bilder Hochladen und bearbeiten		PHP Tipps 2005-2	7	23.07.2005 13:48
Bilder in Tabellen	nixdorf	HTML, Usability und Barrierefreiheit	36	09.05.2005 21:15
Bilder etc. Nebeneinander		HTML, Usability und Barrierefreiheit	8	13.02.2005 22:09

08.05.2010, 11:09
pfump Erfahrener Benutzer Registriert seit: 29.03.2008 Beiträge: 576	[Erledigt] 3 Bilder nebeneinander Hallo, folgendes Problem. Ich habe ein Div. Darin sollen 3 Bilder sein. 1 links 1 mittig und 1 rechts. Diese sollen immer da bleiben. Also links am Rand, mittig und rechts am Rand. Ich hab mir das folgendermaßen gedacht: Html-Code: Code: <div class="header"> <img src="header_links.gif" style="float:left;" /> <img src="header_mitte.gif" /> <img src="header_rechts.gif" style="float:right;" /> </div> Dem Div habe ich ein text-align:center gegeben (für Bild in der Mitte) Das funktioniert ja auch soweit. Aber leider nur im IE8 und FF. Im IE7 ist das Bild in der Mitte nicht mittig und das rechte Bild ist in der nächsten Zeile. Kann mir einer sagen wie ich das im IE7 hinbekomme?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.05.2010, 12:16
Destruction Erfahrener Benutzer Registriert seit: 05.02.2009 Beiträge: 1.401 PHP-Kenntnisse: Fortgeschritten	<div class="header"> <img src="header_links.gif" style="float:left;" /> <img src="header_mitte.gif" style="float:left;margin-left:150px" /> <img src="header_rechts.gif" style="float:right;" /> </div> Würde versuchen das so zu positionieren __________________ "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus] Geändert von Destruction (08.05.2010 um 12:23 Uhr).

08.05.2010, 12:22
hehe94 Neuer Benutzer Registriert seit: 15.08.2009 Beiträge: 13 PHP-Kenntnisse: Anfänger	Pack doch die Bilder in eine extra DIV und mach dann bei der float.

08.05.2010, 14:04
pfump Erfahrener Benutzer Registriert seit: 29.03.2008 Beiträge: 576	@Destruction: Das ist ne Möglichkeit. Jedoch ist das etwas schwierig. Das Div kann nämlich dynamisch vergrößert werden. Somit wäre das mittlere Bild dann nicht mehr in der Mitte. @hehe94: Du meinst also ich soll 3 Divs anlegen, mit background-image?

08.05.2010, 14:37
pfump Erfahrener Benutzer Registriert seit: 29.03.2008 Beiträge: 576	Das komplette div wird vergrößert. So wie es jetzt ist funktioniert das ja auch. Und mit text-align:center im Style des Div, ist das mittlere Bild immer in der Mitte. Nur im IE7 halt nicht. Da ist das rechte Bild ist zwar rechts, aber leider in ner neuen Zeile. Und das mittlere Bild ist nicht in der Mitte.

08.05.2010, 16:37
pfump Erfahrener Benutzer Registriert seit: 29.03.2008 Beiträge: 576	Also ich habs jetzt mit float:left und margin-left hinbekommen. War zwar ganz schönes Gefriemel das mit Prozentangaben richtig hinzukriegen, aber hauptsache es geht Danke für eure Hilfe.