Autor |
Nachricht |
victor1623
Threadersteller
Dabei seit: 03.09.2010
Ort: Magdeburg
Alter: 32
Geschlecht:
|
Verfasst Fr 03.09.2010 08:41
Titel Suchformular- Absendebutton direkt im Eingabefeld platzieren |
|
|
Hallo und guten Morgen. Ich hab mal eine Frage an Euch.
Und zwar, ich möchte einen Suchformular so gestalten, dass der "Absendebutton" sich direkt im Eingabefeld befindet und nicht irgendwo nebenan, wie es normalerweise üblich ist. Könnt ihr mir evtl. ein Paar Tipps geben, wie man sowas hinbekommt? Als Anhang habe ich eine Skizze eingefügt, damit man noch besser versteht was ich eigentlich will.
Uploaded with ImageShack.us
Danke schon mal im Voraus für die Hilfe
Gruß
Viktor
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 03.09.2010 09:22
Titel
|
|
|
Du mußt Dir für solch ein Vorhaben eine entsprechende Grafik vorbereiten. Diese gibst du dem form-tag zB als Background-Image.
Code: | <form>
<fieldset>
<input type="text" id="search" />
</fieldset>
</form>
|
Dein Input-Feld muß Du dann natürlich noch so gestalten das es nicht länger als die Grafik ist und nicht auffällt.
2 Möglichkeiten hast Du dabei. Entweder ohne Submit-Button, und Du vertraust darauf das Deine User die Eingabe mittels [Enter] bestätigen. Oder Du nimmst den Submit Button dazu, und mußt diesesn ebenso gestalten das er nicht zu sehen aber klickbar ist.
Hier hat es auch noch ein paar Beispiele
http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
http://www.webdesignerwall.com/tutorials/beautiful-css3-search-form/
Zuletzt bearbeitet von Kash am Fr 03.09.2010 09:26, insgesamt 2-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
_Paul_
Dabei seit: 26.11.2007
Ort: Berlin
Alter: 36
Geschlecht:
|
Verfasst Fr 03.09.2010 11:51
Titel
|
|
|
Alternativ kannst du einfach dem Form-Element die Eigenschaft position: relative geben und den submit-button positionieren (position: absolute;), so mach ichs immer. Hält auch Text- und Komplett-Zoom stand.
Zuletzt bearbeitet von _Paul_ am Fr 03.09.2010 11:51, insgesamt 1-mal bearbeitet
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 03.09.2010 11:51
Titel
|
|
|
Ich würde form die border geben, und darin den submit-Button als schwarzes Quadrat stylen. Das Eingabefeld steht ohne border links daneben.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 03.09.2010 11:52
Titel
|
|
|
heiko_rs hat geschrieben: | Ich würde form die border geben, und darin den submit-Button als schwarzes Quadrat stylen. Das Eingabefeld steht ohne border links daneben. |
Wenn es so aussehen soll wie er zeigt, dann wäre das das einfachste.
@TE: Kannst Du uns mal das fertige Layout des Suchformulares zeigen?
|
|
|
|
|
victor1623
Threadersteller
Dabei seit: 03.09.2010
Ort: Magdeburg
Alter: 32
Geschlecht:
|
Verfasst Fr 03.09.2010 12:03
Titel
|
|
|
Die Variante von heiko_rs habe ich auch gemacht. Aber auch die Lösung von _Paul:_ ist recht interessant...muss ich auch mal ausprobieren! vielen Dank für eure Hilfe! Ihr habt mir sehr geholfen. Schönes Forum hier ))
Gruß Viktor
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 03.09.2010 12:27
Titel
|
|
|
victor1623 hat geschrieben: | Aber auch die Lösung von _Paul:_ ist recht interessant |
Wie man die Elemente nebeneinander stellt, ist allerdings ziemlich egal Ob per float oder position, oder durch ihr default-inline-block-Verhalten.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Illustrator - Objekte direkt nebeneinander platzieren
Suchformular Offline
Mit dem Absendebutton eine Variable weitergeben?
Abfrage bei Eingabefeld
Textvorgabe im Eingabefeld löschen
JS: Eingabefeld löschen Button
|
|