"Navigation überspringen" nach Update

[Kartracer87]

Hallo zusammen,

Ich habe derzeit die Version 2.7.0 und einíge Erweiterungen installiert, doch nun erscheint in der Navi links "Navigation überspringen". Wie kriege ich diesen neuen, nicht gewünschten Eintrag wieder weg ????

[FloB]

Hast du das Template geändert oder die /system/typolight.css aus dem Header entfernt (wird mit $this->framework eingebunden)?

Edit: Ein Link wäre hilfreich.

[Kartracer87]

Danke erstmal für die schnelle Antwort.

Nicht das ich wüsste, höchstens, dass durch das Update bzw. durch die Installation von Erweiterungsmodulen etwas verändert wurde, was ich mir persönlich aber nicht wirklich vorstellen kann.

Hier den Inhalt meiner typolight.css :

/* TYPOlight webCMS :: Copyright (C) 2005-2009 Leo Feyer :: LGPL license */
body{margin:0;padding:0;font-size:100.01%;text-align:left;position:relative;}select,input,textare a{font-size:99%;}form{margin:0;padding:0;}img{border:0;}# left{float:left;}#right{float:right;}#main{width:a uto;position:relative;}.inside{position:relative;t ext-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:i nline;}.custom{display:block;text-align:left;}.custom:after{content:".";display:bloc k; height:0; clear:both; visibility:hidden;}

Schau aber nochmal in meinem Header nach, ob sich da evtl. was getan hat.

[FloB]

Schau aber nochmal in meinem Header nach, ob sich da evtl. was getan hat.

Und wo bitte?

[Kartracer87]

Gut, dann sag mir bitte doch, wo ich nachschauen kann, was ich abändern muss bzw. sag mir, was für Angaben du brauchst.

[FloB]

Ohne URL ist schlecht raten …

Ansonsten schaust du dir mal den Quelltext deiner Seite an und suchst den Eintrag:

<link rel="stylesheet" href="system/typolight.css" type="text/css" media="screen" />

Wenn der nicht vorhanden ist, solltest du die Änderungen an deiner fe_page.tpl rückgängig machen (im Header). Hast du mod_navigation.tpl oder nav_default.tpl geändert?

Nutzt du Firebug? Analysiere das entsprechende Element und schaue, ob die Styles angewandt oder von einer anderen Regel überschrieben werden.

[Kartracer87]

danke fürs erste einmal, werde das ganze prüfen, soweit ich das kann.

Link der Seite ist hier

Die Seite befindet sich noch im Aufbau ...

[lucina]

Bei Deiner Seite ist ein Attribut im Navagtionstemplate fehlerhaft gesetzt. Bei Dir im Quelltext steht class="skip", es müsste aber class="invisible" heißen. Sollte sich in der mod_navigation.tpl finden lassen.

LG, Carolina.

[Kartracer87]

Hi Carolina,

lieben Dank für deine Antwort, hab mal mein mod_navigation.tpl überprüft, sieht aber ganz i.O. aus, sehe auf Anhieb keine Fehler ...

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible" title="<?php echo $this->skipNavigation; ?>"></a>
<?php echo $this->items; ?> 
<a id="<?php echo $this->skipId; ?>" class="invisible" title="<?php echo $this->skipNavigation; ?>"></a>

</div>
<!-- indexer::continue -->

[FloB]

So sieht es in deinem Quelltext aber nicht aus:

<a title="Navigation überspringen" class="skip" href="#skipNavigation_1">Navigation überspringen</a>

Erstelle mal die mod_navigation.tpl und nav_default.tpl neu, lade diese Dateien evtl. aus dem aktuellen Release von TYPOlight erneut hoch.

[Kartracer87]

So, habe nun beide .tpl´s aus der neuen 2.7.2 Version integriert, doch wirklich verändert hat sich da auch nichts. Klar, wenn ich mir den Quelltext der Seite anschaue, seh ich auch, das dort das "skip" drin steht, aber in den tpl´s selbst passt ja komischerweise alles !

[FloB]

