Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Suchformular mit CSS gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Gestaltung des Suchformulars mit Hilfe von CSS umfasst die Abrundung der Ecken sowie das Einbinden eines passenden Symbols, um den Suchvorgang zu starten.

Transkript

Das Suchformular wurde im HTML eingebaut und PCSS mit absoluter Positionierung rechts aus nie hier in den Navibereich geschoben und soll jetzt gestaltet werden, so, dass es in dieser Richtung geht etwas abgerundet mit einer Lupe als Symbol. Dazu werde ich in dem HTML in den Webseiten hier zunächst einmal das HTML etwas ändern, denn dazu nehmen wir keinen Server mit Button, sondern ein image-Element. Das bekommt die KlasseLupe und eine Datei Namens Lupe. Da ist sie schon, die zeige ich ihnen gleich noch kurz, und einen alt-Text, wo einfach nur Suchen erscheinen soll, falls der Browser die Grafik aus irgendeinem Grund nicht darstellt. Also, dieses Type Image wird an Stelle eines normales Submit Button benutzt. Die Lupe sieht so aus, 14x15 Pixel, relativ klein hier, und die wird gleich hier im HTML, da war sie eingebaut. So, das kopiere ich und füge das auch auf den anderen Seiten ein und speichere das auch, und schauen wir das gleich im Browser an. Gespeichert ist alles. Hier wird neu geladen. Da ist eine Lupe. Der Rest ist nur noch ein bisschen CSS, wie man schon sagt. So, los geht es im Navibereich wieder input#suchfeld, und dazu dann ein bisschen CSS zur Gestaltung des Eingabefeldes. Hier im HTML sehen Sie input id=suchfeld. Dieses Element wird jetzt gesteltet. So, Breite 115px font-size. Das nageln wir mal relativ klein fest 11px Border:none. Border-radius soll ein bisschen rund sein - 10px abgerundet. Das ist Geschmackssache, kann man mal ausprobieren. Und ein bissche Padding soll es bekommen, damit der eingegebene Text nicht zu ganz daran schwibt, recht ein bisschen mehr Padding. Sie ahnen es vielleicht schon, da kommt die Lupe hin mit absoluter Positionierung und kein margin input#suchfeld. So, wenn der Cursor eingegeben wird, soll das weiß bleiben navibereich input: focus, und das wird Background:white. So. Und neu laden, und noch stimmt die Positionierung der Lupe nicht, aber das Feld sieht schon recht ansprechend aus. Kommen wir zum letzten Schritt #navibereich input.lupe, Klammern und los geht es Position absolute, und zwar wird jetzt positioniert relativ zu dem oben gebenden Formular. Das hat Position absolute, die Lupe sitzt dadrin, also bezieht sich diese absolute Positionierung auf dieses Element, und diese absolute Positionierung oben auf den relativ positionierten Navibereich. Eine richtig schone kleine Kaskade, deswegen heißt der auch CSS top:3 px, padding:0 und margin auch 0 ist nur aus der Sicherheit halber ab in den Browser neu laden. Und wir haben ein wunderbar gestaltetes Suchfeld hier. Wenn ich jetzt Text eingeben schreibe und was passiert, wenn der text länger wird, Sie sehen, die Lupe ist geschützt auf Grund des Paddings hier. So, das ist das. Jetzt müssen wir einfach nur noch hier ein bisschen aufräumen und dafür sorgen, wenn das auf kleineren Bildschirm erscheint, dann soll dieses Suchfeld gar nicht da sein, denn es wird da keine gute Figur machen. Ich gebe also jetzt hier wieder eine Media Query ein, Media screen und sage eine kleine Einschränkung max-width:768px, also bis 768px soll dieses Ding schlicht und einfach ausgeblendet werden: navibereich form (display:none), so, und das Formular ist damit weg und der Navibereich selbst. Der braucht dann das Padding nicht mehr: padding-right: 0. Das Padding war nur eingerichtet worden für die Positionierung des Suchformulars. So. Damit ist navibereich form (display: none) unterhalb von 768px. Alles in Ordnung. Ende @media einfach nur der Vollständigkeit halbar. So, damit ist das Suchformular positioniert. Zum Funktionieren bringen Sie es mit einem serverseitigen Programm von swiftype.com oder der freefind.com. Dort wird beschrieben, wie man das einbaut in einem CMS, wie Wordpress oder Contao ist eine Suchfunktion mit drin, aber das HTML und das CSS für ein ansprechendes Suchformular, das kennen Sie jetzt.

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!