Eine Menge Fragen zum eigenen Template...

[Costaaar]

Hallo,

ich versuche mich gerade daran eine Seite von Papoo zu TL überzusiedeln. Die Installation für Papoo habe ich nicht selber gemacht, nur das keine Missverständnisse aufkommen

Ich habe die Seite soweit erstmal von der *.psd in html/css umgesetzt und bereits einiges in TL eingesetzt. Das meiste habe ich mir durch die Tutorialvideos auf der offiziellen Seite angelernt. Es bleiben jetzt trotzdem noch einige Fragen offen. Hier aber erstmal der Link zu meiner bisherigen Installation.

1. Aus irgendeinem Grund wird mein footer-Modul, dass ich in der Fußzeile anzeige, nicht dargestellt. Kann das mit der Überdeckung durch andere Module oder Layer zusammenhängen? Das footer-Modul ist bei mir "Eigener HTML Code" mit dem Inhalt einer copyright-Angabe (nur Text).
Im Template habe ich den footer wie folgt angegeben:

<div id="footer">
<?php $this->footer; ?>
</div>

2. Den Link "Navigation überspringen" (o.ä.) habe ich derzeit mit

.invisible {display: none !important;} 

entfernt. Habe hier im Forum aber bereits eine Stelle gefunden wo von dieser Variante abgeraten wird. Wie kann ich das genau lösen?

3. In welcher *.css kann ich die Einstellungen für das Padding des Content bzw. der Artikel verändern? Hätte z.B. die Artikel gerne insgesamt etwas höher angeordnet.

4. Wie kann ich Level 2 Seiten bzw. Submenüpunkte in einem gesonderten Menü anzeigen lassen. Bitte vergleicht dazu einmal die Papooinstallation. Im Prinzip sollte das ja machbar sein, konnte nur bisher noch nichts dazu finden.

5. Wie kann ich die active-Klasse ansprechen. Ihr habt sicher schon gesehen, dass der jeweils aktive Menüpunkt eine falsche Formatierung hat. Mein Problem ist jedoch das ich in meiner style.css die active-Klasse nicht verändern kann.

Wenn ich die Punkte erstmal abgearbeitet habe ist mir schon sehr stark geholfen. Leider bin ich noch ein ziemlicher Anfänger in TL und auch HTML/CSS sitzen sicher nicht perfekt

Hoffe hier gibts einige kluge Köpfe die mir helfen können, bzw. sagen können wo ich Hilfe finde.

Freundliche Grüße,
Costaaar

[MacKP]

Hallo Costaaar,

1. Ist denn das Modul im Seitenlayout dem footer zugeordnet? Im Quellcode kommt nix an.

2. Den Skiplink besser mit:

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

Dadurch wird das nur aus dem Fokus genommen und wird immer noch bei Screenreadern vorgelesen etc.

3. Versuchs mal selber rauszufinden mit der Erweiterung Firebug (Addon von Firefox).
Da kannst du sowas recht einfach herausfinden, indem du dich durch den Quellcode klickst und anschaust woher die Anweisungne kommen.

4. Hier ein Tutorial: http://https://contao.org/projects/t...vigationsmenue

5. Die aktiven Menüpunkte sind kein Link mehr sondern werden mit einem <span> umgeben und bekommen die Klasse .aktiv
Schau dir auch das mal mit Firebug an.

Dann kann ich dir nur noch sagen: Viel Spaß weiterhin ;-)

Und: bitte mehr die Suche bemühen. Alle angesprochenen Punkte wurden schon viele male durchgesprochen.

Viele Grüße

[Costaaar]

Danke für die schnelle Antwort. Werde die Punkte alle so durchgehen. Und nächstes mal ist die Suchmaschine auch mal wieder für härtere Arbeit dran

Zum 1. Punkt: ja ist dem footer zugeordnet.. das wunderte mich ja auch, dass da nichts durchkommt
Edit: Wenn man das Modul dem main zuordnet wird auch was ausgegeben.. aber beim footer nicht.

[MacKP]

Oh, da hab ich nicht richtig hingeschaut *g*
Versuchs doch mal mit :

<?php echo $this->footer; ?>

Dann wird das auch ausgegeben

Viele Grüße

[Costaaar]

Sooo, schon ein bisschen was geschafft, dank der kompetenten Hilfe.

1. Das hätte ich eigentlich selber sehen müssen mit dem fehlenden "echo"
2. läuft
3. basic.css aus dem head genommen und schon lief einiges besser..
4. Super Link. Wiki gleich gebookmarked.
5. Also soweit so gut. Aber.. wenn man die verschiedenen Menüpunkte mal durchklickt sieht man, dass sich der aktive Punkt sowohl im Main- als auch Submenü immer ein Stückchen verschiebt.
Habe da alle Szenarien die mir in den Sinn gekommen sind mit Hilfe von margin und padding durchgespielt. Hilft alles nichts. Liegt das am <span>? Wie kann man dem vielleicht Abhilfe schaffen?

Danke nochmal für die bisherige Hilfe, hat mich echt um einiges nach vorne geschossen

[MacKP]

Hallo Costaaar,
du hast bei #menu li a einen anderen Margin wert als bei dem aktiven Element.
Daher dürfte das kommen.
Bringe beide in Einklang und du dürftest kein Problem mehr haben ;-)

Viele Grüße

[ways2web]

2. Den Skiplink besser mit:

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

Dadurch wird das nur aus dem Fokus genommen und wird immer noch bei Screenreadern vorgelesen etc.

ok, das hinsichtlich barrierearm sicher gut... aber all meine Validtoren heulen sich aus wegen dem:
[WCAG v2 2.4.4 (A)] Different links that use the same link text may be confusing:

gibt es dafür auch ne lösung? oder muss ich dafür an TL direkt ran

[MacKP]

Wenn du das verhindern willst, musst du das mod_navigation.tpl abändern.
Liegt daran, das alle skiplinks fürs Menü ja eigentlich immer nur das Menü überspringen.. ich hatte da schon mal ne etwas heftigere Diskusion, da man mit dem Hinweis 'Menü überspringen' eh nicht weiß wo es denn nun eigentlich hingeht... aber leider ist da keine wirklich gangbare Möglichkeit rausgekommen wie das anderes gehandhabt werden könnte..
Deswegen bau ich mir meine Skiplink Navigation eh immer selber (Mit verschiedenen Sprungmarken etc.).

Darf ich hier nur nicht zu laut sagen, da dann gleich wieder alle loschreien das man nen Template nicht ändern soll

Viele Grüße

[xchs]

Deswegen bau ich mir meine Skiplink Navigation eh immer selber (Mit verschiedenen Sprungmarken etc.).
Darf ich hier nur nicht zu laut sagen, da dann gleich wieder alle loschreien das man nen Template nicht ändern soll

Ich mach's genauso mit den Skiplinks (YAML-like) *auchganzleisesag*

[ways2web]

hehe

ok... aber was soll man tun, wenn man 100%ig validen Quellcode haben möchte und TL sich diesbezüglich nie was hat einfallen lassen

bleibt mir also auch nix anderes übrig... aber erst mal schauen, ob ich damit zurechtkomme...

Danke für den "leisen" Hinweis MacKP

gruss ways

[Costaaar]

du hast bei #menu li a einen anderen Margin wert als bei dem aktiven Element.

Das hatte ich auch schon gedacht. Aber irgendwie hat liegt es nicht daran.
Interessant ist ja auch das die Padding Werte im Span so unterschiedlich zu denen ohne Span sein müssen für eine angemessene Darstellung.

Werde mal die Padding Werte zur Demonstration ebenfalls abgleichen.

[ways2web]

wie macht ihr das genau? bzw welche Vorgehensweise habt ihr euch einfallen lassen?

Meine Navigation sind ja module, einfach den namen des Moduls mit hinzufügen?
wenn ja, gibt es einen Weg den Modulnamen in einem Bereich ausgeben zu lassen, wo das modul grad seine arbeit macht?

Ich mach's genauso mit den Skiplinks (YAML-like) *auchganzleisesag*

[MacKP]

wie macht ihr das genau? bzw welche Vorgehensweise habt ihr euch einfallen lassen?

Meine Navigation sind ja module, einfach den namen des Moduls mit hinzufügen?
wenn ja, gibt es einen Weg den Modulnamen in einem Bereich ausgeben zu lassen, wo das modul grad seine arbeit macht?

Ich nehm diese Skiplinks dann einfach ganz raus ;-)

Ansonsten ist der Quellcode von TL Valide. Als Validator kommt der vom W3C zum Einsatz (da jeder Validator anders ist und nur dieser wirklich als Referenz genommen werden kann...).

Viele Grüße

[ways2web]

ja, den W3C Validator nutze ich natürlich auch primär, sowohl für meine seiten als auch für meine Feeds, bei feeds bin ich in TL allerdings noch nicht angelangt... das mach ich sicher in der nacht,


Danke schon mal für den Ansatz

[Costaaar]

Gibt es einen tieferen Grund dafür das der aktive Menüpunkt ein <span> ist?
Ansonsten werde ich das wieder auf Link umstellen, scheint mir praktischer...

[MacKP]

Hallo Costaaar,
ja. Der aktive Menüpunkt sollte aus Usability Gründen kein Link mehr sein, da User sonst draufklicken und sich wundern, das die selbe Seite wieder aufgeht und verwirrt sind.

Aus Barrierefreiheitssicht und wegen der Semantik bevorzuge ich allerdins <strong> oder <em> o.ä. eben noch mal extra Auszeichnungen einmal für Screenreader (die das dann anders vorlesen) und für text-Browser die das hervorheben.

leo der Entwickler hat sich da bei TL für <span> entschieden... Kann man auch machen... so ist es wenigstens möglich den aktiven Punkt besser mit CSS zu versorgen.

Viele Grüße

[Costaaar]

Hmm.. ok. Klingt vernünftig.

Wieso kann ich dem <span> kein background-image zuweisen? Habe ein bisschen gegoogled und da meinten alle es ginge, bei mir gehts aber nicht, und eine Lösung hat leider niemand beschrieben. Ich benutze übrigens FF und Chrome zu Testzwecken. Und es wird in keinem der beiden angezeigt.

[MacKP]

Hallo Costaaar,
doch kann man.
Dein Pfad stimmt nicht. ohne ../ geht es.
Allerdings hast du auch dem li ein Bild mitgegeben.. daher sieht das ein wenig komisch aus...

Und sowas bekommst du dann im Firebug raus, wenn du mit der Maus über die URL vom Bild gehst und da nix geladen wird ;-)

Viele Grüße

[Costaaar]

Danke MacKP, du hast mir seehr geholfen. Das ist echt Klasse
Ja, mit Firebug komm ich noch nicht ganz klar, aber scheint echt nützlich zu sein.

Interessant für mein aktive Menüpunkt Problem ist, dass die Schriftgröße der Links im Menü eigentlich 16 px sein sollte, tatsächlich aber nur 15 px ist. Warum bleibt mir jedoch bis jetzt verschlossen. Cache leeren hat ebenfalls nichts gebracht.

Edit: Schriftgröße über !important fixierbar. Aber irgendwie auch nicht das wahre..

Warum ist eigentlich sowohl das <li class="active"> als auch das darin verschachtelte <span class="active">?

[MacKP]

Warum ist eigentlich sowohl das <li class="active"> als auch das darin verschachtelte <span class="active">?

Uff.. du stellst fragen ;-)
Naja, so kann man eben auch die li besser Formatieren.
Um da keine unschönen CSS Vererbungen zu haben, den Punkt am besten so ansprechen: ul li .active oder ul li span.aktive
So sprichst du auf jeden Fall das innen liegenede Element an und nicht gleichzeitig das li und das span.

Viele Grüße

[Costaaar]

Letztendlich verzweifle ich an einem warscheinlich sehr kleinen Problem, dass das Menü nicht korrekt angezeigt wird. Deshalb die Fragen

Finde einfach den Fehler nicht bzw. die korrekte Lösung um das richtig zum Laufen zu bringen

Danke für den Hinweis mit dem Ansprechen des innenliegenden Elements. Hatte zunächst entsprechenden Punkt aus dem tpl entfernt. Kommt jetzt denke ich gleich wieder zurück.

[MacKP]

Ich blick nicht so ganz, warum du dem a nen margin von -7px gibst.. wenn du möchtest, das die nicht so weit auseinander sind, dann mach das padding kleiner.
Kann durchaus sein das du deswegen mit er Formatierung nicht so ganz ins reine kommst.
Nimm das also erst mal raus und dann versuchs noch mal auf andere Weise. Dann sollte das leichter sein.

Viele Grüße

[Costaaar]

Das ist ja das Ding: Ich habe dem a kein margin von -7px gegeben. Zumindest nicht mehr.

Kannst ja hier vielleicht mal gucken, ob du das da findest. Bei mir zeigt firebug das interessanterweise trotzdem noch an.

Ich habe die style.css nochmal vom Server gelöscht und aus typolight entfernt und komplett neu eingefügt. Trotzdem zeigt es weiterhin die veralteten Daten.

[MacKP]

Äh, TL speichert die CSS in der Datenbank und von da werden die CSS Dateien immer wieder neu in den root geschrieben (so ist es zumindest bei improtierten CSS Dateien).

Eventuell hilft dir das hier erst mal weiter um das Grundverständniss besser zu bekommen:
https://community.contao.org/de/show...css+suckerfish

Viele Grüße

[ways2web]

Ich mach's genauso mit den Skiplinks (YAML-like) *auchganzleisesag*

ja, das sollte erwähnt werden, mit der Erweiterung yamltools, tritt das problem erneut auf, wenn man das skiplink zeug aus dem mod_navigation.tpl entfernt hatte...

dann muss dies auch in mod_navigation_yaml.tpl geschehen

gruss ways

[xchs]

ja, das sollte erwähnt werden, mit der Erweiterung yamltools, tritt das problem erneut auf, wenn man das skiplink zeug aus dem mod_navigation.tpl entfernt hatte...

dann muss dies auch in mod_navigation_yaml.tpl geschehen

Ganz genau!