Freiraum zwischen verlinkten Bildern (elegante Lösung?)

[Nick]

Hallo, liebe Forengemeinde,

ich wünsche Euch ein frohes und gesundes neues Jahr!

Meine Frage bezieht sich auf die Darstellung mehrerer nebeneinander liegender, verlinkter Bilder. Ich möchte, dass die Bilder nicht unmittelbar aneinandergrenzen, sondern jeweils ein kleiner Freiraum zwischen ihnen besteht. Dafür gibt es ja sehr viele Möglichkeiten. Als recht wenig elegant empfinde ich es mit aneinandergereiten   zwischen den einzelnen <img>-Tags zu arbeiten. Bei hspace="10" innerhalb des <img>-Tags entsteht ein Abstand sowohl links als auch rechts des Bildes, das Bild ganz links wird dadurch also eingerückt. Das möchte ich ebenfalls nicht. Mit style="margin-right: 10px;" innerhalb des <img>-Tags klappt es im Prinzip. Allerdings wird hier, wie auch bei hspace="10", der geschaffene Whitespace mit verlinkt, was leider ebenfalls nicht beabsichtigt ist.

Welche elegante(n) Lösung(en) gibt es für mein Problem?

Alles Gute!

Liebe Grüße
Nick

[Beat]

Welche elegante(n) Lösung(en) gibt es für mein Problem?

Du willst offenbar den Bereich des <a> Elements, und nicht das <img> Elements manipulieren.

mfg Beat;

[Nick]

Du willst offenbar den Bereich des <a> Elements, und nicht das <img> Elements manipulieren.

Nein, eigentlich nicht. Die <img>-Tags liegen aber ja innerhalb der <a>-Tags, weshalb der Whitespace mit verlinkt wird. Ist dementsprechend die einzige Möglichkeit, den Abstand außerhalb der <a>-Tags zu definieren? Also doch mit  ?

[Der Martin]

Hallo,

Du willst offenbar den Bereich des <a> Elements, und nicht das <img> Elements manipulieren.
Nein, eigentlich nicht. Die <img>-Tags ...

Elemente, nicht Tags.

liegen aber ja innerhalb der <a>-Tags, ...

Elemente, nicht Tags.

weshalb der Whitespace mit verlinkt wird. Ist dementsprechend die einzige Möglichkeit, den Abstand außerhalb der <a>-Tags zu definieren?

Elem ... ähm, ja, genau.

Also doch mit &nbsp;?

Nein, wie kommst du darauf? Es geht um Einzelheiten der Darstellung. Und für Darstellung ist CSS zuständig, nicht HTML. Die CSS-Eigenschaft, die den Außenabstand regelt, hattest du doch selbst schon erwähnt. Nur tu dir einen Gefallen und nutze ein zentrales Stylesheet anstelle von inline-Styles.

So long,
 Martin

[Nick]

Elemente, nicht Tags.

Ups, das wusste ich nicht. Habe deine Korrektur zum Anlass genommen mal nachzuschauen und bin dabei auf das hier gestoßen. <img> ist also ein Element, <> und </> sind Tags?

Nein, wie kommst du darauf? Es geht um Einzelheiten der Darstellung. Und für Darstellung ist CSS zuständig, nicht HTML. Die CSS-Eigenschaft, die den Außenabstand regelt, hattest du doch selbst schon erwähnt. Nur tu dir einen Gefallen und nutze ein zentrales Stylesheet anstelle von inline-Styles.

Schien mir das Nächstliegende. Ein zentrales Stylesheet nutze ich bereits. Bist Du so nett und erklärst mir jetzt noch kurz, wie ich das mit margin-right: 10px; umsetzen kann?

[Ingo Turski]

Hi,

<img> ist also ein Element, <> und </> sind Tags?

nein. das Element ist img und der tag ist <img> und </img> bzw. <img />, da es sich um ein leeres Element handelt.

Bist Du so nett und erklärst mir jetzt noch kurz, wie ich das mit margin-right: 10px; umsetzen kann?

Wo siehst Du ein Problem, diese Eigenschaft a zuzuweisen?

freundliche Grüße
Ingo

[Nick]

Guten Morgen,

nein. das Element ist img und der tag ist <img> und </img> bzw. <img />, da es sich um ein leeres Element handelt.

Hmm, so habe ich es doch in meinem Ausgangsbeitrag auch verwendet, oder nicht?

Wo siehst Du ein Problem, diese Eigenschaft a zuzuweisen?

Nirgends mehr. :-)

Liebe Grüße
Nick

[Der Martin]

Hallo,

Elemente, nicht Tags.
Ups, das wusste ich nicht. [...] <img> ist also ein Element, <> und </> sind Tags?

nein, da hast du deine gute Quelle anscheinend missverstanden.

<a href="image4.html"><img src="image4mini.jpg" alt="Bild4"></a>

Hier haben wir einen HTML-Ausschnitt, der zwei Elemente definiert: Ein a-Element, und darin eingeschlossen ein img-Element. Er enthält aber drei Tags: Ein öffnendes Tag für das a-Element, ein Tag für das leere img-Element, und ein schließendes Tag für das a-Element.
Vereinfacht gesagt: Von Elementen reden wir, wenn es um die Interpretation, letztendlich um die Anzeige eines HTML-Dokuments geht. Von Tags reden wir, wenn wir die Bezeichnungen der Elemente im Quelltext meinen.

Ein zentrales Stylesheet nutze ich bereits. Bist Du so nett und erklärst mir jetzt noch kurz, wie ich das mit margin-right: 10px; umsetzen kann?

Hmm, ich verstehe im Moment nicht, worin deine Schwierigkeiten bestehen. Werde bitte etwas präziser.

So long,
 Martin

[Nick]

Guten Morgen,

nein, da hast du deine gute Quelle anscheinend missverstanden.

Ich nehme an, das "gute Quelle" war ironisch gemeint?

<a href="image4.html"><img src="image4mini.jpg" alt="Bild4"></a>

Hier haben wir einen HTML-Ausschnitt, der zwei Elemente definiert: Ein a-Element, und darin eingeschlossen ein img-Element. Er enthält aber drei Tags: Ein öffnendes Tag für das a-Element, ein Tag für das leere img-Element, und ein schließendes Tag für das a-Element.

Demnach war doch meine Formulierung richtig:

ein Tag für das leere img-Element

<img>-Tag

Vereinfacht gesagt: Von Elementen reden wir, wenn es um die Interpretation, letztendlich um die Anzeige eines HTML-Dokuments geht. Von Tags reden wir, wenn wir die Bezeichnungen der Elemente im Quelltext meinen.

Ich meinte doch die Bezeichnung des Elementes im Quelltext. Oder bin ich jetzt total durcheinander?

Hmm, ich verstehe im Moment nicht, worin deine Schwierigkeiten bestehen. Werde bitte etwas präziser.

Mir war wohl irgendwie noch nicht klar, dass ich einfach dem <a>-Tag/-Element/-was-auch-immer die entsprechende Eigenschaft zuweisen muss. Ich habe es aber mittlerweile hinbekommen und es funktioniert. Vielen Dank dafür! Allerdings ist der Rahmen, der beim Anklicken des Bildes ensteht, zumindest im Fx, nach Zuweisung der margin-right-Eigenschaft minimal (beinahe unmerklich) nach unten ausgedehnt. Woran das liegt, keine Ahnung!?

Liebe Grüße
Nick

[Gernot Back]

Hallo Nick,

Du willst offenbar den Bereich des <a> Elements, und nicht das <img> Elements manipulieren.

Nein, eigentlich nicht.

Doch!

Die <img>-Tags liegen aber ja innerhalb der <a>-Tags, weshalb der Whitespace mit verlinkt wird. Ist dementsprechend die einzige Möglichkeit, den Abstand außerhalb der <a>-Tags zu definieren? Also doch mit  ?

Wundert dich das? Warum gibst du die Außenabstands-Eigenschaft denn den im Link enthaltenen IMG-Elementen und nicht den A-Elementen, wenn der Zwischenraum nicht mitverlinkt werden soll?

Gruß Gernot

[Nick]

Hallo Gernot,

Doch!

Hast ja recht. :-)

Wundert dich das? Warum gibst du die Außenabstands-Eigenschaft denn den im Link enthaltenen IMG-Elementen und nicht den A-Elementen, wenn der Zwischenraum nicht mitverlinkt werden soll?

Inzwischen nicht mehr. Ist ja mittlerweile geschehen. :-)

Liebe Grüße
Nick

[Joachim]

Hi,

Als recht wenig elegant empfinde ich es mit aneinandergereiten &nbsp; zwischen den einzelnen <img>-Tags zu arbeiten.

wer würde das auch tun wollen?

Welche elegante(n) Lösung(en) gibt es für mein Problem?

Eine Liste von Bildern - genau darum handelt es sich - erstellst Du mit dem ul-Element. Nebeneinander legst Du sie mir der float-Eigenschaft für die li-Elemente. Die Abstände erzeugst Du mit der margin-Eigenschaft wahlweise für li oder img.

Gruesse, Joachim

[Nick]

Guten Morgen,

wer würde das auch tun wollen?

Vermutlich niemand. :-)

Eine Liste von Bildern - genau darum handelt es sich - erstellst Du mit dem ul-Element. Nebeneinander legst Du sie mir der float-Eigenschaft für die li-Elemente. Die Abstände erzeugst Du mit der margin-Eigenschaft wahlweise für li oder img.

Das hört sich gut an. Meinst du so:

<ul>  
  <li style="float: left; margin-right: 10px"><img src="bild1.jpg" alt="Bild 1"></li>  
  <li style="float: left; margin-right: 10px"><img src="bild2.jpg" alt="Bild 2"></li>  
  <li style="float: left;"><img src="bild3.jpg" alt="Bild 3"></li>  
</ul>

Aber wie kriege ich die Aufzählungspunkte weg?

Liebe Grüße
Nick

[Vinzenz Mai]

Hallo Nick,

Aber wie kriege ich die Aufzählungspunkte weg?

siehe SELFHTML, http://de.selfhtml.org/css/eigenschaften/listen.htm@title=Listenformatierung.

Freundliche Grüße

Vinzenz

[Nick]

Hallo Vinzenz,

siehe SELFHTML, http://de.selfhtml.org/css/eigenschaften/listen.htm@title=Listenformatierung.

Vielen Dank! Lässt sich die Einrückung denn auch unterbinden?

Liebe Grüße
Nick

[Ingo Turski]

Hi,

Vielen Dank! Lässt sich die Einrückung denn auch unterbinden?

natürlich. Sowohl ul als auch li können voreingestellte Werte für margin und/oder padding haben. Diese kannst Du ändern.

freundliche Grüße
Ingo

[Nick]

natürlich. Sowohl ul als auch li können voreingestellte Werte für margin und/oder padding haben. Diese kannst Du ändern.

Danke!

[Gernot Back]

Hallo Joachim,

Eine Liste von Bildern - genau darum handelt es sich - erstellst Du mit dem ul-Element. Nebeneinander legst Du sie mir der float-Eigenschaft für die li-Elemente.

Warum sollte es sich gleich jedesmal, wenn ich mehrere Bilder im Quellcode direkt aufeinander folgen lasse, um eine "Liste von Bildern" handeln?

Man denke in diesem Zusammenhang auch einmal an die beliebten Smiley-Grafiken, die man mitten in den Fließtext platziert!

Deiner Logik folgend dürfte es ja dann auch keine sonstigen Aufzählungen im Fließtext geben, wie etwa solche, die nur durch Kommas und "und" getrennt sind, da es sich strukturell ("semantisch") ja um eine Liste handeln würde, die man ja immer noch mit display:inline formatieren könnte.

Ein Satz wie: "Ich packe in meinen Koffer eine Zahnbürste, ein Handtuch, eine Unterhose und einen Rasierapparat", müsste dann wie folgt ausgezeichnet werden:

  
<p>Ich packe in meinen Koffer</p>  
<ul>  
   <li>eine Zahnbürste,</li>  
   <li>ein Handtuch,</li>  
   <li>eine Unterhose</li>  
   <li>und einen Rasierapparat.</li>  
</ul>.

Der erste Teil des Satzes "ich packe in meinen Koffer" würde dann verwaist in einem eigenen/anderen Absatz (P-Element) stehen und die Liste außerhalb.

Das kann es ja wohl auch nicht sein!

Gruß Gernot

[Beat]

Eine Liste von Bildern - genau darum handelt es sich - erstellst Du mit dem ul-Element. Nebeneinander legst Du sie mir der float-Eigenschaft für die li-Elemente.

Warum sollte es sich gleich jedesmal, wenn ich mehrere Bilder im Quellcode direkt aufeinander folgen lasse, um eine "Liste von Bildern" handeln?

Im Grunde geht es gar nicht um Bilder, sondern um Links, deren Inhalt Bilder sind. Das sollte man also von der Seite behandeln.
Links lieben es, wenn sie in einem navigierbaren Kontext stehen.

mfg Beat

[Nick]

Im Grunde geht es gar nicht um Bilder, sondern um Links, deren Inhalt Bilder sind. Das sollte man also von der Seite behandeln.
Links lieben es, wenn sie in einem navigierbaren Kontext stehen.

Seit wann können Links lieben?