Sehr seltsam. Würde dir anbieten, dass ich mal in deine Installation einen Blick werfe, aber das würde ich nicht in den nächsten 2 Wochen schaffen … vllt jemand anderes?

[lucina]

vllt jemand anderes?

Würde ich schon machen können ...
Carolina.

[Timo]

ich hatte das Problem auch und habe einfach <?php echo $this->framework; ?> im header des templates der Seite eingefügt nun wird Navigation überspringen nicht mehr angezeigt.

[Kartracer87]

Wo muss ich dass dann genau einfügen?

Habe es bisher in beiden Templates eingefügt, doch der Effekt ist nach dem Hochladen der selbe.

nav_default:

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
<?php else: ?>
<?php echo $this->framework; ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

mod_navigation:

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php echo $this->framework; ?> 

<a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible" title="<?php echo $this->skipNavigation; ?>"></a>
<?php echo $this->items; ?> 
<a id="<?php echo $this->skipId; ?>" class="invisible" title="<?php echo $this->skipNavigation; ?>"></a>

</div>
<!-- indexer::continue -->

Ist es so in Ordnung, oder musss ich es evtl noch wo anders einfügen?

Vielen Dank bisher für eure Unterstützung ... !!!

[FloB]

Im Template steht bei dir "invisible", im Sourcecode aber nicht. Keine Ahnung, an was das liegen könnte.


Edit: AAHH, lösch sofort das $this->framework aus der mod_navigation.tpl und nav_default.tpl. Das gehört in die fe_page.tpl in den Header (wo es eigentlich bereits sein sollte)!

[Kartracer87]

Ist in Ordnung, hab es wieder herausgenommen bzw. durch die Originalen ersetzt. Hab zudem das fe_page.tpl mir nochmal angeschaut, aber da steht es wie du gesagt hast schon drin.

<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<?php echo $this->stylesheets; ?>
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
<?php echo $this->head; ?>
</head>

<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper">
<?php if ($this->header): ?>

<div id="header">
<div class="inside">
<?php echo $this->header; ?> 
</div>
</div>
<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>

[tommy]

Hatte ebenfalls das Problem (2.7.2) weil ich das <?php echo $this->framework; ?> rausgelöscht hab, da ich nicht das TL Framework verwende.

Somit ist auch die .invisible Klasse von der system/typolight.css nicht mehr vorhanden, welche das "Navigation überspringen" ausblendet.

Am einfachsten ist es die Klasse zu kopieren und in dein Stylesheet einzufügen.

Gruss Tommy

[FloB]

Das Problem ist, dass die invisible-Klasse im Quelltext gar nicht auftaucht, warum auch immer – denn im Template steht sie drin (wenn es das Richtige ist).

[grand]

Kopier aus dem Typolight.css einfach den invisible teil in dein derzeit verwendetes .css file und es is weg!

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

[Sebastian]

HI

wenn du mir das Kennwort per PM schickst, schaue ich gerne mal.

Sebastian

[trigger_hurt]

*räusper* Finde den Fehler:

Screenshot - 26.11.2014 - 12:33:35.png

(Falls das Bild mal flöten geht: Google findet Navigation und Überspringen sind die Top-Wörter schlecht hin auf meiner Seite)

Was kann man eleganteres tun als den Text schlicht in der system/modules/core/languages/de/default.xlf zu löschen (was ja wahrscheinlich auch nicht Update safe ist)?

Update:
http://www.edv-giessen.de/contao/con...ion-entfernen/ hat mir geholfen. Man muss "neuerdings" allerdings das Template mod_navigation_html5 erst einmal selbst erstellen und kann das dann bequem ändern. Einfach die Zeilen mit class="invisible" auskommentieren, fertig.

[tab]

Sollte sich eigentlich durch ein modifiziertes mod_navigation.html5 (bzw .xhtml) bei Bedarf entfernen lassen. Hast du dann eben ein Stück Barrierefreiheit weniger.

[trigger_hurt]

Jo, danke habs ja genauso hinbekommen. Sry, aber wenn Barrierefreiheit so aussieht, dass Google meine Seite unter "Navigation überspringen" einsortiert, ist das nicht so witzig.

Mal technisch: Wenn das per CSS (anscheinend ja standardmäßig) als invisible eingestuft wird, wie können das Sehbinderte dann eigentlich überhaupt mitbekommen?

[MacKP]

Jo, danke habs ja genauso hinbekommen. Sry, aber wenn Barrierefreiheit so aussieht, dass Google meine Seite unter "Navigation überspringen" einsortiert, ist das nicht so witzig.

Naja, das kommt eben daher, das du viel zu wenig Text auf deiner Seite hast. Da kannst also was drann ändern. Ist dann auch direkt SEO. :P

Mal technisch: Wenn das per CSS (anscheinend ja standardmäßig) als invisible eingestuft wird, wie können das Sehbinderte dann eigentlich überhaupt mitbekommen?

Guck dir deine Seite einfach mal in einem Textbrowser an (lync z.b.). Dann wirst du festellen, das man das da noch sehen kann ;-)

Viele Grüße

[tab]

Invisible heisst unsichtbar, Sehbehinderte sehen die Seite nicht ...
Ich denke es wird alles vorgelesen. Auch das Unsichtbare.

[trigger_hurt]

Soso, interessant. Wieder was gelernt! Habt dank ihr beiden!

[tab]

Ist nebenbei ein netter Trick um mit Contao erstellte Webseiten zu finden, einfach bei Google eingeben "Navigation überspringen"

[louthi]

ich klinke mich hier mal ein, da ich eben grad das gleiche Problem hatte. Ich verwende Contao3.5 und da gibt es im CSS-Framework mittlerweile zwei CSS-files, eines für den Layoutbuilder und eines für das Responsive Layout. Die Anweisung für .invisible war im Layoutbuilder-CSS vorhanden. Ich hatte den aber ausgeschaltet, und stattdessen "Responsives Layout-CSS verwendet. Da kam dann genau der Fehler vor, der die ganze Zeit beschrieben wurde.

Nachdem ich jetzt um die Anweisung für ".invisible" meine regulär verwendete CSS-Datei ergänzt habe, ist die Info nicht mehr zu sehen.

Kopier aus dem Typolight.css einfach den invisible teil in dein derzeit verwendetes .css file und es is weg!

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

[Spooky]

.invisible {
    display:none;
} 

reicht doch auch..?

[MacKP]

.invisible {
    display:none;
} 

reicht doch auch..?

Nein, das ist genau der Flasche Weg: dann bekommen das Blinde Menschen auch nicht vorgelesen (so intelligent sind inzwischen auch Screenreader, das die Content, der nicht angezeigt werden soll, auch nicht mehr vorlesen).
Deswegen ist das rausschieben aus dem Fokus der bessere Weg.

Viele Grüße

[tab]

Das würde dann allerdings den Zweck des hier zu versteckenden Elements zunichte machen. Manche (viele?) Screenreader geben das dann auch nicht aus und schon ist es vorbei mit der Barrierefreiheit.

[Spooky]

Ah ok, dachte die verwenden gar kein User CSS. Das absolute Positionieren finde ich dennoch sehr unelegant, könnte man vielleicht auch mit Media Queries anders lösen (only tty, only braille bspw.).

[MacKP]

Ne, nicht ganz. Das iPhone ist zum Beispiel recht beliebt, weil dort alles Vorgelesen werden kann. Und da ist das dann eben nicht Braile o.ä.
So ein Screenreader ist ja kein eigenständiges Programm, was einen Browser mit bringt. Es liest eben den Screen vor. Dafür gibt es soweit ich weiß nichts passendes (ist ja eben für die Seite ein normaler Browser).

Zusätzlich ist das ja auch praktisch für normale User, die so eine Seite eben mit der Tastatur benutzen. Wenn man da den :focus so setzt, das es eben nicht mehr aus dem Viewport geht, haben die auch noch ne echt praktische Navigationsmöglichkeit (ok, würde auch wieder mit display:block gehen...). Insgesamt hat das schon seine praktischen Gründe warum das so gemacht wird (und eben nicht über display:none).

Viele Grüße

[Spooky]

Screenreader unterstützen (theoretisch) auch noch den media query "aural", "speech" oder "reader".