drei Bilder in div gleichmäßig verteilen

maceis

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:
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:
Kann Grad nix testen, da nur iPod. Gib den bildern mal per css eine width. Hört sich zwar unnötig an, aber laut css-Standard brauchen floatende Elemente zwingend eine feste breite.

Dann würde ich dem div noch eine breite geben. Braucht's sowieso falls das Fenster zu klein wird.

Wenn das nix hilft: kurzen Prozess und absolut innerhalb des relativen Divs positionieren.
 
Oder alle Bilder left floaten lassen und die Abstände untereinander über margins beim img-tag machen.
Oder verändert sich eventuell die breite des umgebenden divs und das Bild rechts, soll mitwandern ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#dreibilder {
margin: 15px 0 0 0;
padding: 0;
text-align: center;
width: 250px;
display: block;
border: 1px solid red;
overflow: auto;
}

#dreibilder img{
margin: 0 0 0 15px;
padding: 0;
border: 1px solid black;
float: left;
width: 50px;
height: 50px;
}

</style>
</head>
<body>

<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>
</body>
</html>
Zum Vergrößern anklicken....
 
width bei den Bildern und beim div hatte ich schon ausprobiert. Kein Änderung.

Als endgültige Lösung würde ich das ohnehin nicht unbedingt wollen bzw. wenn dann höchstens in em. Pixellayouts mach ich höchstens noch zum schnellen Testen.
Bei dieser Site bereite ich mich gerade vor, alles auf em umzustricken.

Nur left floaten und mit margins arbeiten möchte ich eigentlich auch nicht.
Das ist mir zu unflexibel, zu "unlogisch" und zu viel Getüftel.
 
Anderer Lösungsansatz: Horizontale Liste.
 
Interessanter Gedanke, aber:

- Eine Liste zur Positionierung zu "missbrauchen" erscheint mir genauso unlogisch, wie die Verwendung von Tabellen.

- "Horizontale Liste" ist kein Lösungsansatz sondern erstmal nur ein Brocken. Das Entscheidende ist doch, wie ich die oben beschriebene Positionierung erreiche.
 
maceis schrieb:
- Eine Liste zur Positionierung zu "missbrauchen" erscheint mir genauso unlogisch, wie die Verwendung von Tabellen.
Zum Vergrößern anklicken....

Kein Widerspruch. War für den Fall gedacht, dass sowieso die drei Bilder mit Links versehen werden sollen, wie oft bei horizontalen Listen.
 
Nein, die Bilder sind keine Links. Die sind nur zum Anschauen da ;).
Genauer handelt es sich um eine Bildleiste am unteren Rand, die mit zufällig ausgewählten Bildern bestückt wird.

Generell freue ich mich ja über jede Anregung, andererseits bin ich aber auch wählerisch.
Ich hab keine besondere Eile mit dem Umbau, aber das Ergebnis soll dann sauber strukturiert sein und möglichst wenig Code brauchen.
 
Okay, ich glaub ich hab's.

div: position: relative; text-align: center;
Bild 1: position absolute; left 0;
Bild 2: position: relative;
Bild 3: position absolute; right 0;

Funktioniert im Safari und im FF. Die anderen muss ich noch testen.

So gefällt mir das. Ich versteh allerdings nicht, warum das die einzige Lösung ist, die bei mir funktioniert hat.
 
maceis schrieb:
..
Als endgültige Lösung würde ich das ohnehin nicht unbedingt wollen bzw. wenn dann höchstens in em. Pixellayouts mach ich höchstens noch zum schnellen Testen.
Bei dieser Site bereite ich mich gerade vor, alles auf em umzustricken.
Zum Vergrößern anklicken....
Als endgültige Lösung war das auch nicht gedacht. :)
Da ich bei mir keine Bilder hatte, habe ich einfach grade feste größen vergeben um überhaupt was zu sehen.

maceis schrieb:
Nur left floaten und mit margins arbeiten möchte ich eigentlich auch nicht.
Das ist mir zu unflexibel, zu "unlogisch" und zu viel Getüftel.
Zum Vergrößern anklicken....
[/QUOTE]

Alles left zu floaten, ist gar nicht mal so unlogisch.
Darauf basieren ja auch in der Regel dreispaltige Layouts. :)
Unflexibel, kann ich jetzt nicht beurteilen, aber alles Absolut zu setzen, scheint mir auch nicht sehr flexibel zu sein. :)
 
maceis schrieb:
Als endgültige Lösung würde ich das ohnehin nicht unbedingt wollen bzw. wenn dann höchstens in em.
Zum Vergrößern anklicken....

Bei EM brauchst Du aber auch eine Breite/Höhe. Sonst wird das mit der Skalierung nix.

Und ich hoffe Du weisst was Du Dir da vorgenommen hast. :) Ein funktionstüchtiges und optisch anspruchsvolles EM-Layout ist eine Never-Ending-Story. Meiner Meinung nach, gänzlich unkalkulierbar, unrentabel und den Aufwand schlicht und ergreifend nicht Wert. Und das schreibe ich, obwohl mir Barrierefreiheit durchaus am Herzen liegt.
Ich hoffe Du magst Kompromisse, denn Du wirst einige eingehen müssen wenn Du das durchziehst. :) Solange Browser EM intern noch in PX umrechnen wird da einfach kein passender Schuh draus.

Allein schon bei der hier genannten Bildleiste sehe ich keine saubere Lösung.
 
Die Höhe muß man bei den Bilder nicht unbedingt definieren.
Die Skaliert im richtigen Seitenverhältnis mit. nur die Breite muß man halt angeben.

Ansonsten kann man schon ganz gut mit EM arbeiten und auch komplexe Seiten bauen, aber im Detail muß man auf jedenfall für diverse Browser per Selektor im CSS eigene Definitionen einbauen.
Aber das muß man leider für den IE zwangsläufig. :)

Bei der Bildleiste, war mir nicht ganz klar, wofür die gut ist bzw. was als Idee dahinter steckt.
Da ist es dann immer schwer, eine gute Lösung auszutüfteln. :)
 
rm -r * schrieb:
Die Höhe muß man bei den Bilder nicht unbedingt definieren. Die Skaliert im richtigen Seitenverhältnis mit. nur die Breite muß man halt angeben.
Zum Vergrößern anklicken....
Ja, oder halt anders rum. ;) Aber einen EM-Wert brauchts eben allemal.

rm -r * schrieb:
Ansonsten kann man schon ganz gut mit EM arbeiten und auch komplexe Seiten bauen
Zum Vergrößern anklicken....

Kommt sicher darauf an was man unter komplex versteht und wie hoch die Ansprüche sind. Wenn einen nicht stört dass mal eine Linie um "einen Pixel" verschoben ist, kein Ding.
 
dms schrieb:
..
Wenn einen nicht stört dass mal eine Linie um "einen Pixel" verschoben ist, kein Ding.
Zum Vergrößern anklicken....

Ja, da wird es hakelig, weil Browser auch einfach mal bei Breitenangaben alle width: 35.257em völlig Wahlfrei auf, oder abrunden um dann auf die darzustellenden Pixel zu kommen.
Das artet dann in trial by error aus. :)
 
Eben. Und deswegen sehe ich auch schon Probleme bei dieser Bilderleiste. Der Div-Conainter braucht eine feste Breite (nat. in EM) Die Bilder brauchen eine feste Breite. Jetzt kommt das völlig zufällige Ab/Aufrunden der einzelnen Elemente, also Bilder und Container und plötzlich passen die Bilder nicht mehr in den Conatiner, weil die Bilder zufällig auf- und der Conainer abgerundet wurde. :)

Da die Bilder nun absolut positioniert sind, ist es nicht so schlimm, eines der Bilder wird halt abgeschnitten. Eine Variante mit float würde hier komplett auseinanderfallen.

Den umgekehrten Fall gibt es natürlich auch. Container wird auf-, die Bilder abgerundet. Und schon hat man einen Zwischenraum zwischen den Bildern.
 
Vielen Dank erstmal für Eure Tipps und Kommentare.

Ich hab schon reine em Layouts gebaut. Es geht und es hat auch recht gut funktioniert — am Ende sogar im IE :)ächz:). Generell muss man halt überlegen, wie viele Versionen zurück man kompatibel bleiben möchte/muss.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten