Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Floatbasierte Navigation vorbereiten

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
CSS beinhaltet die Funktionalität, um die vorhandene Navigation auf eine floatbasierte, horizontale Navigation umzustellen. Hierfür müssen einige vorbereitende Maßnahmen durchgeführt werden.

Transkript

Ich möchte Ihnen jetzt zeigen wie man die vorhandene Navigation, also die Tab-basierte Navigation hier, verwandeln kann in eine Float-basierte horizontale Navigation, die optisch ein bisschen neutraler ist und die eine hervorragende Basis bildet für den Ausbau der Beispielsite auch für Dropdown-Navigation und der gleichen mehr. Der Navigationsbereich erhält hier einen Farbverlauf, damit der gleich als solcher erkennbar ist, ein CSS 3 basierten, also ein grafikfreien Farbverlauf und auch die Signale der Navigation, wo der Besucher gerade ist, das alles passiert mit CSS 3 Farbverläufen, Aber Ausgangspunkt ist die Tab-basierte- Navigation. Im Editor möchte ich die Beispielsiten vorbereiten für die Erstellung der Navigation. Als erstes bekommt hier in Bildschirm CSS der Header der Kopfbereich ein Padding, der hat hier normalerweise eine 0 unten, das bedeutet dort ist kein Padding, weil da die Tab-basierte Navigation schon anfängt hier. So, hier sitzt Sie schon und da ist kein Padding mehr zwischen. Wenn das aber wegfällt, dann soll hier ein bisschen Abstand dazwischen sein, also, setze ich hier 10px und wenn man 10, 20, 10, 20 hat hier diesen schönen regelmäßigen Rhythmus, dann kann man sich ein Pärchen auch sparen und die Kurzschreibweise nehmen. Oben und unten 10, links und rechts 20 bedeutet das. So viel zu Bildschirm CSS. Dann brauchen Sie ein neue Stylesheet, dass man am besten erstellt auf Basis der vorhandenen navi-inline. Falls die nicht da sein sollte, nehmen Sie einfach eine Datei. Ich speichere diese hier unter dem Namen navi-float-horizontal, das ist etwas aussagekräftiger, so soll die Datei heißen. So das ist sie, dann ändere ich das hier ein bisschen, passe den Dateinamen an, float-horizontal. Die Styles können größtenteils bleiben und unten muss natürlich auch wieder eingepasst werden, horizontal. So die Media Query bleibt, die Selektoren werden größtenteils gleich bleiben, müssen gleich noch ein klein bisschen angepasst werden. Die Eigenschaften hier drin, die werden dann natürlich umgebaut, aber es ist schon eine gute Basis. Die Selektoren bleiben also, aber hier die Werte nehme ich raus, damit man hier nicht alles gleich wieder überschreiben muss. So, also leere, vorbereitete Selektoren, so, quasi die Hülle des alten Stylesheets und unten kommt das Ende. In Zentrale CSS wird das vorhandene Stylesheet auskommentiert und das Neue eingebunden. Copy und paste geht da etwas schneller, float, da zeigt der Editor uns das schon an, speichern, navi-float-horizontal.css und damit wird das neue, fast komplett leere Stylesheet eingebunden und ich sehe hier im Übungsordner die Ausgangsposition zu Erstellung der horizontalen Navigation. Sie ist noch nicht besonders horizontal, sie ist auch noch nicht gefloatet, aber das ist die Ausgangsposition, die wir hier haben. Bildschirm CSS hat ein klein bisschen Abstand, klein bisschen Padding unten drunten, das sehen Sie hier. Dann die navi-float-horizontal, die Selektoren habe ich drin gelassen, die kann ich zum Größtenteil wiederverwenden und in Zentrale CSS wurde das neue, noch fast komplett leere Stylesheet bereits eingebunden. Das ist die Ausgangsposition zu Erstellung einer Float-basierten horizontalen Navigation.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 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!