nicht angemeldet
Nur Bilder Navigation, Headline, Lösungsidee
Hallo Forum,
ich muß öfters Navigationen und Überschriften aus Bildern realisieren.
alt bzw. title wird geschrieben.
Meine Idee ist jetzt das Bild als Hintergrund , und damit z.B. der Listen Tag nicht leer ist z.B.
.hidden{display:none;}
<li><span cass="hidden">Ich bin unsichtbar</span></li>
Ggf. könnte ich zum Drucken den Text ja wieder einblenden.
Ist das ein Weg?
Liebe Grüße,
Bernd
-
Hi,
Ist das ein Weg?
ein oft betretener. Betreten sind dann allerdings auch die Gesichter derjenigen, die standardmäßig keine Bilder laden.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Betreten sind dann allerdings auch die Gesichter derjenigen, die standardmäßig keine Bilder laden.
...und die derjenigen welche einen screenreader benutzen der display: none; allzu wörtlich nimmt.
allerdings wüsste ich auch keine bessere Lösung...
-
Schonmal Danke für die Antworten,
es scheint ja keinen "Königsweg" zu geben.
Was mir jetzt noch einfällt ...
<li><img src="blind.gif" alt="zur Startseite"><span class="hidden">zur Startseite</span></li>
1.) Das eigentliche Navigationsbild liegt als Hintergrundbild
2.) Das "blind.gif" ist ein transparentes gif o.ä.Aber ob das die Sache besser macht?
Liebe Grüße,
Bernd
-
Hallo Bernd,
es scheint ja keinen "Königsweg" zu geben.
Ja das sehe ich auch so ;) Vor einiger Zeit gab es Thread zu diesem Thema, da ging es darum wie die Navi von www.rammstein.de realisiert wurde. Die hat das so gelöst wie Du vorgeschlagen hast, also mit display: none;.
Man kann mit blind.gifs arbeiten um wenigstens den alt-text zu erhalten, dann das eigentliche Bild als Hintergrundbild via CSS dahinterlegen (so wie Du vorgeschlagen hast). Dann würde aber das <span class="hidden">zur Startseite</span> überflüssig werden, denn der alt-Text enthält ja diese Information schon. ich würde Dir empfehlen - falls Du einen hover-Effekt mit Bildwechsel eingeplant hast- das nicht so zu realisieren dass beim a:hover ein ANDERES HIntergrundbild geladen wird (das funktioniert nämlich im IE nicht so toll - bwz. stark verzögert). Stattdessen würde ich das mit einer einzigen Grafik lösen welche sowohl das eigentliche Bild als auch das hover-bild enthält. In der CSS-Datei definierst Du dann beim :hover eine Verschiebung des background-images. Aber das nur mal so am Rande ;)
Ich hatte neulich das gleiche Problem wie Du zu lösen und hab mich letzendlich doch dafür entschieden die Bilder als normale Grafiken einzubinden und den hover mit JS zu realisieren. Hat eine Menge Code gespart und war letztendlich doch eine relativ einfache und sichere Methode einen informationsverlust zu umgehen.
vg melanie
Was mir jetzt noch einfällt ...
<li><img src="blind.gif" alt="zur Startseite"><span class="hidden">zur Startseite</span></li>
1.) Das eigentliche Navigationsbild liegt als Hintergrundbild
2.) Das "blind.gif" ist ein transparentes gif o.ä.Aber ob das die Sache besser macht?
Liebe Grüße,
Bernd
-
Hallo Melanie,
danke für den Tip ;-) zum hover.
Vieleicht fällt mir ja noch was ein ...
Liebe Grüße,
Bernd
-
Vieleicht fällt mir ja noch was ein ...
Falls ja, lass es uns (mich) wissen ;)
-
-
-
Hi,
es scheint ja keinen "Königsweg" zu geben.
nein.
<li><img src="blind.gif" alt="zur Startseite"><span class="hidden">zur Startseite</span></li>
Wozu dient hier die Klasse?
1.) Das eigentliche Navigationsbild liegt als Hintergrundbild
Warum? Wenn Du das änderst ...
2.) Das "blind.gif" ist ein transparentes gif o.ä.
... kannst Du dies vermeiden, denn ...
Aber ob das die Sache besser macht?
... aktuell ist dem nicht so.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
Tach,
ich verstehe den Sinn dieses Threads nicht.
ich muß öfters Navigationen und Überschriften aus Bildern realisieren.
Das ist doch nicht schlimm.
alt bzw. title wird geschrieben.
Na, umso besser! Dann haben wir alles, was wir brauchen!
Meine Idee ist jetzt das Bild als Hintergrund , und damit z.B. der Listen Tag nicht leer ist z.B.
Warum das Bild als Hintergrund?
<h1><img src="uieberschrift.gif" alt="Ueberschrift" /></h1>
Fertig.
Das Bild stellt ja auch Inhalt dar, also jemand der streng auf Trennung von Inhalt und Layout achtet, ist so auch zufrieden. Als Hintergrundbild wäre es falsch, da Bilder als Hintergrund nur "Beiwerk" sind. Aber bei Dir ist das ja nicht der Fall, es ist "Inhalt". Also ins img-Tag damit. Browser, die keine Grafiken darstellen, geben den Alt-Text an. Da steht der Text aus dem Image dann nochmal drin.
Alles bestens.
Wo ist das Problem?
-
Hoi Efchen,
naja die Frage stellt sich wenn man einen Bildwechsel via CSS realisieren will. Ich nehme an dass das der Hauptbewegsgrund für diesen Thread war. Falls nein dann ist der ganz normale img-Tag natürlich die einzig vernünftige Lösung.
lg melanie
-
naja die Frage stellt sich wenn man einen Bildwechsel via CSS realisieren will. Ich nehme an dass das der Hauptbewegsgrund für diesen Thread war.
Hui! Dann musst Du eine funktionstüchtige Glaskugel haben! :-)
-
Hui! Dann musst Du eine funktionstüchtige Glaskugel haben! :-)
ich behaupte frech das ist weibliche Intuition ;)
Aber ob ich wirklich richtig liege kann nur Bernd sagen ;))
-
Es lebe die weibliche Intuition. ;-)
Ja es geht um ein Bilderaustausch.
Liebe Grüße,
Bernd
-
-
-
-