"Navigation überspringen" ausblenden

**it92** · 24.02.2010, 18:46

Hallo, ich möchte das der Link "Navigation überspringen" aus meiner Navigation verschwindet. Ich habe es schon mit CSS per "display:none;" ausprobiert das klappt aber aus irgendeinem Grund nicht.

Fehler Gefunden Funktioniert Jetzt

**Claudi** · 07.04.2010, 13:42

und wie hast du das geschafft? Hab nämlich grad das gleiche Problem ...

**MacKP** · 07.04.2010, 18:55

Hallo Claudi,
klingt so als ob du nen eigenes CSS schreibst..
Daher guck dir mal in der Online Demo an wie das da gemacht wird. Da werden diese Sprunglinks per CSS ausgeblendet (mit Firebug findest das ganz schnell).
Kopier dir einfach die passenden Stellen ;-)

Viele Grüße

**Claudi** · 08.04.2010, 11:23

Danke MacKP!
Stimmt, lag daran, dass ich das typolight Stylesheet nicht eingebunden hatte ... jetzt funktionierts!

lg Claudi

**melodora** · 24.04.2010, 16:55

Hallo zusammen,
habe das Problem, das Navigation überspringen immer angezeigt ist.
Handelt sich um TL 2.8.2
typolight.css ist aktiviert.
Weiss jemand, wo und wie ich das wegbekomme?

***xchs*** · 24.04.2010, 17:33

Hallo melodora,

Zitat von melodora

Hallo zusammen,
habe das Problem, das Navigation überspringen immer angezeigt ist.
Handelt sich um TL 2.8.2
typolight.css ist aktiviert.
Weiss jemand, wo und wie ich das wegbekomme?

Gibt es denn in Deiner "typolight.css" die Klasse "invisible" mit folgender Definition:

Code:

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

In weiterer Folge müsste dann diese Klasse auch dem Anker der SkipNavigation zugewisen werden (siehe Seitenquelltext)

**melodora** · 24.04.2010, 19:50

ja, die Klasse gibt es genauso.

Der Quelltext sieht so aus:
<a href="#skipNavigation64" class="skip" title="Navigation überspringen">Navigation überspringen</a>
Ich habe jetzt einfach eine classe .skip in die typolight.css mit den Daten von der .invisible eingefügt.

Und das Problem ist erstmal gelöst.

Vielen Dank für das Mittdenken.

***xchs*** · 24.04.2010, 20:34

Zitat von melodora

ja, die Klasse gibt es genauso.

Der Quelltext sieht so aus:
<a href="#skipNavigation64" class="skip" title="Navigation überspringen">Navigation überspringen</a>
Ich habe jetzt einfach eine classe .skip in die typolight.css mit den Daten von der .invisible eingefügt.

Und das Problem ist erstmal gelöst.

Vielen Dank für das Mittdenken.

Darf ich fragen, welche Navigation das ist bzw. welches Navigationstemplate Du verwendest?

**melodora** · 25.04.2010, 09:09

klar darfst du :-))
Das ist ganz normaler Standard.
Modultyp: NavigationsmenÜ
Template: nav_default

***xchs*** · 25.04.2010, 10:31

Zitat von melodora

klar darfst du :-))
Das ist ganz normaler Standard.
Modultyp: NavigationsmenÜ
Template: nav_default

Naja, ich vermute jetzt mal Du hast die Erweiterung "yamltools" installiert? Dadurch hättest Du nämlich auch ein geändertes, vom Standard etwas abweichendes Navigationstemplate (mit der Klasse "skip")

**melodora** · 25.04.2010, 12:57

yup, hast recht. Man kann aber auch garnichts verbergen ;-)

Und ich gestehe, dass hatte ich vor längere Zeit zum Testen installiert und vergessen...

**xx.at** · 27.04.2010, 17:16

hi,
hab des öfteren (navigation überspringen) gelesen.
Ich hab es wegbekommen in dem ich im Stylesheets unter "menumain a" Positionsart "static" ausmerzte.

Ich hoffe ich konnte helfen.

**BobFreddy** · 16.06.2010, 10:32

Zitat von xchs

Naja, ich vermute jetzt mal Du hast die Erweiterung "yamltools" installiert? Dadurch hättest Du nämlich auch ein geändertes, vom Standard etwas abweichendes Navigationstemplate (mit der Klasse "skip")

Hallo TY.. Contao Freunde,

Genau dieser Hinweis hat mein langes Rätselraten gelöst!!! Vielen Dank.

Ich habe mir die Augen wund geguckt, wo denn diese verflixte "skip" Klasse geändert wird!!!
Des Rätsels Lösung:
Bin vom YAML Framework zum Contao eigenen Framework zurückgekehrt. Allerdings gefällt mir die Navigation von YAML-SlidingDoor, mit der es sehr einfach möglich ist, auch etwas "rundere" Menüpunkte zu zaubern. Ich verwende daher nun das Frameset von Contao und nutze nur die Navigation von YAML. (mir ist bewußt, dass im Yaml-Tool darauf hingewiesen wird, die Erweiterung nicht zu nutzen, wenn man YAML-Framework nicht nutzt). Die kleinen Anpassungen durch die nav_yaml.tpl erschienen mir aber als überschaubar.

