images per CSS definieren (ohne Block-Element?)

[Fux]

Hallo,

ich möchte Images (Navigations-Icons u. dgl.) nicht im HTML codieren, sondern extern im CSS-File definieren um das Design wechseln zu können ohne den (servergenerierten) HTML-Code anfassen zu müssen.
Nun gibt es im Web Dutzende von Seiten wo das mit div und background-image gezeigt wird, jedoch ein "kleiner" Haken wird nicht debattiert:
Dass ein Block-Element eine neue Zeile erzwingt - und mit anderen display-Attributen als "block" (also z. B. display:inline oder run-in) funktioniert es nicht (getestet mit Firefox).

Mein CSS:
.linkArrow {
  background-image: url("/img/arr_link4.gif");
  width:5px;
  height:8px;
  margin-right:4px;
}

HTML:
<a href="#verteiler"><div class="linkArrow"></div>Mail-Verteiler</a>

Ist natürlich blöd wenn nach meinem Link-Icon erstmal eine Newline kommt.

Alternativ ginge es mit einem img-Tag, ist allerdings sperriger:
<img class="linkArrow" src="/images/blank.gif" alt="">

Bei src muss ich ein existierendes image angeben (transparentes gif, 1px), sonst funktioniert's nicht.

Also, wie krieg ich's hin?

Danke schonmal!

[henman]

hallo,

<http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=das Pseudoelement :before> sollte dir helfen können

grüße,
henman

[Fux]

Hallo henman,

da das IE bis inkl. Version 7 nicht kann, ist mir das zu heiß.
Der ist doch zu weit verbreitet.

Gruß, Robert

[Jens Müller]

Moin Moin,

Mein CSS:

»»~~~css .linkArrow {

background-image: url("/img/arr_link4.gif");
  width:5px;
  height:8px;
  margin-right:4px;
}

>   
> HTML:  
> `<a href="#verteiler"><div class="linkArrow"></div>Mail-Verteiler</a>`{:.language-html}  
  
Auf die CSS Eigenschaft before: wurdest du ja schon  
hingewiesen. Das funktionierte jedoch nicht in allen Browsern,  
(IE 5, und 6, und 7) deshalb gibt es diesen Workaround.  
  

> Mein CSS:  

»»~~~css
 .linkArrow {  

>   background-image: url("/img/arr_link4.gif");  
>   width:5px;  
>   height:8px;  
>   margin-right:4px;  
> }

HTML:
<a href="#verteiler" class="linkArrow">Mail-Verteiler</a>

Versuchs mal damit, das Block-Element <div> ist hier
völlig überflüssig.

gruesse aus'm ruhrpott
  jens mueller

[Marc]

Hallo Fux und Jens,

Auf die CSS Eigenschaft before: wurdest du ja schon
hingewiesen. Das funktionierte jedoch nicht in allen Browsern,
(IE 5, und 6, und 7) deshalb gibt es diesen Workaround.

Mein CSS:
»»~~~css

.linkArrow {

background-image: url("/img/arr_link4.gif");
  width:5px;
  height:8px;
  margin-right:4px;
}

  
Aber genau das macht in eben den IEs neue Probleme, wenn der Link am Anfang der Zeile beginnt und umbricht. - Da Links in (normalen) Menüs immer am Anfang der Zeile beginnen, spricht gegen einen Einsatz in einem Menü.  
  
Dennoch würde ich das anders aufbauen - wozu die Klasse, die auch noch dämlich benannt ist?  
  
Gerade wenn man CSS mit dem Wunsch eines späteren Redesign einsetzt? - Was willst Du mit einer Klasse linkArrow, wenn das Redesign einen Punkt oder ein Quadrat an dieser Stelle vorsieht? Dann hat man eine Klasse linkArrow, die dafür sorgt, dass Punkte erscheinen - doof oder?  
  
Tipp: Immer logische Namen wählen!  
  
Und warum überhaupt dem Link das Hintergrund-Bild verpassen?  
  
In einem Menü benötigt man nur sehr selten Klassen. I. d. R. reicht eine verschachtelte Liste und die erste Ebene bekommt die id nav. Hier mein Code:  
  
