Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Suchformular positionieren

Testen Sie unsere 1896 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Anschließend passt der Trainer die Größe des Suchformulars an und platziert dieses durch eine absolute Positionierung auf der rechten Seite des Navigationsbereichs.

Transkript

Das Suchformular ist hier bereits eingebaut, es sieht aber noch nicht so besonders hübsch aus. Das kann man [ ] sagen und, das soll jetzt ein wenig geändert werden. Ziel ist es letztendlich, in dieser Richtung zu gehen, aber jede Reise beginnt mit dem ersten Schritt, und los geht es hier in Navi-Float-horizontal mit der Gestaltung des Suchformulars Das Suchformular sitzt im Navibereich und ist ein Formular, und hier sehen Sie schon mein Liblingstippfehler naiv statt navi, so, dann geschweifte Klammern, und los geht es hier mit der Gestaltung. Position Absolute, man könnte auch floaten, aber Position Absolute ist in diesem Fall gar nicht schlecht, um das nach rechts zu kriegen. Wir brauchen bloß einen richtigen Bezugspunkt für die absolute Positionierung aber immer der Reihe nach, die Breite soll etwa 150px sein, keinen Border, kein Padding und keinen Margin. So. Position Absolute top 5, right 20px, width 150 hier einmal neu laden, und Sie sehen, das hat noch nicht so ganz so geklappt, wie wir uns das vorgestellt haben, denn der Bezugspunkt stimmt nicht. Absolute Positionierung ist genau wie hier für den Slogen immer relativ zu einem bestimmten Bezugspunkt. es soll relativ sein zum Navibereich, deswegen bekommt der jetzt hier position: relative, dann gilt er als Bezugspunkt für die Navigation, und nach dem Neu laden sitzt er schon zumindenst ansatzweise an der richtigen Stelle hier. Weiter geht es hier im Editor, und ich sorge gleich dafür, dass hier nichts schief gehen wird, indem ich eine kleine Schutzzone einbaue padding:right für den Navibereich. Optisch hat sich hier nichts verändert, aber man wird das jetzt im Seiteninspektor sehen können. Hier ist der Navibereich, und der hat jetzt ein Padding rechts, und das schützt hier das Suchformular. So kann man das jetzt sehr schön sehen, oben in Lila eingefärbt hier, sehen Sie das Padding, und dass das absolute positionierte Suchformular, so dass wenn die Navigation wächst, dann hört sich auf jeden Fall hier auf, weil da das Padding anfängt. Das meine ich mit Schutztzone für das Suchformular, denn bei absolut positionierten Elementen sind wir als Autoren selbst verantwortlich, dass da nichts schief geht und überlappt. So, navi bereich input ist der nächste Selektor, und damit werden die Eingabefelder bzw. das Eingabefeld und deshalb mit Button positioniert: width: autopadding: 0, margin:0, damit da nicht versehentlich was dazwischen Punkt 0 und nicht ist gleich. Speichern. Browser neu laden. und Sie sehen, das sieht schon fast an der richtigen Stelle hier. So, hier in Formular gebe ich zusätzlich noch mal ein, das ist keinen Hintergrund haben soll: background:none denn bekommt das sonst von irgendwoher. So ist es jetzt durchsichtig ohne Hintergrund, und das geht schon in die richtige Richtung .

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!