#skipNavigation4

[scampi]

Hallo zusammen,

habe reset, responsive und eigenes css aktiv. Im Gegensatz zum Layout-Builder, zeigt responsive ja
(bei mir) die skip navi an.

warum greift display: none; nicht, um #skipNavigation4 aus dem viewport zu bekommen?
Riesiger margin wirkt, aber der Platz wird nicht freigegeben, was muss ich da machen?
Warum steht skip navi ober- (als Klasse) und zusätzlich noch mal unterhalb (als id und Klasse) der ul?

<nav class="mod_navigation block">
[B]<a class="invisible" href="#skipNavigation4">[/B]Navigation überspringen</a>
<ul class="level_1">
<li class="active first">
<li class="sibling">
<li class="sibling">
<li class="sibling">
<li class="sibling last">
</ul>
[B]<a id="skipNavigation4" class="invisible">[/B] </a>
</nav>

[do_while]

Also ich würde sagen

.invisible { display:none; }

sollte es schon ausblenden.

[MacKP]

Warum steht skip navi ober- (als Klasse) und zusätzlich noch mal unterhalb (als id und Klasse) der ul?

Na, da drunter ist der Anker wo man dann hin springt.. sonst kann das ja nicht funktionieren ;-)

Viele Grüße

[scampi]

Also ich würde sagen

.invisible { display:none; }

sollte es schon ausblenden.

tut es aber nicht, es wird anscheinend irgendwo überschrieben, sehe ich gerade - bloß wo?
Wenn ich

.invisible { display:none; }

in firebug eintrage, streicht er es sofort wieder durch.

[scampi]

Na, da drunter ist der Anker wo man dann hin springt.. sonst kann das ja nicht funktionieren ;-)

Viele Grüße

Achso der (Ziel)Anker, ja klar...

und wenn das dann klappt mit display:none wird der Platz ja hoffentlich auch freigegeben.

Danke für Deine Antwort!

[Kahmoon]

.invisible { display:none !important; }

Versuchs mal hiermit..auch wenn ich nicht der Freund von "erzwungenen" Styles bin

[scampi]

.invisible { display:none !important; }

Versuchs mal hiermit..auch wenn ich nicht der Freund von "erzwungenen" Styles bin

das funktioniert! Vielen Dank für den Tipp! An important hab ich überhaupt nicht gedacht...

Aber die Ursache, warum das ohne important nicht funktioniert, würde ich zu gerne wissen.
Wenn der Layout-Builder aktiv ist, macht er es ja auch weg mit

.invisible {
    width:0;
    height:0;
    left:-1000px;
    top:-1000px;
    position:absolute;
    overflow:hidden;
    display:inline;
} 

wobei mich interessieren würde, wofür hier ein overflow hidden steht, wenn es doch sowieso nichts zu sehen gibt...
Fragen über Fragen...

[scampi]

nachdem man skip ausgeblendet hat, kann man aber mit der TAB Taste nicht mehr darauf zugreifen,
wie es doch eigentlich - Stichwort barrierearm - sein sollte, oder?

[MacKP]

Ja, klar.
Du kannst dir ja vom Contao CSS was abschauen, wie es besser geht ;-)

Wobei ich es eh bevorzuge ne echte skiplink Navigation zu bauen und damit bestimmte Punkte in der Seite anzuspringen. Nicht einfach nur die Navi überspringen...
Aber dazu muss man schon ein wenig mehr machen ^^

Viele Grüße