#skipNavigation4

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?

HTML-Code:

---

<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>

---

Also ich würde sagen

Code:

---

.invisible { display:none; }

---

sollte es schon ausblenden.

Zitat:

---

Zitat von scampi

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

Zitat:

---

Zitat von do_while

Also ich würde sagen

Code:

---

.invisible { display:none; }

---

sollte es schon ausblenden.

---

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

Code:

---

.invisible { display:none; }

---

in firebug eintrage, streicht er es sofort wieder durch.

Zitat:

---

Zitat von MacKP

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!

Code:

---

.invisible { display:none !important; }

---

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

Zitat:

---

Zitat von Kahmoon

Code:

---

.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

PHP-Code:

---

.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...

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?

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