Ist <br /> zum Bildabstand korrekt?

[Dmitri Rettig]

Hallo,

ich habe diese Nachricht schon einmal abgeschickt. Allerdings habe ich den Tab ohne auf die Servar-Antwort zu warten geschlossen. Aber vielleicht taucht meine erste Nachricht irgendwann auf.

Ich habe ein Logo in einem Navigationsframe:

<img src="logo.gif" style="width:100px; height:100px; border-width:1px; border-style:solid; border-color:#000000; margin:0px;" alt="logo" />
<br />
Text + Links

ist dieses <br /> korrekt, oder soll ich mit margin-bottom arbeiten? Und wenn ich dies tun soll, brauche ich dann <br clar="all" /> für einen Zeilenumbruch nach dem <img ... >-Tag zu notieren. Der Frame ist so schmal, dass nach dem Bild kein Text auf die gleiche Zeile passt und es geschieht ein automatischer Zeilenumbruch.

MfG Dmitri

[molily]

Hallo, Dmitri,

<img src="logo.gif" style="width:100px; height:100px; border-width:1px; border-style:solid; border-color:#000000; margin:0px;" alt="logo" />
<br />
Text + Links

ist dieses <br /> korrekt, oder soll ich mit margin-bottom arbeiten?

Meines Erachtens ist der manuelle Zeilenumbruch hier völlig legitim. margin-bottom würde ich jedoch nicht auf das img-Element anwenden. Logischer wäre ein <p style="margin-bottom:...;"><img src="logo.png" ... /></p> und entsprechende margins beim Textabsatz darunter.
Btw, alt- und title-Attribut kann man auch aussagekräftiger setzen.

Und wenn ich dies tun soll, brauche ich dann <br clar="all" /> für einen Zeilenumbruch nach dem <img ... >-Tag zu notieren.

Soweit ich weiß, nein. clear - hier bitte übrigens das CSS-Äquivalent http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#clear anstelle des HTML-Attributes verwenden - ist nur
in Zusammenhang mit float http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float zu verwenden. Zwischen clear und margin besteht jedoch nicht der Zusammenhang, den du dir vielleicht vorstellst. Ich kann auch nicht nachvollziehen, wieso man in diesem Fall float verwenden sollte, das wäre vielleicht interessant, wenn du auf ein CSS-Layout umsteigst. :)

Der Frame ist so schmal, dass nach dem Bild kein Text auf die gleiche Zeile passt und es geschieht ein automatischer Zeilenumbruch.

Selbst wenn das der Fall ist, würde ich mich nicht darauf verlassen und durch <br /> oder besser <p><img /></p> einen Umbruch erzwingen. Womöglich kommt ein Benutzer über eine Suchmaschine direkt auf das Navigationsframe und findet die Grafik umgeben von Links vor.

Mathias

[Dmitri Rettig]

Hallo,

<img src="logo.gif" style="width:100px; height:100px; border-width:1px; border-style:solid; border-color:#000000; margin:0px;" alt="logo" />
<br />
Text + Links

ist dieses <br /> korrekt, oder soll ich mit margin-bottom arbeiten?

Meines Erachtens ist der manuelle Zeilenumbruch hier völlig legitim.

margin-bottom würde ich jedoch nicht auf das img-Element anwenden.

Warum nicht? Steht das irgendwo auf den W3C Seiten? Schilesslich hat man früher auch vspace und hspace benutzt.

Logischer wäre ein <p style="margin-bottom:...;"><img src="logo.png" ... /></p> und entsprechende margins beim Textabsatz darunter.

Btw, alt- und title-Attribut kann man auch aussagekräftiger setzen.

Wenn schon nicht im <img>, dann in <div>, aber bestimmt nicht in <p>.

Zwischen clear und margin besteht jedoch nicht der Zusammenhang, den du dir vielleicht vorstellst. Ich kann auch nicht nachvollziehen, wieso man in diesem Fall float verwenden sollte, das wäre vielleicht interessant, wenn du auf ein CSS-Layout umsteigst. :)

Wie meinst du das? "CSS-Layout"?

MfG Dmitri

[molily]

Hallo, Dmitri,

margin-bottom würde ich jedoch nicht auf das img-Element anwenden.
Warum nicht? Steht das irgendwo auf den W3C Seiten? Schilesslich hat man früher auch vspace und hspace benutzt.

Naja, zuerst einmal müssen laut W3C-Spezifikation alle Inline-Elemente und Textanker in Blockelementen untergebracht sein, die strukturierend wirken. Und wenn ich mir deine Vorgabe anschaue:

[Bild]
  (Absatz/Umbruch/ein fest definierter Abstand)
[Text + Links]

Würde ich das intuitiv so umsetzen:

<p>[Bild (img-Element)]</p>
<p>[Text + Links]</p>

Wobei den p-Elemente jeweils die gewünschten Ränder/Außenabstände zugeordnet werden.

Logischer wäre ein <p style="margin-bottom:...;"><img src="logo.png" ... /></p> und entsprechende margins beim Textabsatz darunter.

Wenn schon nicht im <img>, dann in <div>, aber bestimmt nicht in <p>.

Jein - ob man hier ein div oder p benutzt, ist pragmatisch gesehen völlig egal, denn man kann auf beide dieselben margin-Eigenschaften anwenden. Da div aber nur einen Bereich definiert und demnach in den meisten Browsern nur einen simplen Zeilenumbruch auslöst (plus margin natürlich), würde ich für die Verwendung des p-Elements plädieren. p steht für Paragraph/Absatz und ist im Gegensatz zum div-Element brauchbarer, um die Struktur der Seite zu beschreiben. Dadurch würden auch bspw. Textbrowser den Aufbau der Seite nachvollziehen können und einen Abstand zwischen Logo und Text/Links anzeigen.
Ich ging davon aus, dass du die Seite sowieso mit Blockelementen strukturierst, deswegen schlug ich vor, die margin für das die Grafik umgebende Blockelement zu notieren - sei es nun div oder p.

Ich habe alle drei Möglichkeiten noch einmal ausprobiert: ob <br /> und margin-bottom beim img, ob div mit margin-bottom oder ob p mit margin-bottom und margin-top - das Ergebnis ist dasselbe, der Abstand lässt sich einfach regeln. Ich persönlich finde aus den genannten Gründen die Variante mit dem p-Element am besten.

Wie meinst du das? "CSS-Layout"?

Anstatt Tabellenlayout oder einem Seitenlayout, welches Frames benutzt, kann man mit den CSS-Eigenschaften float (und dann clear) und position ebenso Elemente nebeneinander und voneinander abhängig positionieren; dies ist die Layouttechnik der Zukunft.

Mathias