Navigation mit text-indent und Bildern

[Gast170816]

Hallo,

ich beziehe mich ein bisschen auf diesen Beitrag http://www.tutorials.de/forum/css/281173-css-navigation-nur-mit-bildern.html da konnte man nur leider nicht mehr reinschreiben.

Ich möchte eine Navigation machen

<div id="navigation_1">
                        <ul>
                                 <li><a href="#"  id="nav_welcome">Welcome</a></li>
                                 <li><a href="#" id="nav_about">About</a></li>
                                 <li><a href="#" id="nav_contact">Contact</a></li>
                         </ul>
                  </div>

Ist also eine Listennavigation, darinnen die Links, die auch beschriftet sind mit "welcome" zum Beispiel
Ich wollte jetzt pfiffigerweise den bloßen Text gegen grafische Navigationspunkte austauschen.
Meine CSS sieht so aus:

#navigation_1 ul {
padding-left: 70px;
padding-top: 5px;
text-align: left;
}

#navigation_1 ul li {
background: none; /*das "none" ist, weil's hier sonst auch meine farbigen Aufzählungspunkte angezeigt hätte, die ich für meine anderen grafischen Tabellen auf der Internetseite verwende)
display: inline;
padding-top: 10px;
padding-right: 30px;
}

#navigation_1  a{
color: #000;
text-indent:-10001em;
}



/* #nav_welcome */
#navigation_1 li a#nav_welcome:link, 
#navigation_1 li a#nav_welcome:visited { 
background-image:url(../img/nav_welcome.jpg); 
height: 150px;
text-indent:-10001em;
}
#navigation_1 li a#nav_welcome:hover, 
#navigation_1 li#selected a#nav_welcome { 
background-image:url(../img/nav_welcome_2.jpg); 
height: 150px;
text-indent:-10001em;
}

Man sieht, ich hab an einem Haufen Stellen probiert TEXT-INDENT und HEIGHT einzufügen. Denn ich kann zwar mein Background-Image für "welcome" sehen, aber es ist
a) zu niedrig (also es ist dann unten ne Ecke abgeschnitten)
b) der Link-Text steht trotzdem noch drüber, text-indent scheint n icht zu funktionieren

(In dem oben angesprochenen alten Thread, war der Tipp um die Schrift herum ein span-Tag zu machen und dann das span-Tag auf "display:none" zu setzen... aber da verschwindet dann auch das Background-Image (dabei hatte ichs echt nur um die Schrift, nicht um den Link).

Warum funktionieren height und text-indent nicht? Kann man das vielleicht aufs <a>-Tag gar nicht anwenden?

 

[Maik]

(In dem oben angesprochenen alten Thread, war der Tipp um die Schrift herum ein span-Tag zu machen und dann das span-Tag auf "display:none" zu setzen... aber da verschwindet dann auch das Background-Image (dabei hatte ichs echt nur um die Schrift, nicht um den Link).

Du hast es im Stylesheet versäumt, das Inline-Element a als Block-Element darzustellen, denn Inline-Elemente besitzen keine Höhe und/oder Breite.

Im Normalfall geschieht dies mittels display:block, da die Links in diesem Fall aber nebeneinander ausgerichtet sein sollen, mit float:left - dann greift hier auch die height:150px-Deklaration, und das Hintergrundbild verschwindet nicht.

mfg Maik

 

[Gast170816]

Oh, yeah... stimmt, jetzt gehts... (inline: block, float:left... merken)

PS: Das "welcome" ist der erste Punkt in der horizontalen Navigation. Der "focus"-Pünktchenrand drumrum ist jetzt aber viel viel breiter als das Background-Bildchen, er beginnt ganz links und schließt eben dann das Background-Image von meinem Link ein.

Das ist vielleicht nicht so sehr schlimm, aber kann ich das auch wegbekommen.. sodass es nur exakt das Bildchen/Link umschließt? width und height ist ja definiert, mit padding oder margin gehts jedoch nicht weg.
Oder ist diese breite "focus"-Fläche wegen der Verwendung von text-indent?

 

[Maik]

Oder ist diese breite "focus"-Fläche wegen der Verwendung von text-indent?

Korrekt.

Die Geckobrowser unterstützen outline:none für das a-Element, für alle übrigen Browser, die einen zu breiten gepunkteten Rahmen um die Links ziehen, müsstest du etwas JS zu Hilfe nehmen:

<a href="#" onfocus="this.blur()">...</a>

Oder du verzichtest hier auf text-indent, und greifst auf meinem Tipp aus dem o.g. Thema zurück.

mfg Maik

 

[Gast170816]

...mit "display:none"?!

Ok, das könnt ich dann nochmal probieren.

Geht das dann noch als "korrekt, suchmaschinenfreundlich, etc." durch oder "darf" man das eigentlich nicht machen?

 

[Maik]

...mit "display:none"?!

Nö, mit outline:none.

Geht das dann noch als "korrekt, suchmaschinenfreundlich, etc." durch oder "darf" man das eigentlich nicht machen?

Den Suchmaschinen-Bots ist es ziemlich schnuppe, ob beim Klick des Links sein Fokus deaktiviert ist.

Anders sieht es da hingegen mit der Usability und dem Navigieren innerhalb der Navigation mittels der Tab-Taste aus, wenn der Fokus nun nicht mehr angezeigt wird.

mfg Maik

 

[Gast170816]

Ja, dachte falls "display: none", ja bei "blur" fehlt dann der Rand zum Tabben.

So, eigentlich gehts jetzt

Das steht in meiner CSS:

#navigation {
height: 55px;
}

#navigation_1 ul {
padding-left: 70px;
text-align: left;
}

