SRC von <IMG> für Klasse fix definieren

[Michael S.]

Ich suche eine Möglichkeit in CSS eine Klasse so zu definieren das ich damit die SRC-Angabe eine <IMG>-Tags einsparen kann, mit der Grösse klappt das auch bestens, nur für SRC scheint es keine Entsprechung in CSS zu geben?

Ich benutze in etwa so etwas:
.MYCLASS { WIDTH:9px; HEIGHT:7px; }

Und im HTML dann:
<IMG SRC="/images/bild.gif" CLASS="MYCLASS">

Nun möchte ich aber das SRC-Attribute einsparen, da ich die gleiche Grafik sehr oft anzeigen will, also im HTML gerne ein simples <IMG CLASS="MYCLASS"> hätte. Kann mir jemand einen Tip geben?

Und gibt es in CSS eigentlich keine Entsprechung für die TABLE-Attribute CELLPADDING und CELLSPACING?

Gruss
Michael

[wahsaga]

hi,

Ich suche eine Möglichkeit in CSS eine Klasse so zu definieren das ich damit die SRC-Angabe eine <IMG>-Tags einsparen kann, mit der Grösse klappt das auch bestens, nur für SRC scheint es keine Entsprechung in CSS zu geben?

Natürlich nicht.
Ein Bild in HTML gehört zum Inhalt, und Inhalt ist HTML.
CSS ist Darstellung.

Nun möchte ich aber das SRC-Attribute einsparen, da ich die gleiche Grafik sehr oft anzeigen will, also im HTML gerne ein simples <IMG CLASS="MYCLASS"> hätte. Kann mir jemand einen Tip geben?

Wenn das Bild keinen Inhalt transportiert, sondern lediglich Verzierung darstellt - dann setze es als Hintergrundbild im HTML vorhandener Elemente ein.

gruß,
wahsaga

[Michael S.]

Natürlich nicht.
Ein Bild in HTML gehört zum Inhalt, und Inhalt ist HTML.
CSS ist Darstellung.

Ja, klar, ich "missbrauche" CSS hier ein wenig :)

Wenn das Bild keinen Inhalt transportiert, sondern lediglich Verzierung darstellt - dann setze es als Hintergrundbild im HTML vorhandener Elemente ein.

Nein, ist kein Inhalt, nur Verzierung (selbstgepinselte Rahmen und so Zeugs). Hm, der Gedanke mit Background klingt gut, ich probiers mal mit sowas: .MYCLASS { BACKGROUND:URL(\images\bild.gif); WIDTH:9px; HEIGHT:7px; } und nehm als HTML Element einfach ein <DIV CLASS="MYCLASS"> her? Das probier ich grad mal aus, Danke!

Gruss
Michael

[Der Martin]

Hallo,

ich probiers mal mit sowas: .MYCLASS { BACKGROUND:URL(\images\bild.gif); WIDTH:9px; HEIGHT:7px; }

nein, nimm als Trennzeichen bitte einen "richtigen" Slash '/', den Backslash verstehen ausschließlich Windows-Browser - und von denen wahrscheinlich sogar nur der IE. Und der hat mit richtigen Pfad-Trennzeichen auch kein Problem.

und nehm als HTML Element einfach ein <DIV CLASS="MYCLASS"> her?

Gibt dein HTML-Code nicht ein strukturell sinnvolleres Element her, das ohnehin vorhanden ist? Es widerstrebt mir, für optische Effekte extra zusätzliche div-Elemente einzubauen.

Und dann noch ein Punkt zur Ästhetik: Es ist üblich, HTML-Tags und Attribute sowie CSS-Eigenschaften und -werte klein zu schreiben; in XHTML ist das sogar vorgeschrieben. Auch Klassennamen in Großbuchstaben sind eher ungewöhnlich. Deine durchgehende Großschreibung fällt da aus dem Rahmen.

Ciao,
 Martin

[Gunnar Bittersmann]

Hello out there!

Und dann noch ein Punkt zur Ästhetik: Es ist üblich, HTML-Tags und Attribute sowie CSS-Eigenschaften und -werte klein zu schreiben;

In der HTML-Spezifikation sind Elementbezeichner (diese meintest du mit „Tags“??) durchgängig großgeschrieben.

in XHTML ist das sogar vorgeschrieben.

Was hat XHTML mit CSS-Eigenschaften und -werten zu tun? :-b

Auch Klassennamen in Großbuchstaben sind eher ungewöhnlich.

Ich schreibe Klassennamen i.d.R. mit großem Anfangsbuchstaben, das erleichtert die Unterscheidung von IDs: <element id="foo" class="Bar">

See ya up the road,
Gunnar

[Der Martin]

Hallo Gunnar,

In der HTML-Spezifikation sind Elementbezeichner (diese meintest du mit „Tags“??) ...

ja, die meinte ich - ich habe aber eigentlich immer das gesamte Gebilde vor Augen, also das öffnende '<', den Elementbezeichner, wenn du ihn unbedingt so nennen willst (für mich ist das der Tagname), und das schließende '>'.

... durchgängig großgeschrieben.

Ich weiß. In der praktischen Anwendung da draußen ist die Großschreibung dennoch unüblich.

in XHTML ist das sogar vorgeschrieben.
Was hat XHTML mit CSS-Eigenschaften und -werten zu tun? :-b

Mit CSS-Eigenschaften nichts - mit den davor genannten HTML-Tags und Attributen dagegen sehr viel.

Auch Klassennamen in Großbuchstaben sind eher ungewöhnlich.
Ich schreibe Klassennamen i.d.R. mit großem Anfangsbuchstaben, das erleichtert die Unterscheidung von IDs: <element id="foo" class="Bar">

Okay, kann man natürlich machen - ich halte solche Regeln aber für unnötig, wenn man "sprechende" Bezeichner verwendet. Diese Ansicht vertrete ich auch bei der Wahl von Bezeichnern (Funktionen, Variablen) in Programmiersprachen.

Ciao,
 Martin

[Gunnar Bittersmann]

Hello out there!

Ich schreibe Klassennamen i.d.R. mit großem Anfangsbuchstaben,

Okay, kann man natürlich machen - ich halte solche Regeln aber für unnötig, wenn man "sprechende" Bezeichner verwendet. Diese Ansicht vertrete ich auch bei der Wahl von Bezeichnern (Funktionen, Variablen) in Programmiersprachen.

Ist es da nicht auch üblich, Bezeichner von Objekttypen groß zu schreiben und Bezeichner von Instanzen klein?

See ya up the road,
Gunnar

[Der Martin]

Hi,

[...] in Programmiersprachen.
Ist es da nicht auch üblich, Bezeichner von Objekttypen groß zu schreiben und Bezeichner von Instanzen klein?

ja, es gibt Leute, die das so sehen. Ist aber IMHO vor allem eine Frage des persönlichen Geschmacks.
In C schreibe ich z.B. Typennamen und Konstanten grundsätzlich in Großbuchstaben und Variablen- oder Funktionsnamen in alltagsüblicher gemischter Schreibweise (nicht konsequent klein), bei CamelCase auf jeden Fall auch mit großem Anfangsbuchstaben. Aber Konventionen wie z.B. Prefixes, die den Datentyp angeben, vor Variablenbezeichner zu kleistern, mag ich nicht und wende sie dementsprechend auch nicht an.

So long,
 Martin

[afra]

Hallo!

Nun möchte ich aber das SRC-Attribute einsparen, da ich die gleiche Grafik sehr oft anzeigen will, also im HTML gerne ein simples <IMG CLASS="MYCLASS"> hätte. Kann mir jemand einen Tip geben?

Wenn Du mittes CSS Bilder darstellen willst, dann arbeite mit einem Blockelement dem Du eine Hintergrundgrafik gibst.

Und gibt es in CSS eigentlich keine Entsprechung für die TABLE-Attribute CELLPADDING und CELLSPACING?

Doch, gibt es. Du kannst Hier schauen: Tabellen oder Dich mit Padding und Margin beschäftigen.

Schönen Gruß

Afra

[Michael S.]

Danke für den Hinweis auf das Padding, ich hatte schon mal geschaut, aber eben unter Tabellenformatierung gesucht und da leider nichts passendes gefunden. Damit komme ich weiter!

Danke
Michael

[Inita]

kannst du dein img vor dem text legen, ist auch mega gut, wenn du ein zB menu machst.

<ul>
  <li style="background:url(bullet1.gif) 5px no-repeat;list-style:none;padding:0 0 0 20px">Home</li>
  <li style="background:url(bullet1.gif) 5px no-repeat;list-style:none;padding:0 0 0 20px">Fotos</li>
</ul>

oder

<div style="background:url(bullet1.gif) 5px no-repeat;padding:0 0 0 20px">Home</div>

mein bullet1.gif ist height:5px;width:5px, style inhalt leg in einer class und so isses.

LG Inita

[Gunnar Bittersmann]

Hello out there!

<ul>
  <li style="background:url(bullet1.gif) 5px no-repeat;list-style:none;padding:0 0 0 20px">Home</li>
  <li style="background:url(bullet1.gif) 5px no-repeat;list-style:none;padding:0 0 0 20px">Fotos</li>
</ul>

Styleangaben inline in 'style'-Attributen sind Unfug. Und wenn für mehrere Elemente desselben Typs dieselben Angaben gemacht werden sollen, dann sind sie grober Unfug.

Richtig[tm] sähe das Beispiel so aus:

HTML:

<ul>  
  <li>Home</li>  
  <li>Fotos</li>  
</ul>

CSS:

li {  
  background:url(bullet1.gif) 5px no-repeat;  
  list-style:none;  
  padding:0 0 0 20px;  
}

See ya up the road,
Gunnar

[Inita]

jaa klar, das wars nur ein beispiel, muss man ne .class machen oder so in li{} definieren, habs am ende meiner posting geschrieben ;)
danke aber!

[Gunnar Bittersmann]

Hello out there!

jaa klar, das wars nur ein beispiel, muss man ne .class machen

Nicht, wenn man Selektoren sinnvoll anzuwenden weiß.

In dem Zusammenhang ist der Nachfajrenselektor interessant: <http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Formate für verschachtelte HTML-Elemente definieren>

See ya up the road,
Gunnar