Bilder übereinander darstellen, Text daneben

[cannondale63]

Hallo
In diesem neuen Blog http://www.auch-du-betest möchte ich in der Sidebar rechts die Bilder der Moderatoren übereinander darstellen. Der Text zu den drei Personen soll jeweils unten bündig zum Bild sein. Das müsste doch irgendwie mit float gehen - aber ich kriegs und kriegs nicht hin.

Im Moment ist dies der Code:

Code: Alles auswählen

<div><a><img width="80" height="110" style="float:left"; src="http://www.auch-du-betest.ch/wp-content/uploads/2011/07/kopf_rot.jpg"></a></div><div><a><img width="80" height="110" style="float:left"; src="http://www.auch-du-betest.ch/wp-content/uploads/2011/07/kopf_gruen.jpg"></a></div><div><a><img width="80" height="110" style="float:left"; src="http://www.auch-du-betest.ch/wp-content/uploads/2011/07/kopf_blau.jpg"></a></div>Dies ist nur ein Mustertext. Im definitiven Text wird dann erklärt, wer diesen Blog moderiert. Es ist schliesslich wichtig, dass alle wissen, wer hinter diesem Projekt steht, Beiträge schreibt, redigiert - und nofalls auch rausschmeisst.
Dies ist nur ein Mustertext. Im definitiven Text wird dann erklärt, wer diesen Blog moderiert. Es ist schliesslich wichtig, dass alle wissen, wer hinter diesem Projekt steht, Beiträge schreibt, redigiert - und nofalls auch rausschmeisst.


Der Blog ist Wordpress.

Vielen Dank für die Hilfe, die in diesem Forum immer so top klappt!

Gruss

Dominik

[sejuma]

Sieh mal hier unter Nr. 6:
http://www.ohne-css.gehts-gar.net/0019.php

[cannondale63]

Hallo
Dein Hinweis hat mir geholfen, aber es sieht noch nicht ganz so aus, wie ich es möchte.
Es geht um die Spalte rechts oben auf http://www.auch-du-betest.ch mit den drei farbigen Platzhalterbildern.
Was ich möchte:
a) Den Text oben bündig mit der Bildoberkante.
b) Weniger Abstand zwischen den Bildern. Mit margin-top:3px hat sich zwar etwas verändert, aber der Abstand war immer noch zu gross und ein tieferer Wert als 3px hat nichts gebracht.

Das ganze ist übrigens in ein Text-Widget dieses Wordpress-Blogs eingebaucht. Ich muss der <div> also keine Grundbreite eingeben.

Der Code lautet nun so, das CSS-Styling ist in der theme.css drin:

Code: Alles auswählen

<div><img class="links" src="http://www.auch-du-betest.ch/wp-content/uploads/2011/07/kopf_rot.jpg" width="80" height="110" border="0">
<p>Dies ist nur ein Mustertext. Im definitiven Text wird dann erklärt, wer diesen Blog moderiert.</p>
<br style="clear:both;">
<img class="links" src="http://www.auch-du-betest.ch/wp-content/uploads/2011/07/kopf_blau.jpg" width="80" height="110" border="0">
<p>Dies ist nur ein Mustertext. Im definitiven Text wird dann erklärt, wer diesen Blog moderiert.</p>
<br style="clear:both;">
<img class="links" src="http://www.auch-du-betest.ch/wp-content/uploads/2011/07/kopf_gruen.jpg" width="80" height="110" border="0">
<p><style="margin-bottom: 10;">Dies ist nur ein Mustertext. Im definitiven Text wird dann erklärt, wer diesen Blog moderiert.</p></div>


Vielen Dank für Deine Hilfe!

Gruss Dominik

[sejuma]

a)
etwa

Code: Alles auswählen

.textwidget p {margin-top: -3px;}

b) kannst du so lösen (margin-Wert anpassen):

Code: Alles auswählen

<br style="clear:both; margin-top: 13px;">

<img class="links"

[cannondale63]

Die Sache scheint mir echt knifflig, darum melde ich mich nochmals.

a) Das

Code: Alles auswählen

.textwidget p {margin-top: -3px;}

scheint nichts zu bringen.
b) Ich habe es dann für die unteren beiden Bilder mit einer Klasse .links2 versucht, in die ich einen negativen Margin-Wert eingab. Das zweite Bild (nicht aber das dritte) rutschte dann wunschgemäss nach oben, aber der Text natürlich nicht.
c) Mit

Code: Alles auswählen

<br style="clear:both; margin-top: 13px;">

hat das auch nicht funktioniert.

Nun bin ich ein bisschen ratlos. Hast Du noch eine Idee?

Gruss und Dank, Dominik

[Azra]

1. Das <br/> nach dem clear rauß
2. Klasse links erhält statt margin-right nur margin:5px 10px 10px 0;
3. Vergiss nicht nach dem letzten float auch zu clearen.

Vielleicht auch 5px - musste gucken wie es dir besser passt.
Hebs guet

[cannondale63]

Hallo, vielen Dank für die Hilfe. Es hat funktioniert.

a) Klasse links lautet nun:

Code: Alles auswählen

.links {
   float:left;
   margin: 5px 7px -15px 0;

b) ein

Code: Alles auswählen

<br/>

hatte ich ja nirgends. Das

Code: Alles auswählen

<br>

hier

Code: Alles auswählen

<br style="clear:both;">

musste hingegen bleiben, sonst hätte es ja keinen neuen Absatz gegeben.
c) Nach dem letzten float habe ich nochmals gecleart.

Was meinst Du dazu?

Hebs guet ebenfalls, Dominik

[Azra]

Ich vergass dass das Wordpress ist - folgendes wird vom Browser ausgegeben:

Code: Alles auswählen

<p>
<br style="clear:both;">
<br>
<img width="80" height="110" border="0" src="http://www.auch-du-betest.ch/wp-content/uploads/2011/07/willi_peter.jpg" class="links">
</p>


Deshalb nannte ich das <br> welches du entfernen solltest um meine Masse zu nutzen. Kann sein dass es von Wordpress erzeug wird daher stimmt deine Lösung