#navigation_1 ul li {
background: none;
display: inline;
}

#navigation_1  a{
color: #000;
text-indent:-10001em;
display: block;
float: left;
height: 35px;
width: 100px;
}

#navigation_1 li a#nav_welcome:link, 
#navigation_1 li a#nav_welcome:visited { 
background:url(../img/nav_welcome.jpg) no-repeat left top; 
}
#navigation_1 li a#nav_welcome:hover, 
#navigation_1 li#selected a#nav_welcome { 
background:url(../img/nav_welcome_2.jpg) no-repeat left top; 
}

Der Code für die anderen Punkte ist genauso, nur das andere Bild halt als url.
Ich kann die Bilder samt Hover-Effekt auch sehen.

Jetzt ists aber auf einmal so:
Der erste Button steht normal vorn richtig ausgerichtet aber dann sind alle nachfolgenden Button (horizontale) einen kleinen Absatz nach unten gerutscht.
Wenn ich die oben angesprochenen li-Listenbildchen (die ich für meine ganzen anderen Listen zugeordnet hab) sichtbar mache (background: none wegmachen) dann kann ich sehen, dass alle Listenpunkte an einandergerutscht sind und der Inhalt, also die Bilder sind ab Punkt Zwei alle nach unten rausgerutscht und ordnen sich da hintereinander an.

Da hab ich ich FLOAT:LEFT nochmal bei #navigation_1 ul li eingefügt (hatte ichs doch vorher nur bei #navigation_1 a.) Komisch...Warum ist das so bzw. ist das ok? Also auf einer Linie ist es seitdem ja immerhin wieder.

 

[Maik]

Jetzt ists aber auf einmal so:
Der erste Button steht normal vorn richtig ausgerichtet aber dann sind alle nachfolgenden Button (horizontale) einen kleinen Absatz nach unten gerutscht.

[...]

Da hab ich ich FLOAT:LEFT nochmal bei #navigation_1 ul li eingefügt (hatte ichs doch vorher nur bei #navigation_1 a.) Komisch...Warum ist das so bzw. ist das ok? Also auf einer Linie ist es seitdem ja immerhin wieder.

Seltsam, dieses Verhalten kann ich mit dem gezeigten Stylesheet in keinem der aktuell gängigen Browsern reproduzieren. Die Elemente sitzen da sauber in einer Reihe.

mfg Maik