Quelltext Strukturierung und Auswirkung auf die Anzeige

[Anja]

Hallo zusammen,

wie kann ich vermeiden, dass Leerzeichen, Tabulatoren und Zeilenumbrüche im Quelltext sich auf das Aussehen der Seite auswirken?

Ich habe folgenden Code:

<a style="background-color: red;" href="">
  <img src="../img/bild.gif">
</a>

<a style="background-color: red;" href=""><img src="../img/bild.gif"></a>

Es handelt sich dabei um den gleichen Link. Beim ersten Link wird rechts und unter dem Bild die rote Hintergrundfarbe des a-Tags sichtbar.

Der Grund dafür liegt in der Strukturierung meines Quellcodes.
Die CSS-Eigenschaft white-space habe ich bereits untersucht, aber ohne Erfolg.

Weiss vielleicht jemand von Euch wie ich dieses Problem vermeiden kann?

Hintergrund der Frage: ich erstelle Templates und kann somit nicht sicherstellen, dass die Nutzer dieser Templates den Link nicht mal ohne und mal mit Zeilenumbrüchen im Quellcode verwenden.

Danke im Voraus
Gruss
Anja

[Till]

Hallo Anja,

das hört sich stark nach dem "Unterhöhen Problem" an.

- Till

[Anja]

Hallo Till,

das hört sich stark nach dem "Unterhöhen Problem" an.

Was bedeutet das genau? Hast Du den Quelltext mal bei Dir ausprobiert? Was kommt dabei raus?

Gruss
Anja

[Till]

Anja,

lass das Bild als Block anzeigen (display: block;).

- Till

[Gernot Back]

Hallo Till,

Anja,

lass das Bild als Block anzeigen (display: block;).

Aber dann hat Anja faktisch ein Blockelement in einem Inline-Element, das ist doch verboten, oder?

Sie könnte natürlich beides zu Blockelementen machen:

  
a, img {  
  display:block;  
}

aber ob das in Anjas Sinne ist? Also da nähme ich einen nicht so wohlgeformten Quellcode, bei dem das schließende </a>-Tag direkt hinter dem Bild kommt, eher in Kauf.

Gruß Gernot

[Jens Holzkämper]

Tach,

Aber dann hat Anja faktisch ein Blockelement in einem Inline-Element, das ist doch verboten, oder?

nein es gibt nur eine Beschränkung in HTML, jedoch keine, was die Darstellung angeht.

mfg
Woodfighter

[MudGuard]

Hi,

Aber dann hat Anja faktisch ein Blockelement in einem Inline-Element, das ist doch verboten, oder?

Aus HTML-Sicht ist img nach wie vor ein inline-Element. Daran ändert CSS überhaupt nichts.

cu,
Andreas

[Utz]

Hallo,

<a style="background-color: red;" href="">
  <img src="../img/bild.gif">
</a>

Hier hast Du vor und nach dem Bild je noch ein Leerzeichen, für das der Link auch gilt, und das mitformatiert wird.

<a style="background-color: red;" href=""><img src="../img/bild.gif"></a>

Hier hast Du die Leerzeichen nicht.

Weiss vielleicht jemand von Euch wie ich dieses Problem vermeiden kann?

Indem Du die CSS-Formatierung, die fürs Bild gelten soll, direkt dem Bild mitgibst vielleicht?

<a href="">
  <img src="../img/bild.gif" style="background-color: red;">
</a>

Grüße,
Utz

[Anja]

Hallo Utz,

die rote Hintergrundfarbe soll nur den Abstand veranschaulichen.
Die Abstände würden trotzdem bleiben.

Gruss
Anja

[Ingo Turski]

Hi,

Die Abstände würden trotzdem bleiben.

genau - weil sie im Quelltext stehen. Du wärst sicher verärgert, wenn bei
<a> <img /> </a>
die Leerzeichen ignoriert würden.

freundliche Grüße
Ingo

[Danny]

Hi,

verwende font-size:0, damit wird der Abstand auf ein Minimum reduziert...

freundlichen Gruß
Danny

[Anja]

Danke für die Antworten.
Werde ich gleich mal ein wenig ausprobieren.
Gruss
Anja