border im img-Element

[Guillermo]

Hallo.

Ich verwende folgendes Element:

<img src="grafik.png" alt="Alternativtext" title="Titel" height="100" width="50" style="border:10px; margin:1px;" />

Weder im Konqueror noch im Mozilla (andere Navigatoren habe ich nicht getestet) wird ein Rahmen angezeigt. Das border-Attribut möchte ich vermeiden. Wie kann ich einen sichtbaren Rahmen der Breite 10 erzeugen?

Noch was: Glaubt Ihr, dass das Element so "zukunftstauglich" ist? Sprich: Wäre es nicht sogar "sauberer" für die Trennung von html und Gestaltung, wenn ich height und width ins CSS mit reinnehme?

Grüße
Guillermo

[Siechfred]

Hallöle,

[...] style="border:10px; margin:1px" [...]

Du musst dem Browser nicht nur sagen, wie dick der Rahmen sein soll, sondern auch, welchen Stil und welche Farbe (http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm#border).

Viele Grüße
Torsten

[Guillermo]

Du musst dem Browser nicht nur sagen, wie dick der Rahmen sein soll, sondern auch, welchen Stil und welche Farbe

Danke! Reicht bei nicht sichtbaren Rahmen die Angabe "border:0px", also ohne Stil und Farbe, wenn es also nur darum geht einen Rahmen zu unterdrücken, wie er glaube ich im NE4.7 angezeigt wird?

[molily]

Hallo,

Reicht bei nicht sichtbaren Rahmen die Angabe "border:0px", also ohne Stil und Farbe, wenn es also nur darum geht einen Rahmen zu unterdrücken,

Ja, das ist äquivalent zu border-width:0 bzw. border-style:none bzw. doppelt gemoppelt border:0 none. Wenn border-style:none gilt, sind border-width und border-color sowieso irrelevant.
Die Angabe einer Einheit ist beim Wert 0 vernachlässigbar.

wie er glaube ich im NE4.7 angezeigt wird?

Verschiedene Schiffer zeigen einen Rahmen um eine Grafik, welche als Teil eines Links fungiert, so auch Netscape 4.x. Mit border-style:none kann dieser Rahmen in diesen Netscape-Seemännern nicht deaktiviert werden.

Mathias

[Guillermo]

Verschiedene Schiffer zeigen einen Rahmen um eine Grafik, welche als Teil eines Links fungiert, so auch Netscape 4.x. Mit border-style:none kann dieser Rahmen in diesen Netscape-Seemännern nicht deaktiviert werden.

So,

Ich habe mal selbst verschiedene Stylesheet-Varianten ausprobiert, um einen sichtbaren Rahmen zu unterdrücken und in verschiedenen Navigatoren (Windows: Opera5/IE5/NE4.7, Linux: Konq3.1.0/Mozilla1.0.1/Opera6.03) getestet. Hier mein Ergebnis:

<a href="http://..."><img src="grafik.png" alt="" /></a> (Voreinstellung ohne CSS)
Im Mozilla und NE4.7 wird ein 1-Pixel-Rahmen angezeigt.

<a href="http://..."><img src="grafik.png" alt="" border="0" /></a>
In keinem Navigator wird ein Rahmen angezeigt.

<a href="http://..."><img src="grafik.png" alt="" style="border:0px;" /></a>
<a href="http://..."><img src="grafik.png" alt="" style="border-style:none;" /></a>
<a href="http://..."><img src="grafik.png" alt="" style="border-width:0;" /></a>
Im NE4.7 wird leider ein 1-Pixel-Rahmen angezeigt, in den anderen nicht.

Resümee: Nur mit dem Attribut border="0" erreicht man die Unterdrückung des Rahmens. Dieses ist als deprecated bezeichnet.
M. E. der NE4.7 aber auch (-:

Wenn man also überall den Rahmen unterdrücken will, muss man wohl oder übel das border-Attribut verwende.

Grüße
Guillermo

[HarryS]

Hallo Guillermo,

Ich verwende folgendes Element:

<img src="grafik.png" alt="Alternativtext" title="Titel" height="100" width="50" style="border:10px; margin:1px;" />

Weder im Konqueror noch im Mozilla (andere Navigatoren habe ich nicht getestet) wird ein Rahmen angezeigt. Das border-Attribut möchte ich vermeiden. Wie kann ich einen sichtbaren Rahmen der Breite 10 erzeugen?

Nun Du schreibst zwar "border:10px;... aber weiche art und welche farbe soll der arme browser denn verwenden? Bevor er was falsches macht zeigt er eben nix an. Tipp:http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm

Noch was: Glaubt Ihr, dass das Element so "zukunftstauglich" ist? Sprich: Wäre es nicht sogar "sauberer" für die Trennung von html und Gestaltung, wenn ich height und width ins CSS mit reinnehme?

Es spricht IMHO überhaubt nix dagegen die Imagegröße mit CSS anzugeben.

Grüße aus Nürnberg,
HarryS

[Guillermo]

Es spricht IMHO überhaubt nix dagegen die Imagegröße mit CSS anzugeben.

Danke. M. E. ist es nämlich sauberer. Dann wäre es ja nur konsequent es auch zu machen, oder hat jemand noch Argumente dagegen?

[molily]

Hallo,

Es spricht IMHO überhaubt nix dagegen die Imagegröße mit CSS anzugeben.

Danke. M. E. ist es nämlich sauberer. Dann wäre es ja nur konsequent es auch zu machen, oder hat jemand noch Argumente dagegen?

Welche Vorteile erhoffst du dir durch diese »Sauberkeit«?

Eine mit img eingebundene (Pixel-)Grafik wird mit width- und height-Attributen versehen, damit der Browser beim Verarbeiten und Zusammensetzen des Layouts sofort weiß, wie groß der der Grafik zur Verfügung stehende Bereich sein muss. Dadurch wird verhindert, dass die Anzeige während des Ladens mehrfach »springt«, weil die Größe einer Grafik nicht bekannt war und demnach nicht reserviert werden konnte. Wenn diese Informationen hingegen im externen Stylesheet untergebracht werden, muss beim Visualisieren der Grafik bereits die betreffende CSS-Regel interpretiert worden sein, damit beim Bildaufbau bereits die richtige Größe reserviert werden kann. Bei einigen Browsern bzw. Seitenlayouts und Stylesheets wirkt sich das tatsächlich negativ aus. Während Stylesheets optional sind, werden die HTML-Größenangaben auch interpretiert, wenn Stylesheets deaktiviert bzw. nicht verfügbar sind.

Da es dir vermutlich nicht um CSS über das style-Attribut geht, hängt es immer von der kompletten Site ab, wie rationalisiert die Größen von Bildern in externen Stylesheets ausgelagert werden können. Wenn es sich um in mehreren Dokumenten wiederkehrende Bilder handelt, können sie durchaus entweder mit IDs oder Klassen, sofern sie je mehrfach im Dokument auftauchen, ausgezeichnet und darüber im Stylesheet angesprochen werden. Das Stylesheet kann gecacht werden. Bei vielen Dokumenten mit siteweit einzigartigen Bildern hingegen ist es nicht sinnvoll, sie mit IDs zu bestücken und die zugehörigen Regeln im global-zentralen Stylesheet unterzubringen. Hier wäre ein style-Element im head angemessen, was wiederum letztlich genausoviel Dezentralisierung der Formatierungen bedeutet wie HTML-Größenangaben. Einfache Wartbarkeit hat diese Trennung somit meistens nicht zur Folge.

Viel interessanter fände ich die Frage, ob img überhaupt das passende Element ist, um Bilder einzubinden. Aber das ist eine theoretische Debatte.

Mathias