Suchformular -> Lupe als Submit-Button im Suchformular

**freak_me11** · 30.01.2011, 16:29

Hallo.

Ich würde gerne meine Lupe in das Suchfenster integrieren. Allerdings weiß der Text natürlich nicht, dass dort eine Lupe kommt und schreibt einfach drüber. Wie kann ich das beeinflussen, dass der Text weiß, aha da kommt nun die Lupe, da darf ich nicht drüber gehen?

**planepix** · 30.01.2011, 16:35

Hallo freak_me11,

im Inhaltselement Absende-Button kannst Du anstelle des Textes ein Bild aus der Dateiverwaltung auswählen, dann sitzt die Lupe anstatt des Buttons an dieser Stelle.

Alles andere gelingt dann mit CSS.

**freak_me11** · 30.01.2011, 16:51

hallo planepix,

danke für die schnelle Antwort. Genau so habe ich es auch gemacht. Es ist also ein CSS Problem. Ich habe es relativ Positioniert und somit in die Textfläche reinbekommen (siehe Bild oben). Jetzt ist nur die Frage, wie ich das Problem mit CSS lösen kann.

Eigentlich müsste ich per CSS nur den Text im Suchfenster ansprechen können und dem geb ich dann ein Padding nach Rechts, oder?

**planepix** · 30.01.2011, 16:57

Kannst Du einen Link psoten? Sonst gerne auch als PN.

Mit der CSS-Eigenschaft text-indent kann Du den Text verschieben.

Zum Beispiel:

Code:

#suche .submit
{
text-indent:-4000px;
}

Die Bzeichnung müsstest Du an Dein Suchformular anpassen.
text-indent verschiebt immer die erste Zeile eines Absatzes, in dem Beispiel um 4000px nach links (-4000px); plus ginge natürlich auch.

Da die Bildschirme im Moment bei +- 2000 px Breite "aufhören", genügt ein groß genug gewählter Wert.

**freak_me11** · 30.01.2011, 17:08

Eigentlich müsste ich per CSS nur den Text im Suchfenster ansprechen können und dem geb ich dann ein Padding nach Rechts, oder?

Link habe ich leider noch keine, da es noch lokal ist. Die Position des Textes ist ja okay, aber er läuft einfach zu weit -> in die Lupe hinein. Er muss kurz vor der Lupe sich so verhalten als würde das Suchformulareingabefeld enden. Dann kann man ja auch weiter schreiben, ohne aus dem Eingabefeld zu kommen. Die Lupe muss sich also so verhalten, wie das ende des Feldes...

**planepix** · 30.01.2011, 17:20

Ansonsten schau Dir einmal die Suche auf meiner Seite an (Link in der Signatur unten rechts) sowie die CSS dazu.

Mit der Erweiterung cleardefault kannst du auch einen Begriff vorbelegen und bei Klick ins Eingabefeld löschen.

**freak_me11** · 30.01.2011, 17:39

Du hast bei deiner Suche allerdings den submit-button auserhalb des Suchefensters.
Ich hätte es gerne so, wie z.B in der Google Suche neben der Adresszeile im Firefox.
-> siehe Bilder

**planepix** · 30.01.2011, 17:44

Ok, das sind dann andere Voraussetzungen

Dann würde ich versuchen, den Submit-Button mit position:relative; nach links zu verschieben; allerdings die Breite auf die Lupenbreite beschränken, so dass die Eingabe nicht dadurch verdeckt ist.

**freak_me11** · 30.01.2011, 17:49

Jetzt sind wir zusammen, sehr gut! ;-)

-> Dann würde ich versuchen, den Submit-Button mit position:relative; nach links zu verschieben; -> erledigt.

allerdings die Breite auf die Lupenbreite beschränken, so dass die Eingabe nicht dadurch verdeckt ist. -> Hier liegt das Problem. Ich will ja nun nicht das Suchfeld beschränken, sondern nur den Text, der darf also nicht bis zum Ende des Suchfeldes laufen, sondern nur bis zum Anfang der Lupe, als wäre die Lupe das Ende des Suchfeldes. Wenn ich nun die Breite des Suchfeldes kleiner mache, dann steht die Lupe natürlich wieder nach dem Feld. -> Soll ja aber ins Feld rein. Also muss ich doch irgendwie den Text direkt ansprechen oder?

**planepix** · 30.01.2011, 17:57

Genau das liese sich via Online-Link schnell(er) herausfinden

Ansatz: Lupe als Bild, wie bisher, darum einen Rand wie beim Eingabefeld (oben, rechts, unten). Beim Eingabefeld Rand oben, links und unten) und so positionieren, das es optisch eine Einheit bildet.