3 Bilder mit CSS platzieren

[Sebastian M.]

Hallo,

ich habe eine Webseite, die mit Frames aufgebaut ist (bitte jetzt
hier keine Diskussion über Frames in Webseiten ^_^). Einer der Frames
ist 60 Pixel hoch und geht über die gesamte Fensterbreite.

In diesem Frame möchte ich nun drei Bilder platzieren, die alle
ebenfalls je 60 Pixel hoch sind. Dabei soll ein Bild am linken Rand,
eines in der Mitte und eines am rechten Rand stehen.

So sieht zur Zeit mein CSS aus:

  
body { background-color:#3c567c;color:#ffffff;margin:0;padding:0; }  
div.links { float:left;margin:0 1.5em;padding:0; }  
div.rechts { float:right;margin:0 1.5em;padding:0; }  
div.zentriert {  }  
img { border:0;margin:0;padding:0; }  

Und der Quelltext:

  
<div class="links">  
  <img src="bild1.png" width="254" height="60" alt="Text1">  
</div>  
  
<div class="zentriert">  
  <img src="bild2.png" width="237" height="60" alt="Text2">  
</div>  
  
<div class="rechts">  
  <img src="bild3.png" width="247" height="60" alt="Text3">  
</div>  

Bild 1 und 3 werden richtig angezeigt - am linken bzw. rechten Rand.

Aber wie bekomme ich nun das zweite Bild genau in die Mitte? Würde
das gerne mit CSS machen, ohne auf Tabellen zurückgreifen zu müssen.

Viele Grüße und schon mal danke für alle Antworten,
Sebastian

[Zeromancer]

Hallo Sebastian,

Aber wie bekomme ich nun das zweite Bild genau in die Mitte? Würde
das gerne mit CSS machen, ohne auf Tabellen zurückgreifen zu müssen.

als Inline-Element kann man es mittels text-align:center im umgebenden Element ausrichten.

Mit freundlichen Grüßen,
André

[Sebastian M.]

als Inline-Element kann man es mittels text-align:center im umgebenden Element ausrichten.

Ja, das war das erste, was ich probiert habe. Also:

  
div.links { float:left;margin:0 1.5em;padding:0; }  
div.rechts { float:right;margin:0 1.5em;padding:0; }  
div.zentriert { text-align:center;margin:0 1.5em;padding:0; }  

und

  
<div class="links">  
  <img src="bild1.png" width="254" height="60" alt="Text1">  
</div>  
<div class="zentriert">  
  <img src="bild2.png" width="254" height="60" alt="Text2">  
</div>  
<div class="rechts">  
  <img src="bild3.png" width="254" height="60" alt="Text3">  
</div>  

Aber dann verschwindet das rechte Bild komplett aus dem sichtbaren
Bereich. Also das mittlere Bild verschiebt dann quasi das rechte
Bild aus dem Frame.

Auch wird das mittlere Bild dann nicht zentriert angezeigt. Schwer
zu beschreiben: Das rechte Bild verschwindet, und in dem dann noch
freien Bereich (also abzüglich dem linken Bild), dort wird das mittlere
Bild zentriert angezeigt.

Viele Grüße,
Sebastian

[Jonathan]

Hallo, lass doch einfach die ganze div-Kacke weg. ;)

Ohne es groß zu testen müsste folgendes Funktionieren:

<img […] style="float:left;">
<img […] style="float:right;">
<img […] style="display:block;margin:0 auto;">

src, alt width, height, eventuelle margins usw. musst du natürlich noch einsetzen.

[Sebastian M.]

Hallo, lass doch einfach die ganze div-Kacke weg. ;)

Ohne es groß zu testen müsste folgendes Funktionieren:

<img […] style="float:left;">
<img […] style="float:right;">
<img […] style="display:block;margin:0 auto;">

src, alt width, height, eventuelle margins usw. musst du natürlich noch einsetzen.

Vielen Dank, das funktioniert tatsächlich.

Da wäre ich aber wirklich nicht draufgekommen, vor allem weil die
Reihenfolge im Quelltext ja "falsch" ist (erst das linke Bild, dann
das rechte Bild und dann das mittlere Bild). Aber es funktioniert ja.

Viele Grüße,
Sebastian