• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Background oder <img>?

R

rapid10

Mitglied
Hallo Leute,

ich weiß ihr habt das Thema schon oft durchgekaut, aber ich bin noch immer zu keiner Lösung gekommen.

Ich arbeite gerade an einer Webseite und habe dafür Buttons für die Navigation erstellt - mit Text. Daher kann ich nun keinen Text über die Buttons tun, da die Buttons ja bereits den Text enthalten.

Nun weiß ich allerdings nicht, wie ich das Problem lösen könnte, dass auch Personen die Website erfassen können die keine Grafiken sehen können oder sie deaktiviert haben.

Ich habe das Menü erstmal mit background erstellt. Allerdings kann ich hier keinen Alternativtext erstellen, bzw. die Links anzeigen lassen für Personen, die keine Bilder sehen.

Ich glaube, es ist einfacher ihr schaut euch das selbst an: Webdesign

Sie ist erst im Entstehen, deshalb wundert euch nicht über den Zustand. ;)

Vielen Dank für eure Hilfe!
Jakob
 
Grafiken sollte ein Alternativtext gegeben werden, der angezeigt wird, wenn die Grafik nicht angezeigt werden kann.

HTML: 
<img src="" alt="" title="" />

Im Übrigen kann man sich ganz leicht merken, <img> wird verwendet, wenn die Grafik zum Inhalt der Seite beiträgt, background-image wird verwendet, wenn die Grafik nur fürs Design da sein soll.
 
Eben!
Das Menü hat ja eigentlich nichts mit dem Inhalt zu tun. Deshalb tu ich mir ja so schwer.

Ist es eigentlich möglich, die Hintergrundgrafik vor dem Text anzeigen zu lassen? Damit könnte ich den Text hinter der Grafik verstecken.
 
rapid10 schrieb:
Eben!
Das Menü hat ja eigentlich nichts mit dem Inhalt zu tun. Deshalb tu ich mir ja so schwer.
Zum Vergrößern anklicken....
Ein Menü hat sehr wohl etwas mit dem Inhalt der Seite zu tun, oder könntest du ohne Menü navigieren?

Ist es eigentlich möglich, die Hintergrundgrafik vor dem Text anzeigen zu lassen? Damit könnte ich den Text hinter der Grafik verstecken.
Zum Vergrößern anklicken....
Nein, deswegen heißt es ja Hintergrundgrafik und nicht Vordergrundgrafik.
 
Also der Hintergrund ist immer ganz hinten, das kann man nicht ändern. Was du aber machen könntest wäre, dass du eine 2. Liste dahinter erstellst, in der nur einfacher Text steht (mit position:absolute und z-index müsste es klappen.
So könnte es aussehen:

HTML: 
<div id="header">
<ul id="hinten">
<li><a href="home.html">Home</a></li>
<li><a href="leistungen.html">Leistungen</a></li>
</ul>
<ul id="vorne">
<li class="home"><a href="home.html">Home</a></li>
<li class="home"><a href="leistungen.html">Leistungen</a></li>
</ul>
</div>

Die dazugehörige CSS wäre:

Code: 
#vorne {
position:absolute;
z-index:10;
bottom:0;
}
#hinten{
position:absolute;
z-index:1;
bottom:0;
}

bottom:0 deswegen, weil du da ja noch ein"WILLKOMMEN" hast, somit ist die Navi immer ganz unten im div "header".

Allerdings gebe ich keine Garantie dadrauf, selber habe ich es nicht ausprobiert. Gib einfach ein Feedback.
 
Vielen Dank euch beiden!
Ein Menü hat sehr wohl etwas mit dem Inhalt der Seite zu tun, oder könntest du ohne Menü navigieren?
Zum Vergrößern anklicken....
Da hast du natürlich recht. Also alles was man zum Navigieren braucht, gehört somit zum Inhalt. Hab ich das richtig verstanden?

@Badmacstone
Vielen Dank für deine Überlegungen, wenn es möglich ist, dann mache ich es lieber semantisch korrekt. :)
 
Moin,

@Badmacstone deine Lösung ist leider nicht sehr praktikabel.

@Thor Bei einem Element geht das nicht, bei zwei Elementen sehr wohl, siehe Gilder/Levin. :)

rapid10 schrieb:
Eben!
Ist es eigentlich möglich, die Hintergrundgrafik vor dem Text anzeigen zu lassen? Damit könnte ich den Text hinter der Grafik verstecken.
Zum Vergrößern anklicken....

genau, du brauchst also ein grafisches Menü wo die Grafik über den Linktext geschoben wird, wenn ich das richtig verstanden habe.

Die notwendige Technik dafür heißt Image Replacement nach Gilder Levin.

Wie du damit eine grafische navi baust wird hier erklärt. ;-)

An dem leeren span führt kein Weg vorbei. Der FF-Validator meckert dann zwar deswegen, beim W3C-Validator gibts aber keine Probleme.
Ebenso sind keine Nachteile bei Google zu befürchten, wie die Erfahrung zeigt.

Ich finde die Lösung elegant, semantisch korrekt und auch Behinderte kommen problemlos weiter, weil der Linktext ja immer noch dasteht.

edit. @rapid10 nimm doch mal diese Zeile raus:
HTML: 
<?xml version="1.0" encoding="ISO-8859-1"?>

Damit ist der IE6 im Quirksmodus, weil er an erster Stelle den Doctype erwartet und mit XML sowieso nix anfangen kann.
Deine Seite ist auch ohne diese Zeile valide.
 
Zuletzt bearbeitet:
Danke für deine Tipps, koslowski!
Kann ich das jetzt so lassen, wie es ist, oder sollte ich es nach Gilder/Levin machen?

Ist meine jetzige Variante falsch?

Und danke: ich habe die entsprechende Zeile entfernt.

LG Jakob
 
Hi,

rapid10 schrieb:
Kann ich das jetzt so lassen, wie es ist, oder sollte ich es nach Gilder/Levin machen?
Zum Vergrößern anklicken....

Sind die Grafiken ausgeschaltet funktioniert dein Menü nicht mehr, weil der Linktext fehlt.
Außerdem sind das ja nur Dekografiken und die gehören normal in den Background.

Ich mach sowas automatisch mit Gilder/Levin.
Behinderte haben so Zugang und Google kann einen Linktext indexieren.

Außerdem, wenn du die Technik mal kapiert hast, kannst du auch z.B. den header gegen eine tolle Grafik austauschen und hast trotzdem noch den h1-Text für google im Quelltext des headers stehen. :D
 
Nein, ich habe einen Alternativtext stehen, somit kann man die Links anklicken. Ich habe es bereits ausprobiert und es funktioniert auch.

LG Jakob
 
Das macht es nicht besser
Code: 
<a tabindex="1" title="Home" href="index.php">
<img alt="Home" src="./img/menu-home.png"/>
</a>
Bei mir (Jaws 8.0, FF3) hört sich das so an:
"Link Home Grafik"
Je nach Programm / Einstellung kann es sich aber auch so anhören:
"Link Tietel Home, Home Grafik"
Wenn das img (für :hover, :focus) mehrmals im Markup steht könnte das auch eine Zumutung werden:
"Link Tietel Home, Home Grafik Home Grafik Home Grafik"
Mit der Gilder-Levin-Methode gibt es diese Probleme nicht.

Home hört sich in deutscher Aussprache zudem fürchterlich an.
 
Zuletzt bearbeitet:
Also sollte ich es lieber mit der Gilder-Levin-Methode machen? Wenn die leeren <span> Tags den Validator eh nicht stören kann ich es ja machen, oder?

Danke für eure Hilfe!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben