Contao 3 Grundkurs

Mit einem Resizer arbeiten

Testen Sie unsere 1927 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um Mobilgeräte im Browser zu testen, installieren Sie einen Resizer. Alternativ rufen Sie im Firefox per Tastenkombination den integrierten Resizer auf.
03:06

Transkript

Wir wollen nicht immer unser Browser-Fenster verkleinern, wenn wir unsere Ergebnisse angucken wollen. Natürlich könnte man auch ein Extra-Fenster aufmachen und das dann kleiner ziehen, aber, wenn Sie bei Google mal Viewport resizer eingeben, dann werden Sie zahlreiche Tools finden mit denen das bequemer geht. Ein solches Tool hat Malte Wassermann entwickelt und das möchte ich für die Weiterarbeit installieren. Dafür blende ich mal meine Lesezeichen ein. Klick auf Viewport-Resizer. Und jetzt lege ich mir das hier als Lesezeichen ab. Zurück auf unserer Seite kann man den Resizer nun durch Klick hier drauf starten und wir bekommen hier eine Toolbar über die wir sehr bequem die einzelnen Viewports uns anschauen können. Wenn man nochmal drauf drückt, hat man Landscape-Modus, also Querformat. Selbstverständlich stört uns der Resizer jetzt auch nicht beim Arbeiten mit Fireback. Nehmen wir an, wir wollen hier unten die Navigation, die sich mit der Fußzeile überlappt, umbrechen, so dass die hier unten linksbündig erscheint. Das schauen wir uns im Fireback an. Unser Navigationsmodul heißt: mod_customnav Ist absolut positioniert und dann mit zwei Angaben: Rechts und oben. Außerdem gibt es noch ein Padding für das Listenelement. Nämlich 10 Pixel. Wenn die Navigation in einer neuen Zeile erscheinen soll und dann hier linksbündig sein soll, dann müssen wir dieses Padding aufheben. Gut. Das werden wir jetzt erledigen. Wir gehen in unsere Stylesheets, in das Responsive Stylesheet, hängen jetzt hier noch eine Formatdefinition dran und die nennen wir: mod_customnav. Die Navigation soll relativ positioniert sein. Oben ist Auto, damit heben wir den vorherigen Wert auf. Rechts auch Auto. Speichern und Schließen. Dann eine zweite Regel: mod_customnav li und da wollten wir das Padding aufheben, links, also 0. 0 braucht keine Einheit, können wir so speichern. Ok. Zurück ins Front-End. Fireback mal aus. Neu laden. Und Sie sehen, dass jetzt hier die Navigation in einer eigenen Zeile steht.

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!