HTML:  
  
~~~html
  
<ul id="nav">  
  <li><a href="#">Link</a></li>  
  [usw...]  
</ul>  

CSS:

  
ul {  
  list-style-image:url([Dateiname])  
}  

Mehr braucht man doch gar nicht?

Versuchs mal damit, das Block-Element <div> ist hier
völlig überflüssig.

Wie so vieles andere auch...

Viele Grüße,
Marc.

[Marc]

Hoppla:

Aber genau das macht in eben den IEs neue Probleme, wenn der Link

[NICHT]

am Anfang der Zeile beginnt UND umbricht. - Da Links in (normalen) Menüs immer am Anfang der Zeile beginnen, spricht

[hier nichts]

gegen einen Einsatz in einem Menü.

[(außer, dass es umständlich ist)]

Viele Grüße,
Marc.

[Gunnar Bittersmann]

@@Fux:

nuqneH

Dass ein Block-Element eine neue Zeile erzwingt - und mit anderen display-Attributen als "block" (also z. B. display:inline oder run-in) funktioniert es nicht (getestet mit Firefox).

Es gibt "inline-block", es gibt 'float'.

Qapla'

[Der Martin]

Hi,

Nun gibt es im Web Dutzende von Seiten wo das mit div und background-image gezeigt wird, jedoch ein "kleiner" Haken wird nicht debattiert:
Dass ein Block-Element eine neue Zeile erzwingt

das kommt ganz drauf an, wie die Verwandtschaftsverhältnisse dieses Elements aussehen. Wenn das Element selbst seine Position und Größe mit CSS (anhand von margins und durch die Nachbarelemente, oder gar durch explizite Positionierung) oder durch die Art der Verschachtelung erhält, ändert auch display:block oft nichts mehr daran.

und mit anderen display-Attributen als "block" (also z. B. display:inline oder run-in) funktioniert es nicht (getestet mit Firefox).

Bei inline-Elementen darf width und height nicht wirken, also ist das Element dann so groß, wie es sein Inhalt erfordert.

.linkArrow {
  background-image: url("/img/arr_link4.gif");
  width:5px;
  height:8px;
  margin-right:4px;
}

<a href="#verteiler"><div class="linkArrow"></div>Mail-Verteiler</a>

Das ist invalides HTML: a-Elemente dürfen keine Blockelemente enthalten. Und wozu überhaupt das div?

<a href="#verteiler" class="linkArrow">Mail-Verteiler</a>

.linkArrow
 { display: block;
   background: #DDF url("/img/arr_link4.gif") no-repeat left;
   padding-left: 5px;
   height: 12px;
   margin-right: 4px;
 }

Ist das nun Teil einer Navigationsliste, sorgen die umschließenden li-Elemente für die richtige Position; befindet sich so ein Link im Fließtext, kann man display: block; auch durch inline-block ersetzen.
Bei der geringen Größe des Pfeil-Bildes würde ich mir sogar überlegen, die Größenangabe für das a-Element ganz wegzulassen (damit habe ich auch keinen Grund für display: block). Ich vertraue darauf, dass niemand ernsthaft die Schrift (Zeilenhöhe) kleiner als 8px einstellt - und wenn, dann nur um einen Überblick über das Gesamtlayout einer große Textmenge zu bekommen, so dass die nicht mehr erkennbaren Verzierungen dann auch keine Rolle spielen. Und linke/rechte paddings und margins darf man auch Inline-Elementen geben.

Ist natürlich blöd wenn nach meinem Link-Icon erstmal eine Newline kommt.

Das ist aber auch ein selten auftretender Fall. Und man kann den Umbruch ja auch mit white-space: pre; (oder nowrap) verhindern, wenn man das unbedingt will.

So long,
 Martin

[Længlich]

Moeo!

Ist das nun Teil einer Navigationsliste, sorgen die umschließenden li-Elemente für die richtige Position; befindet sich so ein Link im Fließtext, kann man display: block; auch durch inline-block ersetzen.
Bei der geringen Größe des Pfeil-Bildes würde ich mir sogar überlegen, die Größenangabe für das a-Element ganz wegzulassen (damit habe ich auch keinen Grund für display: block). […] Und linke/rechte paddings und margins darf man auch Inline-Elementen geben.

Paddings ja, margins sind wirkungslos. Letztere können aber die schon erwähnten li-Elemente übernehmen (bzw. im Fließtext dann eben doch inline-block).

Viele Grüße vom Længlich

[Der Martin]

Hi,

Und linke/rechte paddings und margins darf man auch Inline-Elementen geben.
Paddings ja, margins sind wirkungslos.

danke, das war mir nicht bewusst. Ich dachte, die seitlichen Ränder wären uneingeschränkt wie bei Blockelementen zu stylen.

Letztere können aber die schon erwähnten li-Elemente übernehmen (bzw. im Fließtext dann eben doch inline-block).

Im vorliegenden Fall (Beispiel Fließtext) kann man auf margins auch ganz verzichten, finde ich. Was sollte ein margin-right für ein Element im Fließtext bewirken? Okay, was es bewirken soll, ist klar; aber das würde ja das ganze Schriftbild stören (Abstand). Ich glaube, mit padding-left, um für das Symbol Platz zu machen, ist man da schon gut bedient.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Ich dachte, die seitlichen Ränder wären uneingeschränkt wie bei Blockelementen zu stylen.

Denk das ruhig weiterhin.

Qapla'

[Gunnar Bittersmann]

@@Længlich:

nuqneH

Und linke/rechte paddings und margins darf man auch Inline-Elementen geben.
Paddings ja, margins sind wirkungslos.

Nein. Vertikale sind wirkungslos, horizontale aber wirken. [CSS21 §8.3]

Qapla'

[Der Martin]

Hallo,

Und linke/rechte paddings und margins darf man auch Inline-Elementen geben.
Paddings ja, margins sind wirkungslos.
Nein. Vertikale sind wirkungslos, horizontale aber wirken. [CSS21 §8.3]

genau das hat der Længlich wohl auch gemeint, da er sich auch meinen Satz bezieht, in dem ich ausdrücklich "linke/rechte paddings und margins" nannte.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Und linke/rechte paddings und margins darf man auch Inline-Elementen geben.
Paddings ja, margins sind wirkungslos.
Nein. Vertikale sind wirkungslos, horizontale aber wirken. [CSS21 §8.3]

genau das hat der Længlich wohl auch gemeint, da er sich auch meinen Satz bezieht, in dem ich ausdrücklich "linke/rechte paddings und margins" nannte.

Wohl nicht: „[Linke/rechte] Paddings ja [darf man auch Inline-Elementen geben], [linke/rechte] margins sind [bei Inline-Elementen] wirkungslos.“

Dem ist nicht so.

Qapla'

[Længlich]

Feele bahic!

Und linke/rechte paddings und margins darf man auch Inline-Elementen geben.
Paddings ja, margins sind wirkungslos.
Nein. Vertikale sind wirkungslos, horizontale aber wirken. [CSS21 §8.3]

genau das hat der Længlich wohl auch gemeint, da er sich auch meinen Satz bezieht, in dem ich ausdrücklich "linke/rechte paddings und margins" nannte.

Ups, ja, sehr mißverständlich, das ganze. Gunnar hat natürlich recht, und die Browser machen das auch alle richtig (sogar so alte wie IE6 und FF2, gerade getestet). Bei display:table-cell sind alle margins hinfällig, bei inline nur top und bottom.

Viele Grüße vom Længlich

[Fux]

Hallo zusammen!
Wusste ich doch, dass ich hier ruckzuck hilfreicht Antworten bekomme.
Danke an Alle!

Ich ergänze noch: Soll in jedem Kontext funktionieren, insbes. im Fließtext.

Hier zusammengefasst alle Ergebnisse und Bewertungen:

inline-block wäre die Lösung gewesen (hab ich auf selfthtml-Seite für display nicht wahrgenommen).
Jedoch, jetzt hab ich den Ehrgeiz entwickelt, valide zu codieren.

<a href="#verteiler"><div class="linkArrow"></div>Mail-Verteiler</a>
Das ist invalides HTML: a-Elemente dürfen keine Blockelemente enthalten.

@Jens

<a href="#verteiler" class="linkArrow">Mail-Verteiler</a>
Versuchs mal damit, das Block-Element <div> ist hier völlig überflüssig.

So?? Damit hab ich mein Image unter dem Linktext liegen nicht links davor!
s. u. Demo im Link!

@...
margin-right funktioniert (wie in CSS 2.1 spezifiziert) und das ist auch gut so - dann hab ich die Möglichkeit, bei einem anderen Image auch border und (darinnen) padding zu haben.

@Marc
linkArrow ist dämlich - hast Du recht! besser linkIcon
Das von Dir vorgeschlagene ul kann IMHO so nicht funktionieren (falls Du Dich nicht verschrieben hast). ul gestylet und auf li soll es wirken??

Und hier alle Vorschläge zusammengefasst und meine *** Lösung = button ***!:
http://ai-ti.net/test/images_im_CSS_definiert.html
Ist valide! (bis auf das o. g. div im a-Tag)

Gruß Robert

[Der Martin]

Hallo,

inline-block wäre die Lösung gewesen (hab ich auf selfthtml-Seite für display nicht wahrgenommen).
Jedoch, jetzt hab ich den Ehrgeiz entwickelt, valide zu codieren.

was ist an inline-block invalide?

<a href="#verteiler" class="linkArrow">Mail-Verteiler</a>
Versuchs mal damit, das Block-Element <div> ist hier völlig überflüssig.
So??

Ja.

Damit hab ich mein Image unter dem Linktext liegen nicht links davor!

Nein. Den Linktext hältst du dann mit padding-left auf Abstand, wie ich schon vorgeschlagen hatte.

@Marc
linkArrow ist dämlich - hast Du recht! besser linkIcon
Das von Dir vorgeschlagene ul kann IMHO so nicht funktionieren (falls Du Dich nicht verschrieben hast). ul gestylet und auf li soll es wirken??

Ja, list-style-icon wird an die Kindelemente vererbt.

Und hier alle Vorschläge zusammengefasst und meine *** Lösung = button ***!:

Das ist meiner Ansicht nach semantischer Unsinn.

Ciao,
 Martin

[Fux]

Hallo Martin,

schön, dass Du nochmal vorbei geschaut hast!
Dann machen wir mal weiter.

Hallo,

inline-block wäre die Lösung gewesen (hab ich auf selfthtml-Seite für display nicht wahrgenommen).
Jedoch, jetzt hab ich den Ehrgeiz entwickelt, valide zu codieren.

was ist an inline-block invalide?

Ich meinte das div im a.

Damit hab ich mein Image unter dem Linktext liegen nicht links davor!

Nein. Den Linktext hältst du dann mit padding-left auf Abstand

Ja, sorry, dass padding hatte ich übersehen, hätte es mal mit kopieren versuchen sollen  ;-)

Ja, list-style-icon wird an die Kindelemente vererbt.

Ja, korrekt! Nochmal sorry, hatte falsch gecodet (class/id).

Bin nochmal an den Code gegangen.
http://ai-ti.net/test/images_im_CSS_definiert.html

Meine Lösung sieht jetzt so aus:

  
a.linkIcon {  
  background: url("/images/arr_link_blau.gif") no-repeat left center;  
  padding-left:9px;  
}

padding-left ergibt sich aus der Image-Breite + 4px Leerspace, den ich davor haben will.

Das display:(inline-)block bei Deiner Lösung verhindert, dass ich das Image vertikal mit background-position ausrichten kann.
Das geht wohl indirekt über height, aber da hab ich wieder eine unschöne Beziehung zur Schriftart die an der jeweiligen Stelle verwendet wird.
Oder wie hast Du Dir das gedacht?

Gruß, Robert

[Der Martin]

Hi,

schön, dass Du nochmal vorbei geschaut hast!
Dann machen wir mal weiter.

;-)

was ist an inline-block invalide?
Ich meinte das div im a.

Okay. Missverständnis.

Den Linktext hältst du dann mit padding-left auf Abstand
Ja, sorry, dass padding hatte ich übersehen, hätte es mal mit kopieren versuchen sollen  ;-)

Ja, Copy & Paste, das erfolgreichste Duo seit Smith & Wesson.

a.linkIcon {
  background: url("/images/arr_link_blau.gif") no-repeat left center;
  padding-left:9px;
}

>   
> padding-left ergibt sich aus der Image-Breite + 4px Leerspace, den ich davor haben will.  
  
So hatte ich das eigentlich auch gemeint (ich hatte der Vollständigkeit eine Hintergrundfarbe angegeben, aber wahrscheinlich willst du den Link nicht als farbigen Block sehen).  
  

> Das display:(inline-)block bei Deiner Lösung verhindert, dass ich das Image vertikal mit background-position ausrichten kann.  
  
Ist das tatsächlich so?  .oO(?)  
  

> Oder wie hast Du Dir das gedacht?  
  
Ehrlich gesagt: Gar nicht ...  
  
Ciao,  
 Martin  

-- 
Lieber mit Betty im Wald  
als mit Waldi im Bett.  

[Fux]

Das display:(inline-)block bei Deiner Lösung verhindert, dass ich das Image vertikal mit background-position ausrichten kann.

Ist das tatsächlich so?  .oO(?)

Ja, habs gegengecheckt.
background: ... left center;
und display weg, dann hängt das Image nicht mehr am oberen Rand.
Warum das oben hing ist mir allerdings nicht klar.
Ne kleinere height (12 -> 8px) hat es weiter nach oben gebracht. ???

Ciao, Robert

[Marc]

Hallo Robert,

Wusste ich doch, dass ich hier ruckzuck hilfreicht Antworten bekomme.
Danke an Alle!

Gern geschehen.

Ich ergänze noch: Soll in jedem Kontext funktionieren, insbes. im Fließtext.

Das Problem ist: was soll funktionieren? Wenn dort nur ein Bildchen stehen soll, ist das img-Element die beste Lösung, denn sie funktioniert in jedem Browser und ob Du nun dieses Element oder ein anderes nimmst (egal ob span oder sonst was) ist doch dann auch egal.- Wenn der HTML-Code, wie du sagst, generiert wird, kannst Du sogar abhängig vom Linkziel (extern, intern, Download usw.) unterschiedliche Icons benutzen. Das einzige Problem hierbei: es ist kein Bildwechsel bei mousover oder so möglich - immerhin kannst du dem Bildelement eine andere Hintergrund-Farbe geben, was in Verbiundung mit (teiltransparenten) Grafiken zwar nicht unbedingt barrierefrei ist, aber dennoch einen einfachen mousover-Effekt zulässt.

Hier zusammengefasst alle Ergebnisse und Bewertungen:

inline-block wäre die Lösung gewesen (hab ich auf selfthtml-Seite für display nicht wahrgenommen).

Dann lautet Dien Code so:

HTML:

<a href ="#">Link</a>

CSS:

a {  
  background-image:url();  
  padding-left: [breiteDesBildes]px;  
}  

Oder um das Problem mit den umbrechendne Links in den Griff zu bekommen:

HTML:

<a href ="#"><span />Link</a>

CSS:

a span {  
  background-image:url();  
  padding-left: [breiteDesBildes]px;  
}  

So funktioniert es auch ohne Liste.

Und zu guter letzt kannst Du noch Klassen und Pseudo-Klassen verwenden um je nach Art des Links oder seines Zustandes andere Bilder zu verwenden.

So?? Damit hab ich mein Image unter dem Linktext liegen nicht links davor!

Dann benutze die CSS-Eigenschaft position oder schneide Dein Bild anders!

@Marc
linkArrow ist dämlich - hast Du recht! besser linkIcon
Das von Dir vorgeschlagene ul kann IMHO so nicht funktionieren (falls Du Dich nicht verschrieben hast). ul gestylet und auf li soll es wirken??

Ja, tut es, so lange du es mit Listen zu tun hast. Noch ein Tipp: Das lässt sich hier in SelfHTML nachlesen. :-)

Und hier alle Vorschläge zusammengefasst und meine *** Lösung = button ***!:

Warum denn nun <button>? Soll man das Bildchen drücken? Oder damit sein Hemdchen zuknöpfen?

http://ai-ti.net/test/images_im_CSS_definiert.html
Ist valide! (bis auf das o. g. div im a-Tag)

Immerhin. :-D

Viele Grüße,
Marc.

[Fux]

Hallo Marc,

a {

background-image:url();
  padding-left: [breiteDesBildes]px;
}

  
hab schon grad an Martin geantwortet.  
Guckst Du: <https://forum.selfhtml.org/?t=194480&m=1300817>  
Bin durch Weiterprobieren an seiner Lösung auf dasselbe Ergebnis wie Du gekommen.  
  

> Oder um das Problem mit den umbrechendne Links in den Griff zu bekommen:  
  
Welches Problem meinst Du? Also, ich sprach von dem Umbruch, der durch div als block-Element erzeugt wird.  
  
Bei der Lösung mit ul hattest Du recht! Sorry, hatte falsch codiert!  
  

> Warum denn nun <button>? Soll man das Bildchen drücken? Oder damit sein Hemdchen zuknöpfen?  
  
ROTFL !!!  
  
Wellll, ich kam durch den W3C Validator drauf, der mir aufzählte welche Elemente im a anstelle von div erlaubt sind ....  
  
Viele Grüße,  
Robert

[Marc]

Hallo Robert,

Oder um das Problem mit den umbrechendne Links in den Griff zu bekommen:

Welches Problem meinst Du? Also, ich sprach von dem Umbruch, der durch div als block-Element erzeugt wird.

Wenn ein Link umgebrochen wird, dann "funktionieren" die Hintergrundbilder im IE>8 nicht mehr.

Ausnahmsweise ist das mal kein Bug. Die älteren IEs benutzen das bounding box model, alle anderen und der IE8 das continous box model (ab CSS3 wird man selber entscheiden können, welches angewendet werden soll, aber das nur am Rande). In CSS bis einschließlich Kevel 2.1 war es einfach nciht fest gelegt, wie sich die Brser in diesem Fall zu verhalten haben, daher kann man hier auch ausnahmsweise nicht von einem Bug reden (obwohl das Problem und diverse Lösungsansätze als IE-Bug bezeichnet wird, den Namen ahbe ich vergessen).

Jedenfalls müsste ein zusätzliches <span> (nicht gestestet) dieses Problem beheben ohne die Nebenwirkungen von inline-block (z. B. im Opera).

Das Problem erklärt übrigens (wie so vieles andere auch) das Buch Fortgeschrittene CSS-Techniken von Ingo Chao und Corina Rudel sehr gut. Eine echte Empfehlung. Übrigens: Praktischerweise ist gerade das Problem mit den background-images in der Leseprobe enthalten. Einfach mal nach bounding suchen :-)

Viele Grüße,
Marc.

[Fux]

Na, hier kann man was lernen!
Gute Buchempfehlung!
Danke!

Gruß, Robert

[Marc]

Hallo,

Na, hier kann man was lernen!
Gute Buchempfehlung!
Danke!

Gerne, aber es sieht so aus, als hätte sich da seit der Drucklegung wieder etwas getan. CSS Level 3 ist halt noch cniht fertig. Von background-break sehe ich in den Standards nichts mehr, statt dessen sieht es jetzt ausm, als ob es eine Eigenschaft Namnes box-decoration-break geben wird.

Viele Grüße,
Marc.

[Struppi]

Und hier alle Vorschläge zusammengefasst und meine *** Lösung = button ***!:
http://ai-ti.net/test/images_im_CSS_definiert.html
Ist valide! (bis auf das o. g. div im a-Tag)

dir ist klar, dass du mit der überflüssigen XML Deklaration den IE in den Quirksmode schickst?

Struppi.