Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 für Webdesigner

Beispiel-Skizze, Teil 10: Das Suchfeld gestalten

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Per CSS positionieren und gestalten Sie hier das Suchfeld in der Meta-Navigation.

Transkript

In diesem Film wird das Suchfeld - das ist hier bereits eingebaut - ein bisschen positioniert, sodass es zwischen Warenkorb und dem rechts außen hier steht. Im HTML ist das ein Suchformular mit Beschriftung "input type: search" und "input type: image." Das sind die beiden Formularfelder plus Beschriftung. Im CSS geht es los, indem ich hier die Meta-Navigation suche und das padding-right von 2 auf 12 rem erhöhe. Damit rechts außen ein bisschen Platz für die Navigation ist. So, das ist jetzt ganz rüber. Gleich wird mit absoluter Positionierung diese Formularfelder hier in diese Stelle gesetzt. Dazu geht es rüber in den Editor. Hier ist padding-right auf 12 rem gesetzt und etwas weiter unten, hier kommt zunächst einmal die Klasse hideMe - die könnte natürlich auch an anderer Stelle stehen - die das Label versteckt. Das ist position absolute, jenseits von Gut und Böse, -32768 Pixel nach links und genauso viel nach rechts. Das ist einfach eine schöne Zahl. Falls jemand einen so großen Monitor hat, dass er die immer noch sieht, dann kriegen die noch height und width auf 0. Unsichtbarer als unsichtbar. Jetzt kommen wir zum eigentlichen Kern der Sache. "Nav # metanav form". Das Formular, ganz simpel absolut positioniert. Aber nicht ganz so weit nach oben. Top 0 und right 2 rem. Das ist - kleiner Zwischenblick hier - So, an der richtigen Ecke sitzt es schon. Das funktioniert, weil die Meta-Nav selbst hier oben auch absolut positioniert ist. Das heißt, diese Werte für top und right beziehen sich auf den umgebenden Meta-Nav-Container. Dann kommt jetzt das Suchfeld dran. Das hat "Input # Suchfeld". Das hat die ID "Suchfeld". Das "nav metanav" davor wäre nicht zwingend nötig, aber es ist besser zu lesen. Als Erstes kommt hier einmal das neue Boxmodell. Ich will da nämlich ein bisschen padding geben und habe keine Lust, so viel zu rechnen. Damit das mit der width und allem anderen passt, setze ich dieses Feld auf border box width 8 rem. Ein bisschen Platz wollen wir lassen. 12 hatten wir Platz gemacht, 2 sind schon weg. Height 26 Pixel. Das ist die Grafik. Also nehme ich hier auch Pixel, damit das genau passt. Hintergrund, wie im Original, ist das ist EAEAEA. Die Schriftfarbe soll 242424 - das ist bei video2brain auch so, padding left. Ein bisschen Platz, bevor der Suchbegriff beginnt. Border "none", also keine Umrahmung, wie die meisten Browser das den Formularfeldern geben. Das ist das Formularfeld. Einmal kurz kontrollieren. Da sitzt es. Bei den Abständen kann man später noch ein bisschen Fine-Tuning machen. Last, not least, den Suchbutton. "Metanav input Suchbutton". Die Klasse hat er bekommen im HTML. Auch der wird positioniert und der ist dann innerhalb des Formulars. Top 0, right 0. Innerhalb des Formulars, weil auch das Formular absolut positioniert ist. Schauen wir uns das an. Sitzt, passt, wackelt und hat Luft. Das haut hin. Suchbegriff sitzt hier neben. Wenn ich reinklicke, passiert gar nichts. Sobald ich aber hier eingebe HTML5 als Suchbegriff, verschwindet das. Wenn jetzt serverseitig noch ein bisschen Logik dahinterhängen würde, dann würde dieses Formular auch funktionieren. Absolute Positionierung, hier "edit space" ist absolut, die sind absolut, das Formular ist absolut und alle sind ineinander verschachtelt. Sie bleiben trotzdem relativ flexibel.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 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!