Html: Bild - Text - Bild - Text nebeneinander

[pivoune]

halo :-)
Ich versuche, bis jetzt vergebens, horizontal nebeneinander ein Bild, daneben Text, dann wieder ein Bild und wiederum Text anzuzeigen. Bis jetzt ist es mir jedoch nur gelungen Neben einem Bild Text anzuzeigen:

Mit dem folgenden Code kreig ich das folgende Resultat:

<a href="/work/15605/book/20882046">
<img style="height: 100px; float:left; vertical-align:text-top; margin-right:10px;" src="http://images.amazon.com/images/P/0575079096.01._SX140_SCLZZZZZZZ_.jpg"/></a><a href="/work/15605/book/20882046"> The Stars My Destination</a>
by <a href="/author/besteralfred"> Alfred Bester</a>
<a href="/catalog_bottom.php?tag=The+Stars+My+Destination&view=pivox"> In my catalog</a>
<a href="http://images.amazon.com/images/P/0575079096.01._SX140_SCLZZZZZZZ_.jpg">Bigger cover</a>

Jedoch möchte ich gerne Folgendes:

Wie kann ich das erreichen anhand des schon vorhandenen Codes?
Danke vielmals für eure Hilfe :-)

 

[gruenspan]

wie wäre es, wenn du alle Elemente links floatest?!

 

[pivoune]

"floatest"? Sorry ich bin ein neuling im HTML. Kannst du etwas spezifiescher sein?

 

[threadi]

float ist eine CSS-Eigenschaft, kein HTML: SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

 

[Medizinmann]

Hi, kommt vielleicht auch darauf an, wieviele solcher Elemente du nebeneinander setzten willst.
Mein Vorschlang: Einfach mit css am Rand des Fensters ausrichten:
<div style="position:absolute; left:1px"
<a href="/work/15605/book/20882046">
<img style="height: 100px; float:left; vertical-align:text-top; margin-right:10px;" src="<A href="http://images.amazon.com/images/P/0575079096.01._SX140_SCLZZZZZZZ_.jpg"/></a><a">http://images.amazon.com/images/P/0575079096.01._SX140_SCLZZZZZZZ_.jpg"/></a><a href="/work/15605/book/20882046"> The Stars My Destination</a>
by <a href="/author/besteralfred"> Alfred Bester</a>
<a href="/catalog_bottom.php?tag=The+Stars+My+Destination&vi ew=pivox"> In my catalog</a>
<a href="<A href="http://images.amazon.com/images/P/0575079096.01._SX140_SCLZZZZZZZ_.jpg">Bigger">http://images.amazon.com/images/P/0575079096.01._SX140_SCLZZZZZZZ_.jpg">Bigger cover</a>
</div>
Also einfach das Bild samt Text und Refs, etc. so gestallten wie du willst, diese in einem
<div> zusammenfassen und am Fensterrand (z.B. links) ausrichten.
Falls es wenige/nur zwei Elemente sind koenntest du eines rechts und das andere am linken Rand ausrichten,
wuerde aber empfehlen beides an selben Rand auszurichten. Tja und den Abstand den jedes <div>
vom Rand haben soll musst du anhand der Breite deiner Elemente waehlen.
Ich hoffe das hat dir weitergeholfen,
Medizinmann

 

[Onkel_Busch]

Bilder und Text

Versuch es doch einfach mit Tabelle.
In die eine das Bild, in die andere den Text. In die nächste das Bils usw.
Das geht einfach mit HTML.

Gruß BuSch

 

[koslowski]

Hi,

Versuch es doch einfach mit Tabelle.

Tabellen sind Quatsch, weil semantisch falsch, außerdem arbeitet er ja schon mit divs.

Pack das jeweilige Bild mit dem dazugehörigen Text in je einen div und laß die floaten.
Innerhalb der divs läßt du die Bilder ebenfalls floaten.

Clearen nicht vergessen!

Mein Vorschlang: Einfach mit css am Rand des Fensters ausrichten:
<div style="position:absolute; left:1px"

Von position:absolute tät ich abraten, weil du das betreffende Element damit komplett aus dem Dokumentenfluß rausnimmst.

Positioniert wird üblicherweise mit float/clear und padding/margin.

 

[pivoune]

Danke viel mals für all die Vorschläge. Ich brauche jedoch eine Html-only Lösung, da die "Seite" für die der Code bestimmt ist nur Html erlaubt :-(

 

[threadi]

Seit wann ist kein CSS zulässig :?:

 

[koslowski]

Hi,

ch brauche jedoch eine Html-only Lösung, da die "Seite" für die der Code bestimmt ist nur Html erlaubt :sad:

.

[Häh?]Versteh ich auch nicht.[/Häh?]

 

[acidmat]

CSS ist keine Script Sprache, die ein speziellen Server benötigt oder so, das kannst du einfach in den HTML - Code mit reinschreiben.

mfg

 

[Onkel_Busch]

Bilder und Text

Tja also doch Tabellen, dachte ich es mir doch. Denn er sagte ja, daß er es mit reinem HTML machen wollte. Warum er kein CSS nehmen will weiß ich ja auch nicht.

Gruß BuSch

 

[acidmat]

er verwendet ja selbst schon CSS :

<img style="height: 100px; float:left; vertical-align:text-top; margin-right:10px;" ...

 

[neuroleptika]

Vergesenes Element?

Immer wenn es um Texte zu einem Bild geht, wird über Tabellen oder Div geredet.
<dl> (definitionsliste) wird nicht mehr vorgeschlagen.
Ist das Element in vergessenheit geraten, zu unbekannt oder out?

Ich mag das Element und finde es schade, dass es so wenig Beachtung findet.

 

[threadi]

Was hat das

Definitionslisten definieren - dl, dt, dd

mit Bild neben Text zu tun :shock: Das dafür zu verwenden wäre genauso frevelhaft wie Tabellen finde ich?!

Definitionslisten sind für Glossare gedacht.

SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen

 

[neuroleptika]

Was hat das
mit Bild neben Text zu tun :shock: Das dafür zu verwenden wäre genauso frevelhaft wie Tabellen finde ich?!

Es stellt semantisch den Zusammenhang zwischen Bild und Text da.
Ein div hilft nur bei der optischen Gestaltung wenn kein passendes Element sinnvoll anwendbar ist.