maceis
Aktives Mitglied
Thread Starter
- Dabei seit
- 24.09.2003
- Beiträge
- 16.880
- Reaktionspunkte
- 626
Hallo zusammen,
ich bin gerade dabei eine Website umzustellen und bin auf folgendes Problem gestoßen:
Ich habe einen div-Container, der nichts enthält außer drie Bilder.
Diese sollen wie folgt dargestellt werden. Bild 1, ganz am linken Rand, Bild 2 genau horizontal zentriert und Bild 3 ganz am rechten Rand. Alles auf einer Zeile (die Bilder passen rein).
Mein Ansatz sieht wie folgt aus:
XHTML:
CSS:
Funktioniert auch. Probleme macht nur der Firefox.
Bei diesem wird das zweite Bild auf dem Platz neben dem ersten zentriert und das dritte Bild rutscht in eine neue Zeile. Sieht dann ungefähr so aus.
Hat jemand einen Vorschlag, der auch mit dem FF "funktioniert"?
ich bin gerade dabei eine Website umzustellen und bin auf folgendes Problem gestoßen:
Ich habe einen div-Container, der nichts enthält außer drie Bilder.
Diese sollen wie folgt dargestellt werden. Bild 1, ganz am linken Rand, Bild 2 genau horizontal zentriert und Bild 3 ganz am rechten Rand. Alles auf einer Zeile (die Bilder passen rein).
Mein Ansatz sieht wie folgt aus:
XHTML:
HTML:
<div id="dreibilder">
<img class="left" alt="Foo" src="/pfad/bild1.jpg" />
<img alt="Bar" src="/pfad/bild2.jpg />
<img class="right" alt="Baz" src="/pfad/bild3.jpg" />
</div>
CSS:
HTML:
div#dreibilder {
position: relative;
margin: 15px 0 0 0;
padding: 0;
text-align: center;
}
div#dreibilder img{
position: relative;
margin: 0;
padding: 0;
border: 1px solid black;
}
#dreibilder img.left {
float: left;
}
#dreibilder img.right {
float: right;
}
Funktioniert auch. Probleme macht nur der Firefox.
Bei diesem wird das zweite Bild auf dem Platz neben dem ersten zentriert und das dritte Bild rutscht in eine neue Zeile. Sieht dann ungefähr so aus.
Code:
+-------------------------------------------------------------------------+
|+--------------------+ +--------------------+ |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|+--------------------+ +--------------------+ |
| +--------------------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| +--------------------+ |
+-------------------------------------------------------------------------+
Hat jemand einen Vorschlag, der auch mit dem FF "funktioniert"?
Zuletzt bearbeitet: