Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Outline fix für Links



Ranking: +4   Kommentare: 12   |   Bewertung: Keine Berechtigung!  

Hallo Designnation Besucher =)


Wie ihr unschwer erkennen könnt sind zwei Links auf dem Bild zu sehen. Der Obere etwas unschöner als der Untere ;)
Egal, ich komm zur Sache, hier ist der kleine aber feine Code:


Code:


a:active, a:focus {

    outline: none;

}



Erklärung:
Jeder Link (Tag <a>) wird ausgewählt und die CSS Eigenschaft outline: none; wird angewendet, wenn das Objekt aktiviert wird, sei es durch die Maus o.ä. a:focus wird ausgelöst, wenn das Objekt in irgendeiner Weise Fokussiert wird, z.B. durch die Tab-Taste.

Hier nochmal ein kleiner Test:

Code:


<style type="text/css">

a.mit:active, a.mit:focus {

    outline: none;

}

</style>



<a href="#">Ohne fix</a> <br />

<a href="#" class="mit">Mit fix</a>




Ich hoffe es hat euch in irgendeiner Weise geholfen ^^
Viel Spaß

Gruß chuckySTAR

Veröffentlicht von: chuckySTAR
Veröffentlicht am: 4 Nov. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS eyecandy fix outlink styling verschönerung


Themenverwandte Tutorials


Kommentar(e) (12)


chriss sagt:

chuckystar, locker bleiben.

Dein Tutorial ist nunmal unangemessen dokumentiert. Du willst hier etwas beibringen, also mach’ es entweder richtig oder gar nicht.

12 Nov. 2008 14:12:42 • Antworten


manuakasam sagt:

Selbst da ist ein Fokus angebracht.
Wenn man sich einer Problematik bewusst ist, so sollte man auch auf diese eingehen ;) Ist alles nur konstruktive Kritik =)

11 Nov. 2008 14:51:24 • Antworten


chuckySTAR sagt:

Hab ich gesagt, dass ihr das jetzt auch auf Links anwenden sollt? Das war ein Beispiel
"Der outline Killer war ja auch eigentlich für Link Bilder gedacht, hab es aber mit einem Link demonstriert"
Jetzt beruhigt euch mal >.> :p

10 Nov. 2008 18:35:57 • Antworten


artist and architects. sagt:

lynx wirds dir übel nehmen! Kann mich chriss nur anschließen. Is jedoch definitiv zielgruppenabhängig!

10 Nov. 2008 17:29:09 • Antworten


chriss sagt:

Zitat :

Dass der Fokus so wichtig ist kann ich mir kaum vorstellen. Ich brauch den eigentlich nur, wenn ich mich durch die Seite "Tabbe", was allerdings sehr selten ist.
Der outline Killer war ja auch eigentlich für Link Bilder gedacht, hab es aber mit einem Link demonstriert :P




Ja, _Du_ brauchst das nicht. Aber es gibt menschen die bewegen sich ohne Maus im Internet. (Blinde z.B. oder Mobile Geräte …)

9 Nov. 2008 22:44:48 • Antworten


uniqart sagt:

super danke... allerdings fällt es wohl keinem auf, wenn man den Kasten nicht sieht... allerdings fällt es auf, wenn man ihn sieht ^^ Danke +

9 Nov. 2008 19:16:26 • Antworten


Sitek sagt:

ich finds klasse so was hab ich schon lange gesucht ! ^^ thx !

6 Nov. 2008 12:15:46 • Antworten


deleted_1317046593 sagt:

Für Bilder bestimmt nützlich, bei normalen Links kommt es schon auf den Link an. Wenn man z.B. einen ganzen Div verlinkt ist der Outline schon störend und sollte meiner Meinung nach weg. Bei Textlink find ich's mit Rand ok.

Trotzdem , schreib halt noch rein (oder lass reinschreiben^^), dass es für Bider und große Flächen gedacht ist.

5 Nov. 2008 16:48:18 • Antworten


chuckySTAR sagt:

Eigentlich war das Tutorial gar nicht fertig :P
Ich habe nur aus versehen auf den Senden Button gedrückt und konnte mir das Resultat erstmal nicht ansehen.

Dass der Fokus so wichtig ist kann ich mir kaum vorstellen. Ich brauch den eigentlich nur, wenn ich mich durch die Seite "Tabbe", was allerdings sehr selten ist.
Der outline Killer war ja auch eigentlich für Link Bilder gedacht, hab es aber mit einem Link demonstriert :P

5 Nov. 2008 16:08:34 • Antworten


manuakasam sagt:

chriss hat genau das Problem angesprochen.
Die Rahmen haben schon ihren Sinn. Bitte unbedingt mit angeben, dass zusätzlich auf Barrierefreiheit geachtet wird:
Sprich: visuelle Änderungen am link bei :hover und :focus per CSS und nix mit JavaScript!

Und man häte das Tutorial schon ein wenig mehr erläutern können, denn es hat schon eine Weile gedauert, bis ich überhaupt erfahren habe, worum es geht.

5 Nov. 2008 14:09:57 • Antworten



Anfang

<<

1

2>>Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder