Cachebeschreibung &HTML. Bilder und Text nebeneinander

Hallo,
Wenn man ein Bild in seine Cachebeschreibung einbringen will, nimmt man ja einfach die Linkadresse und kopiert sie zusammen irgendwelchen HTML Zeichen in die Beschreibung.
Wie aber kann ich Bilder nicht über die gesamte Breite des Listings anzeigen lassen, sonder in einer bestimmten, von mir gewählten Größe?
Und wie kann ich z.B. ein Bild (hochformat) neben einer schmalen Spalte Text einbringen und wie bestimm ich den Abstand von Bild und Text?

Trebbi

Die größe ändest Du, indem du neben dem img-Tag auch width bzw height als Parameter verwendest.
Wenn du zweispaltig werden willst, musst du mit Tabellen arbeiten.

Such mal im Internet net SelfHTML. Da findest du die entsprechenden Möglichkeiten ausreichend erklärt.

Die größe ändest Du, indem du neben dem img-Tag auch width bzw height als Parameter verwendest.

Zum Vergrößern anklicken....

Ihr sprecht immer alle so Fach-GC-Wissen, da kann ich gar nicht folgen...

Zweispaltig kann man nicht sagen...
Ich habe einen fortlaufenden Text und möchte im Hochformat ein Bild einfügen. Der Text soll um das Bild fließen...

Trebbi

Nach Schnuefflers Anweisung findet man das hier: http://de.selfhtml.org/html/grafiken/ausrichten.htm
Alternative: Lad dir einen HTML-Editor runter (beispielsweise Phase5 o.ä.) und erstelle damit die Cachebeschreibung. Anschließend nur noch alles einfügen und kontrollieren ob es passt. ;-)

Schnueffler schrieb:

Wenn du zweispaltig werden willst, musst du mit Tabellen arbeiten.

Zum Vergrößern anklicken....

Lieber div und float, alles andere ist nicht wirklich barrierefrei.

Trebbi schrieb:

Ihr sprecht immer alle so Fach-GC-Wissen, da kann ich gar nicht folgen...

Zum Vergrößern anklicken....

HTML-Programmierung hat zunächst Null-Komma-Nix mit Geocaching zu tun. Du mußt es Dir nur aneignen, wenn Du für das Erschinungsbild Deines listings besondere Wünsche hast.

So:
wenn du ein bild einfügen willst, lade es am besten einfach beim listing hoch und klicke dann auf den link mit der rechten maustaste und dann Link adresse kopieren.

In deinem Text füge dann einfach das ein:

kannst du das machen. Dann sieht es aus wie z.B. hier: http://www.geocaching.com/seek/cache_details.aspx?wp=GC2WP6P

(ja ich weiß es ist nicht xhtml konform, deprecated und mit divs ginge das alles viel besser)

printe schrieb:

Lieber div und float, alles andere ist nicht wirklich barrierefrei.

Zum Vergrößern anklicken....

Ja und? Kennst Du ein GPS-Gerät für Menschen mit Sehbehinderung? Läßt sich eine Topo-Karte auf der Braille-Zeile darstellen? Geocaching ist ein Hobby für Sehende, das kann man wohl voraussetzen. Trotzdem ist das Anliegen, Form und Inhalt zu trennen, natürlich sinnvoll. Aber wenn man einfach nur "<table>" durch "<div>" ersetzt, ist damit ganz genau gar nichts gewonnen, denn "<div>" ist genauso wenig sinnvoll oder barrierefrei.

HTML-Programmierung hat zunächst Null-Komma-Nix mit Geocaching zu tun.

Zum Vergrößern anklicken....

Mit HTML kann man nicht Programmieren.

Hallo,

ganz einfach geht es auch wenn du in der Zeile wo das Bild eingesetzt wird align="left" oder align="right" in den Quellcode einbaust. Dann sollte der Text automatisch daran vorbei laufen.

z.B.
Gruß Robert

@pl1lkm
Ist aber sehr hässlich und die Darstellung von sowas ist auch nicht garantiert.

@Rupa
Das hat nicht unbedingt was mit einer Sehbehinderung zu tun.
Stell dir vor, das Display ist klein (GPS/Handy). Bei einer Tabelle würde der Text nur noch ein Wort breit sein und dann immer umbrechen, außerdem würde er rechts über den Rand gehen. Warum? Weil das Bild eine feste Größe hat und der Text zwingend rechts neben dem Bild ist.
Beim Floating ist das nicht, dort fängt der Text dann erst unter dem Bild an.

Die einzige sinnvolle Lösung um ein Bild rechts von Text umfließen zu lassen:

SammysHP schrieb:

@pl1lkm
Ist aber sehr hässlich und die Darstellung von sowas ist auch nicht garantiert.

Zum Vergrößern anklicken....

Die Garantie hat man beim Float auch nicht, und die Darstellungen sind nicht unterschiedlich.

@Rupa
Das hat nicht unbedingt was mit einer Sehbehinderung zu tun.
Stell dir vor, das Display ist klein (GPS/Handy). Bei einer Tabelle würde der Text nur noch ein Wort breit sein und dann immer umbrechen, außerdem würde er rechts über den Rand gehen. Warum? Weil das Bild eine feste Größe hat und der Text zwingend rechts neben dem Bild ist.
Beim Floating ist das nicht, dort fängt der Text dann erst unter dem Bild an.

Zum Vergrößern anklicken....

Die Größe des Bildes soll man natürlich sorgfältig wählen. Aber dann kann es auch nicht mehr zum Problem führen, weil das Listing eine Minimumbreite hat. Schau mal was passiert, wenn Du dem Browser eine Breite von weniger als etwa 800px verpasst.

Die einzige sinnvolle Lösung um ein Bild rechts von Text umfließen zu lassen:

Code:

<img src="bild-url" alt="Alternativtext ist Pflicht" style="float: left;" />

Zum Vergrößern anklicken....

Da würde ich dann wenigstens auch noch ein "padding-right: 10px;" hinzufügen, damit der Text nicht sofort am Bildrand beginnt.
Ein Alternativtext darf übrigens auch leer sein. "Foto von der Tupperdose" als Alternativtext ist nicht unbedingt sinnvoll. Die "Pflicht" beschränkt sich übrigens auf die, die ein tadelloses W3C-Validierungsresultat verlangen. Weil das bei den Listings eh nicht gegeben ist, entfällt diese "Pflicht" wohl.

Es geht nicht darum, wie das Ganze auf gc.com aussieht, die Beschreibung wird gelegentlich auch anderweitig angezeigt. Der Alternativtext ist nicht Pflicht, das stimmt, der Tag allerdings schon. (Es macht durchaus Sinn, sich an Standards zu halten, außerdem ist ein Alternativtext praktisch, falls das Bild mal nicht verfügbar ist.)

meine Empfehlung für alle, die sich nicht mit HTML auskennen:

Firefox plus die Erweiterung "Write Area". https://addons.mozilla.org/de/firefox/addon/write-area/
Wenn die installiert ist klickst Du einfach in jedes beliebige Feld mit der rechten Maustaste, wählst Write Area und hast einen HTML Editor, der idiotensicher ist. geocaching.com wandelt den HTML-Code dann selbständig noch ein bisschen um