Menu Darstellung ohne Grafiken

[Loon3y]

Hallo,

wenn ich bei meinen menu (html + css unten) im browser die grafiken aus schalte, hab ich keine beschreibung da. im lynx z.b. zeigt er mir die bezeichnungen an, aber wenn ich im mozilla, wie schon erwähnt, grafiken ausstelle habe ich weiße felder. Wie kann ich dies umgehen das wenigstens "home" dasteht?

Müsste ich die buttons direkt in die html einbinden mit <img> und das "alt"-attribut hinzufügen, und dann das img im css mit position usw formatieren ?

wobei wenn ich die buttons via <img>-tag im html einbinde, die ladezeit der seite höher wird. (zwar nur gering bei 16k dsl, aber bei alten modems..naja, nicht so toll)

Oder gibt es eine andere möglichkeit ?!

html (ausschnitt)

    <ul id="Navigation">
     <li><a href="index.php" class="home" title="home"> <span class="Invisible">Home</span></a></li>
....
</ul>

css (ausschnitt von der hover-formatierung)

    li a.home:link, li a.home:visited, li a.home:focus, li a.home:active { width: 111px; height: 32px; display: block; border: none;
                        background: url("graphics/menu-news.png") no-repeat; background-position: 0 -32px; }
    li a.home:hover {     background: url("graphics/menu-news.png") no-repeat; background-position: 0 0; border: none; }

grüßle..und dank
Loon3y


Edit: habe gerade die "dumme" idee ein 1px großes bild einzubinden mit den jeweiligen "alt"-attributen. Aber das wäre eher, nicht passend, oder?! Bzw richtig *g*

 

[Efchen]

Alternativtexte gibt es nur für das <img>-Tag.
Per CSS fügt man nur Bilder ein, die Zierde sind.

Du weißt doch: HTML - Inhalt, CSS - Design & Layout.

 

[Loon3y]

Alternativtexte gibt es nur für das <img>-Tag.
Per CSS fügt man nur Bilder ein, die Zierde sind.

Du weißt doch: HTML - Inhalt, CSS - Design & Layout.

jep...deswegen wie machen? den kompletten button via img ins html einbinden und mit css positionieren, sofern das geht...oder den button im css lassen und ein 1px bild via img einfügen und einen alt-text einfügen.

welche wäre die bessere, logischere, saubere und benutzerfreundlichere variante? ^^

 

[Junny]

Am benutzerfreundlichsten wäre es, den Text des Links als Text einzufügen.
Wenn es designtechnisch wirklich nicht anders geht, ist das Bild mit dem Text per img-Tag einzubinden.

Bei Deiner Idee mit dem Leerbild würden imho gleich 3 Fehler gemacht:

1. Ein Bild, das zum Inhalt gehört, wird als Hintergrundbild eingefügt
2. Ein Bild, das nicht zum Inhalt gehört, wird per img-Tag eingebunden
3. Es wird ein falscher Alternativtext für ein leeres Bild gesetzt

Überzeugt?

btw: Ich bin mir nicht sicher, aber sowas wie

<span class="invisible">

ist auch problematisch hinsichtlich der Seitenbewertung durch Suchmaschinen.

Gruß
Junny

edit: Zur Suchmaschinenthematik siehe hier: Hidden text and links - Webmaster Help Center

 

[neuroleptika]

Kommt darauf an was für .invisible angegeben wurde.
Der Klassenname lässt nichts gutes vermuten.

Wenn es unbedingt grafisch sein muß bietet sich eine Image-Replacement-Technik an:

<ul id="Navigation">
<li><a href="index.php" class="home" title="home">Home<span><!-- --></span></a></li>
</ul>

css:

 #Navigation a {
 width: 111px;
 height: 32px;
 display: block;
position: relative;
/*event. noch:*/ overflow: hidden;
}

#Navigation a span {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
background:  url(graphics/menu-news.png) no-repeat;
}

#Navigation a:hover span,
#Navigation a:hover span:focus {
background-position: 0 -32px;
color: green;
}

Die Grafik wird über den Text geschoben.

111px x 32px finde ich ein bischen klein für einen grafischen Button.

 

[Loon3y]

Wenn es unbedingt grafisch sein muß bietet sich eine Image-Replacement-Technik an:

Die Grafik wird über den Text geschoben.

111px x 32px finde ich ein bischen klein für einen grafischen Button.

Ok das wäre eine möglichkeit...noch garnicht dran gedacht, hab dank :)

bzgl den buttons...ich habe aber 7 Menupunkte, was heißt das bei einer buttongröße von 111px x32px das menu schon 777px breit ist...was ziemlich viel ist. :-(

Edit: was ich jetzt nicht verstehe is der unterschied beim code oben zu meinen. Da hast du doch nur das menu als komplette grafik genommen u nicht die einzelnen buttons?

 

[Efchen]

Am benutzerfreundlichsten wäre es, den Text des Links als Text einzufügen.
Wenn es designtechnisch wirklich nicht anders geht, ist das Bild mit dem Text per img-Tag einzubinden.

Der einzige Nachteil ist, dass sich die Schrift im Image nicht skalieren lässt. Für einen Browser ohne GRafiken ist da kein Unterschied. Deswegen finde ich "wenn es wirklich nicht anders geht" etwas hart :-)

 

[Loon3y]

Der einzige Nachteil ist, dass sich die Schrift im Image nicht skalieren lässt. Für einen Browser ohne GRafiken ist da kein Unterschied. Deswegen finde ich &quot;wenn es wirklich nicht anders geht&quot; etwas hart :-)

dann wollen wir mal... also die grafik sieht z.b. so aus (anhang). Ich positioniere sie via css (code nochmals unten) und beim drüberfahren erscheint eben dann das untere bild. Ich habe 7 solche buttons. Einer ist 111px breit, d.h. mein menu ist 777px breit, was sich noch in grenzen hält...finde es auch schon "etwas" zu breit. Mein Problem besteht immernoch in der Anzeige ohne grafiken, denn da steht nichts dort. Wie kann ich dem jetzt dennoch entgegen treten bzw es optimal lösen, dass ich etwas dorstehen habe?

html (ausschnitt)

    <ul id="Navigation">
     <li><a href="index.php" class="home" title="home"> <span><!--Home--></span></a></li>
....
</ul>

css (ausschnitt von der hover-formatierung)

    li a.home:link, li a.home:visited, li a.home:focus, li a.home:active 
{ width: 111px; height: 32px; display: block; border: none;
 background: url("graphics/menu-news.png") no-repeat; 
background-position: 0 -32px; 
}

    li a.home:hover
{ background: url("graphics/menu-news.png") no-repeat; 
background-position: 0 0; border: none; 
}

Die lösung von neuro, ändert recht wenig dran. Nur das ich statt 7 einzelne buttson, eine große grafik habe. Dennoch wird beim ausstellen der grafiken kein alternativtext angezeigt. Die Rede ist von mozilla, ie,...., bei browsern wie lynx, wo so oder so keine grafiken angezeigt werden, wird mir ein alternativtext angezeigt.

Gruß Loon3y

Edit: nicht über formatierung von dem css-code motzen, hab zeilenumbrüche, der übersichtlichkeit im forum wegen, eingefügt, normal steht alles in einer zeile.