Contao 3 Grundkurs

Die Navigation stylen

Testen Sie unsere 2009 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
So überführen Sie die Navigation per CSS von vertikaler in horizontale Ausrichtung und positionieren sie an den unteren Rand des Kopfbereichs.
07:03

Transkript

Wir wollen unsere Hauptnavigation per CSS stylen. Schauen wir uns die Situation im Firebug an. Klick auf Element untersuchen, und wir suchen zunächst die Navigation. Die Artikel hat man in mod_navigation und zusätzlich die Klasse main. Die Links zu den einzelnen Seiten, werden als unsortierte Liste ausgegeben, und die beiden Elemente werde ich jetzt stylen. Wir gehen in unsere Stylesheets, in den screen, und hängen eine neue Regel über diese Schaltfläche unten an Die Klasse war mod_navigation, und zusätzlich hatten wir noch die Klasse main vergeben. Die Navigation soll horizontal ausgerichtet sein, und über die ganze Breite gehen. Ich kann also jetzt 100 Prozent für die Breite hier einstellen, und der Hintergrund soll ein Grau sein. Ich positioniere die Navigation absolut, und schätze jetzt erstmal einen Wert, so von oben "50" und links "0" Pixel. Soweit die Navigation. Ich habe aber noch eins vergessen, nämlich die Kategorie. Das hole ich jetzt mal nach, das soll die Kategorie "Navigation Main" sein. Speichern und schließen. Und jetzt wähle ich die hier oben in dem Filter aus, Navigation Main, einmal aktualisieren. Ich habe jetzt nur diese eine Regel, und jetzt kommt direkt eine zweite dazu, und dann schauen Sie mal was passiert. Die Kategorie, wenn sie hier gefiltert ist wird sofort eingetragen, wenn ich innerhalb dieser Kategorie, einen neuen Selektor anlege. Das war jetzt .mod_navigation.main, und dann das Listenelement. Listenelemente kann man nebeneinander bekommen, z. B. wenn man sie links floated. Okay, Speichern und schließen. Und wir schauen uns das Ganze im Frontend einmal an. Die volle Breite ist da, die Listenelemente sind nebeneinander, nur noch ein bisschen dicht gedrängt. Das werden wir jetzt ändern. Schauen uns mal ein solches Element an. Was ist jetzt der aktive Menüpunkt? Der ist ein span. Die Links da drin sind natürlich klassische Links mit ... die werden wir jetzt noch einstellen ... also zurück in die Styles. Einmal neu, jetzt wieder "mod_navigation li, a" und gleich hinterher, "mod_navigation li span" Ich will mal eine Mindestbreite einstellen von sagen wir "100" Pixeln, dann Display, block. Dadurch macht sich der Link breit, und ich kann überall klicken. Padding richten wir auch noch ein, sagen wir "0,5", "0,5" überall "0,5". rem ist wie em, nur bezieht sich auf root, also auf die äußere Seite, und nicht auf das Elternelement. Textausrichtung soll zentriert sein. Dann soll jeder Menüpunkt auch noch einen Rand bekommen, und zwar rechts. Der soll durchgehend sein und weiß sein. Die Links sollen außerdem nicht unterstrichen sein. und Farbe weiß. Schauen wir uns mal an, wie das jetzt aussieht. Das sieht schon ein bisschen besser aus. Jetzt möchte ich noch, dass der aktive Menüpunkt farbig hervorgehoben wird. Also wieder "mod_navigation li, a" aber beim Drüberfahren. und span ist der aktive Menüpunkt, das ist also soweit richtig. Die bekommen jetzt eine Hintergrundfarbe, und jetzt setze ich mal eine Farbe, die ich in den Variablen im Stylesheet eingetragen habe, und das ist "col01" müsste das gewesen sein, mal schauen. Schauen wir uns das Ganze mal im Kontext mit einem Artikel an. und schieben die Navigation insgesamt noch etwas nach unten. Schnappen wir uns hier wieder mit Firebug, und jetzt können wir hier auf diesen Wert klicken, top: "50" , und dann mit Cursortasten rauf und runter, in dem Fall rauf, können wir den Wert erhöhen und dann auch gleich sehen, was da passiert. Hier können wir auch nochmal gucken, wo der header überhaupt aufhört. können die Navigation noch etwas weiter nach unten setzen, sagen wir auf "120". Das ist natürlich nur ein gespielter Wert, den müssen wir auch tatsächlich eintragen. dann gehe ich mal wieder zurück, in die Navigation, und ändere den Wert "50" in "120". Speichern und schließen. Damit ist unsere Hauptnavigation fertig gestylt vorerst, und ich möchte jetzt noch abschließend eine Kleinigkeit verbessern, nämlich diesen Farbwert hier, möchte ich als Variable darstellen, wie ich das auch unten gemacht habe. Also "Strg" + Klick auf den Datensatz, und bei der Hintergrundfarbe gebe ich jetzt nicht die Zahl, sondern auch wieder eine Variable ein, die nenne ich mal "gray1". Sie sehen hier, auch wenn Sie versuchen weiter zu tippen, die Farbfelder sind auf sechs Zeichen begrenzt, deswegen müssen wir uns bei den Variablen auch auf sechs Zeichen begrenzen. Gut, ist eingetragen. Speichern und schließen. Jetzt gehe ich zurück in mein Stylesheet, in die Metadaten und füge hier drunter, meinen Grauwert ein. also gray1 und das war dreimal die sechs. Speichern und schließen. Ein letzter Blick noch ins Frontend, einmal neu laden. Ja, alles noch in Ordnung.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!