Im gleichen Absatz Bilder übereinander darstelllen

[cannondale63]

Hallo zusammen, bin in Sachen CSS wie in diesem Forum ein Anfänger und habe folgende Frage:

Wie kann ich mehrere (gleichformatige) Bilder im gleichen Absatz (<p>----</p> auf der rechten oder linken Seite übereinander darstellen? Geht mit float:rigth oder left, soviel weiss ich, aber wie kommen die Bilder übereinander und nicht nebeneinander?

Herzlichen Dank für die Hilfe.

Gruss Dominik

[sejuma]

p-Absätze dürfen nur Inline-Elemente enthalten. Wenn du die Bilder floatest, sind sie Blockelemente, was den Code invalide macht.

Ich würde die Bilder in einen div packen, diesem eine den Bildern angepasste Breite geben und den div floaten. Sinngemäß etwa so:

Code: Alles auswählen

<div style="float: right; width: 200px; margin-left: 15px;">
<img src....><br>
<img src...>
</div>
<p> .....</p>
<div style="clear: right"><!--Clear-Div--></div>

[cannondale63]

Vielen Dank, probier ich sicher dieses Wochenende aus und melde mich dann wieder.

[cannondale63]

Hallo, habs nun ausprobiert und funktioniert tiptop. Vier Fragen im Anschluss:

1) Kannst Du mir sagen, wie ich einen pixelgenauen Abstand zwischen den beiden Bildern hinkriege? Geht das mit margin, wenn ich vorher den Bildern ein display:block gebe?
2) Wenn ich zwei Bilder neben- und untereinander will, sollte das doch gleich gehen, indem ich den Bild-div genau so breit mache wie die beiden Bilder plus Abstand zusammen.
3) Was mir nicht einleuchtet, ist, weshalb ich diesen Code: <div style="clear: right;"><!--Clear-Div--></div> erst nach dem Text <p>Text </p> machen muss. Gibts dafür eine einfache Erklärung?
4) Kannst Du mir sagen, weshalb Bilder und Text an der oberen Kante nicht gleichauf sind, also die Bilder höher als der Text?

Vielen Dank und herzliche Grüsse, Dominik

[sejuma]

Ich versuch's mal:

zu 1:
wenn du den div benennst, z.B. mit #images.
Dann könntest du für die Bilder einen margin definieren, z.B. #images img {margin...}

zu 2:
ja, aber eigentlich brauchst du für den Div weder Breiten- noch Höhenangabe. Diese richten sich nach seinem Inhalt.

zu 3:
Die Erklärung ist die, dass dann das folgende Element wieder unterhalb des gefloateten Divs angeordnet wird.
Das hängt auch damit zusammen, dass man ja nicht immer weiß, wie hoch die einzelnen Elemente sind.

zu 4:
Das hängt damit zusammen, dass bestimmte Elemente von Haus aus bestimmte margins haben, die noch von Browser zu Browser abweichen können. Abhilfe schafft ein Reset und Neudefinition. Wenn du dann p und dem imagediv die gleichen margins gibst, ist das Problem gelöst, siehe http://www.ohne-css.gehts-gar.net/0037.php

Was mir für dein Konstrukt noch einfällt, wäre, die Bilder in eine Liste zu packen und diese entsprechend zu formatieren wie hier beschrieben: http://www.ohne-css.gehts-gar.net/0020.php. Bei Anordnung untereinander lass bei den li's einfach das float weg.

[cannondale63]

Hallo an diesem sonnigen Sonntagmorgen

Deine Angaben haben mir sehr geholfen. Habe unter Punkt 1 einfach mit Klassen-Selektor statt ID-Selektor gearbeitet, das geht bei mir mit CMSimple irgendwie einfacher.

Zu Punkt 2: Ich dachte, man müsse die Breite angeben, damit wirklich je zwei Bilder neben- und übereinander kommen. Denn wenn die divs sich nach dem Inhalt richten, könnten ja auch alle vier übereinander kommen, oder nicht?

Herzliche Grüsse, Dominik

[sejuma]

Ja, natürlich hast du da Recht. Wenn du nur eine bestimmte Breite willst, dann musst du sie auch angeben. Ansonsten dehnt sich der Div entsprechend aus.

[cannondale63]

Sorry, dass ich nochmals nachfrage... und danke für die Geduld mit unsereins Anfängern. Ist ja wirklich toll, wie einem in diesem Forum kompetent Auskunft gegeben wird.

1) Zur Antwort von vorhin: Das heisst, wenn ich keine Breite angebe, kommen alle Bilder nebeneinander, solange Platz ist - und also nicht übereinander. Wenn ich das will, muss ich auf jeden Fall mit Breitenangabe arbeiten.

2) Was Du mir am Morgen geraten hast, habe ich gemacht und hat ja auch geklappt. Vorhin habe ich auf einer anderen Seite ---- http://www.velofahrer.ch/?Veloalltag --- einen neuen Eintrag erstellt, und da sind dann wiederum Text und Bild nicht gleich hoch. Woran liegt es diesmal? Der Text ist einfach zwischen <p> und </p> und das Bild gefloatet.

Herzliche Grüsse, Dominik

[sejuma]

zu 1:
Ja.
Du kannst aber nach jedem Bild oder jedem zweiten Bild usw. z.B. ein

Code: Alles auswählen

<br>

einfügen. Dann erfolgt ein Zeilenumbruch und nicht alle Bilder kommen nebeneinander.

zu 2:
Diese Seite ist vom Quelltext her eher eine Katastrophe, da viele Elemente unnötig und nicht richtig eingebaut sind.
Der Grund, weshalb es keinen bündigen Abschluss gibt, hängt mit meinem Post von 11.31 Uhr, Ziffer 4 zusammen.

Du kannst natürlich auch folgendes machen:
Verzichte auf den image-Div und verwende dafür einen gefloateten Absatz

Code: Alles auswählen

<p style="float: right;">
<img src=.....>
</p>
<p>
Textabsatz
</p>

Dann sollten Text und Bilder auf einer Höhe sein.

[cannondale63]

Na, das stimmt bestimmt mit der Katastrofe... ich fange halt wirklich von null an und ohne Kurs.

Deinen Code-Vorschlag für diese Seit http://www.velofahrer.ch/?Veloalltag habe ich übernommen, die Höhe stimmt aber immer noch nicht, obwohl ich den Hinweis 4 im Post 10:31 von gestern befolgt habe und dies auf der Testseite http://www.velofahrer.ch/?Velotouren:Me ... estseite_3 funktioniert hat.

Seis drum, wenn Du magst, nehme ich Deine Hilfe gerne weiter in Anspruch, aber sonst lass es halt bleiben...!

Vielen Dank und herzliche Grüsse aus der Schweiz, Dominik

[sejuma]

Die Fehldarstellung hängt mit der "Katastrophe" zusammen
Hier ist ein unnötiger, inhaltsleerer Absatz:

<em>20. Februar 2010</em> <p>
</p>

Wenn du den löschst, dann sind Text und Bilder bündig.

[cannondale63]

Ja, stimmt. Im IE sieht es jetzt so aus, wie ich es haben will, das Bild auf der gleichen Höhe wie der Text, das Datum aber darüber. Im Firefox ist das Bild allerdings auf der Höhe des Datums. Wie kriege ich das noch hin?

http://www.velofahrer.ch/?Veloalltag

A propos Katastrofe: Ich werde die entsprechende Seite nun unter die Lupe nehmen und entrümpeln.

Vielene Dank nochmals, Dominik

[sejuma]

Das Problem scheint zwischenzeitlich mit einem Zeilenumbruch gelöst.