Nur hier lag der Hase im Pfeffer: Sobald die Yaml-Tools installiert sind, ändert das automatisch mit installierte Modul "mod_navigation_yaml.tpl" die Klasse "invisible" in "skip" um. Diese Anweisung wird (wenn ich es richtig sehe) vom nav_yaml.tpl übernommen. Davon bekommt man natürlich zunächst nichts mit!
Warum hat nun der Entwickler diesen Schritt gemacht und nicht einfach die Klasse beibehalten?
Nun YAML arbeitet auch mit der Skip-Link Klasse und die heißt hier eben "skip" und nicht "invisible".
Es bleiben also zwei Möglichkeiten:
1. Im Modul "mod_navigation_yaml.tpl" die Klasse "skip" wieder in "invisible" zu ändern
oder
2. eine eigene Klasse "skip" in das eigene Stylesheet (z.B. nav_slidingdoors.css) zu schreiben.

Frage:
Gibt es außer diesem "kleinen Stolperstein" (der für mich als nicht PHP'ler schon knifflig war) wenn man das Typolight (Contao) Framework verwendet und aus dem YAML-Tool nur die Navigation und evtl. auch die form.css für Formulare nutzen möchte noch weitere Dinge anzupassen?

**mbeckma1** · 22.07.2010, 09:46

Hallo, habe das Problem mit der skipnavigation, seit ich die Vers. 2.9 installiert habe. Da waren anschliessend einige Container nicht mehr da wo sie sein sollten. Habe alles zurechtgerückt, aber finde keine Möglichkeit die skipnavigation auszuschalten. Habe Firebug installiert, komme aber damit gar nicht zurecht. Kann mir jemand sagen, wie ich die ausschalten kann? Damit meine ich auch, wo ich die Dateien finde. Bin halt nicht so fit in CSS und PHP. Würde mich sehr über eine Antwort freuen.

Gruss Manfred

**blueamerican** · 22.07.2010, 09:53

@manfred: die klassen stehen in der datei ...system/contao.css

wird normal direkt miteingebunden

oder die klasse hier in deinem css hinzufügen

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

**mbeckma1** · 22.07.2010, 10:04

Hallo blueamerican!

na das nenn ich mal ne schnelle Antwort!!!!!!! Danke!
habe den Code aber schon drin gehabt. So sieht mein contao.css aus:

Code:

body{margin:0;padding:0;font-size:100.01%;text-align:left;position:relative;}select,input,textarea{font-size:99%;}form{margin:0;padding:0;}img{border:0;}#left{float:left;}#right{float:right;}#main{width:auto;position:relative;}.inside{position:relative;text-align:left;}.block{overflow:hidden;}.clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both;}
.invisible{width:0px;height:0px;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline;}.custom{display:block;text-align:left;}.custom:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

kann es sein, das ich das contao.css gar nicht benutze?

Gruss Manfred

**blueamerican** · 22.07.2010, 10:07

sieht wohl so aus... guck mal im quelltext ob du einen verweis auf contao.css findest

**mbeckma1** · 22.07.2010, 10:28

Ja, die contao.css wird verlinkt, aber auch andere:

Code:

<link rel="stylesheet" href="system/contao.css" type="text/css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" href="system/iefixes.css" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="system/modules/lu_listbackups/html/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="plugins/mediabox/css/mediabox.css?1.2.0" type="text/css" media="screen" />
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css?1.7" type="text/css" media="screen" />
<link rel="stylesheet" href="tl_files/tinymce.css?1279174958" type="text/css" media="screen" />
<link rel="stylesheet" href="basic.css?1195909656" type="text/css" media="all" />
<link rel="stylesheet" href="music_academy.css?1279668065" type="text/css" media="all,aural,braille,embossed,handheld,print,projection,screen,tty,tv" />
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>

**blueamerican** · 22.07.2010, 10:37

dann müsste es auch funktionieren! oder du schickst mir den link... so kann ich das nicht weiter debuggen

**blueamerican** · 22.07.2010, 10:40

oder du schreibst das hier noch irgendwo mit ins css

.skip{width:0px;height:0px;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:i nline;}

**mbeckma1** · 22.07.2010, 10:44

Hier ist der Link

**blueamerican** · 22.07.2010, 10:46

ok der zugriff auf die contao.css ist nicht erlaubt

403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /system/contao.css
on this server.</p>

das ist der fehler

**mbeckma1** · 22.07.2010, 10:53

Super, Danke blueamerican!!!!!!!!!!!!!!!

das hätte ich wahrscheinlich nicht gefunden. Hätte eher auf einen falschen Eintrag im css getippt. Nochmals vielen Dank!!!

Gruss Manfred

**pod1987** · 23.07.2010, 15:20

Hi,

habe derzeit das Problem, dass der tag "Navigation ausblenden" in der Druckvorschau angezeigt wird, was den Kunden stört. Wie kriege ich den da raus? Sonst wird er nirgends angezeigt dank .invisible in der typolight.css

Für eure Hilfe vielen Dank.

vg
pod

---

edit - hat sich erledigt. habe einfach den invisible-tag auch in die print.css eingefügt und das problem ist gelöst. leider hatte ich da schon gepostet..