Text neben Bild per CSS ausrichten

[kaifreund]

Hallo Forum,
ich würde gerne rechts neben verschiedene Bilder (die auf klick ein neues Fenster öffnen) *beliebiger* Höhe und Breite einen zweiteiligen Text positionieren.
Das 'Leckerli' soll sein das Teil 1 des Textes oben bündig zum Bild positioniert werden soll, Teil 2 aber untenbündig, und genau das bekomme ich nicht hin. Da die Bilder verschieden hoch sind möchte ich vermeiden den unten bündigen Text "von Hand" per pixel-Positionierung einbinden zu müssen, idealer Weise sollte der sich immer von allein unten ausrichten. Tja aber wie?

bisher:

<div><a name="wasist02a">Das Programm berücksichtigt dabei den analytischen Fehler als unabdingbare Vorraussetzung.</div>
<div style="float:left;"><a href="../pics/Web_2_0.bmp" target="neu"><img src="../pics/Web_2_0.bmp" width="216" border="0" alt="Likelynet analytischer Fehler"></a></div>
<div class="details">Ein beliebiger Plot zweier Variablen. Jeder Messpunkt besitzt eine analytische Unschärfe. In der Abbildung werden die Unschärfen aller Messpunkte überlagert. Die Farben stellen eine Art Messwertdichte dar.</div>
<div class="enlarge">click image to enlarge</div>
<div class="top"><a href="#top">back to top</a></div>

img{
border-right-width:15px;
border-top-width:4px;
border-bottom-width:4px;
border-style:solid;
border-color:white;
}

.details{
text-align: left;
vertical-align:top;
font-weight:normal;
border: solid black 1px;
}


.enlarge, .top{
font-weight:normal;
font-style:italic;
font-size: 10px;
text-align: left;
}

.top{
clear:left;
padding-bottom:60px;
}

 

[xlqr]

versuch doch mal das bild und die zwei texte in ein div zu legen ...

(evtl. würd ich auch die inneren objekte nicht in divs packen, sondern das bild direkt im <img> stylen und die texte mit einem <p> oder <span>)

 

[kaifreund]

Hi xlqr,
hmmm... warum in ein div? -aber selbst wenn ich das mache, wie bekomme ich dann den Textteil 2 untenbündig 'dynamisch' an der jeweiligen Bildgrösse ausgerichtet?
Nicht versteh...

kai

 

[xlqr]

Hi xlqr,
hmmm... warum in ein div? -aber selbst wenn ich das mache, wie bekomme ich dann den Textteil 2 untenbündig 'dynamisch' an der jeweiligen Bildgrösse ausgerichtet?
Nicht versteh...

kai

ich dachte mir das so: die höhe des divs dynamisch am img ausrichten und die position der texte wiederum am div - einer klebt oben, der andere unten ... das müsste schon gehen.

[ganz einfach wärs natürlich in einer tabelle ]

 

[kaifreund]

Ich bin zu blöd...
Wenn ich das Bild und die Texze in ein div einschliesse, wie formatiere ich denn dann die Ausrichtung des 2ten Textes?
Sorry bin noch ziemlicher Beginner... Ich lege mal ein screenshot anbei- das "click to enlarge" soll unten am bild ausgerichnet sein, auf dem Bild der status Quo...
Lieben Dank...

 

[msslovi0]

Das geht nicht [tm]. Woher soll der div wissen, wie hoch und breit das Bild ist?

Der Versuch einer Lösung setzt daher den Einsatz einer serverseitigen Scriptsprache voraus, die ausliest, wie groß das Bild ist und den Code entsprechend anpasst. Evtl. geht es auch mit Javascript, aber das bringt alle Nachteile einer clientseitigen Scriptsprache auf den Plan.

BMP ist BTW kein webfähiges Format. Davon abgesehen sind die Dateien riesengroß, da BMP keinerlei Komprimierung kennt.

Matt

 

[kaifreund]

@ matt

.bmp ist zu gross schon klar, aber das war auch nur mal schnell hingeklickert -aber danke trotzdem.

Die vage Hoffnung die ich bezüglich der Ausrichtung hatte war, das es vielleicht möglich sein hätte können mit vertical-align:top Text1 und irgendwie mit vertical-align:bottom Text2 neben das Bild zu bekommen... Aber an dem "irgendwie" bleibe ich wohl hängen...

gruesse
kai

 

[mirkot.]

Hast du mal versucht, das Bild, und jeden Text, 1 und 2 (Absatz; p class=oben und p class=unten), in ein einziges div zu packen und dann mit css auszurichten?

mirkot.