HTML/CSS Gelöst: Suchfeld in Design einarbeiten

[M3Y3R]

Hallo,

immer wieder sieht man im Design ein Such-Feld welches sich perfekt im Design integriert (Siehe hier!).
Ich habe mich schon oft gerfagt wie dies funktioniert und auch etwas ausprobiert (z.B: Hintergrundbild). Doch leider sah man bei mir jedesmal die Umrandung des Input-Feldes...

Auch über Google habe ich bisher keine Infos erhalten wie dies funktioniert.
Kann mir jemand sagen oder Links geben wo dies beschrieben ist wie ich die Suchfelder so wie im Beispiel angegeben, einarbeiten kann ?

Danke im vorraus !


Mit freundlichen Grüßen
Papenburger

 

[Renegade]

Hi,

CSS ist die Lösung
border deaktivieren, Hintergrundbild, Schriftart und Schriftfarbe ändern, ggf. noch Größe und Abstände, und schon hast du ein individuelles Input.

/Renegade

 

[M3Y3R]

Hi,

CSS ist die Lösung
border deaktivieren, Hintergrundbild, Schriftart und Schriftfarbe ändern, ggf. noch Größe und Abstände, und schon hast du ein individuelles Input.

/Renegade

Umpf, das ist ja eigentlich easy und eigentlich hätte ich da ja auch selbst drauf kommen können, aber komischerweise hat es nie so hingehauen, wie ich es wollte....

Naja, besten dank !

 

[Ronja]

Oder mit Hintergrundbild ..

<div style="background-image:url(image.jpg); width:150 px; height:25 px;">
 <form>
  <input name="suchen" type="text" style="background:transparent;" />
  <input type="submit" value="Suchen" />
 </form>
</div>

Gruss Ronja

 

[M3Y3R]

Ich wusste, dass das nicht wirklich funktioniert....

Folgendes habe ich gemacht:

<input type="text" name="search" value="" style="border:0px; background-image:url(img/search.png); width:228px; height:23px;">

Aussehen tut es nun wie folgt (man Achte auf den weißen Rand links und unten!):


Aussehen soll es aber wie folgt:



Wer hat tipps warum dies so ist?
Die größe des Bildes ist: 227 Pixel x 23 Pixel

Danke !

 

[Astrodan]

Vielleicht noch irgendwelche paddings oder margins gesetzt? Probier mal die auf null zu setzen.

 

[M3Y3R]

Vielleicht noch irgendwelche paddings oder margins gesetzt? Probier mal die auf null zu setzen.

Leider auch nicht...
Folgendes habe ich nun probiert:

CSS:

input.searchfield{
border-style: none;
background-image:url(../img/search.png);
width: 227px;
height: 23px;
font-size: 11px;
}

Input-Feld:

<input class="searchfield" type="text" name="search" value="Suchen...">

 

[Renegade]

Nur weil du in der CSS keine Abstände explizit definiert hast, bedeutet es ja nicht, dass das Element keine Abstände hat

Versuch also mal folgendes:

input.searchfield{
margin:0;
padding:0;
border:0;
background-image:url(../img/search.png);
width: 227px;
height: 23px;
font-size: 11px;
}

 

[M3Y3R]

Nur weil du in der CSS keine Abstände explizit definiert hast, bedeutet es ja nicht, dass das Element keine Abstände hat

Das stimmt auch. Ich habs aber vor dem Posting wieder raus genommen um zu schauen ob überhaupt irgendwas passiert...

Mit deinem Beispiel siehts wie folgt aus:

 

[theHacker]

Firebug einsetzen

 

[Astrodan]

Zur Not auch mal die URL angeben wo du das testest falls möglich, dann können wir da auch mal dran rum spielen. An den Bildern kann ich/können wir leider auch nur spekulieren was es sein könnte.

 

[LiveKeeper]

Hi!

Schreib mal anstatt 'border-style:' einfach nur 'border:'

Gruss
LK

 

[Ronja]

Kann es sein, dass Dein Bild nur 21px hoch ist, statt den angegebenen 23px? dann funktioniert es nämlich .-)

 

[M3Y3R]

Firebug einsetzen

Zeigt leider auch nicht mehr an...

Zur Not auch mal die URL angeben wo du das testest falls möglich...

Ist leider nicht möglich, da ich XAMPP benutze.

Schreib mal anstatt 'border-style:' einfach nur 'border:'

Schon ausprobiert, bringt leider auch keine Besserung.

Kann es sein, dass Dein Bild nur 21px hoch ist, statt den angegebenen 23px? dann funktioniert es nämlich .-)

Laut Eigenschaften von Windows und Photoshop ist das Bild 227px breit und 23px hoch...

Wenn ich eine kleinere Höhe einstelle sieht es zwar besser aus, bringt aber nicht das gewünschte Ergebnis, da links immer noch das weiße Fleck ist und die Rundungen der Box nicht zu sehen sind (siehe oben wie es aussehen sollte...). Kann es sein, dass es an der Tabelle liegt? Ich habe eine Tabellenzeile drumrum gebastel und auch dort ein BG-Bild....
Die Zeile ist nicht viel höher...

Eigentlich sollte die Tabelle aber keine Auswirkungen haben oder ?

Edit 27.03.2010 - 19:02 Uhr:
Ich habe es nun anders realisieren können.
So wie Ronja oben beschrieben hatte habe ich es noch einmal probiert.
Ich habe nun folgendes gemacht:

<div class="search">';
<input class="searchfield" type="text" name="search" value="Suchen..." >
</div>

div.search{
	text-align: left;
	margin:0px;
	padding:0px;
	border:0px;
	width: 230px;
	height: 23px;
	background-image:url(../img/search.png); 
}

input.searchfield{
	margin:0px;
	padding:0px;
	padding-left:5px;
	border:0px;
	width: 200px;
	height: 23px;
	font-size: 11px;
	background:transparent;
}

So scheint es zu funktionieren... ;)

Danke allen für die Hilfe !

 

[Ronja]

Laut Eigenschaften von Windows und Photoshop ist das Bild 227px breit und 23px hoch...

Wenn ich eine kleinere Höhe einstelle sieht es zwar besser aus, bringt aber nicht das gewünschte Ergebnis, da links immer noch das weiße Fleck ist und die Rundungen der Box nicht zu sehen sind (siehe oben wie es aussehen sollte...). Kann es sein, dass es an der Tabelle liegt? Ich habe eine Tabellenzeile drumrum gebastel und auch dort ein BG-Bild....
Die Zeile ist nicht viel höher...

Eigentlich sollte die Tabelle aber keine Auswirkungen haben oder ?

Vielleicht stellst Du uns mal mehr Code zur Verfügung?? Was hat die Tabelle für Eigenschaften?

 

[theHacker]

Zeigt leider auch nicht mehr an...

Zeigt natürlich mehr an. Firebug hat eine eigene UI, die dir detailierte Infos über CSS-Eigenschaften und Abmessungen eines Elements zeigt. Du musst Firebug natürlich aktivieren und das Element betrachten.

Eigentlich sollte die Tabelle aber keine Auswirkungen haben oder ?

Tabelle? Ich dachte, du willst ein Suchformular ausrichten. Da bist du mit einer Tabelle n bissle falsch

 

[Ronja]

Titel: Gelöst: Suchfeld in Design einarbeiten ?????

Wie wäre es, wenn Du Deine Lösung hier herschreibst? Haben sich ja einige Leute den kopf drum zerbrochen und es ist schon immer ganz nett, wenn man dann erfährt, woran es lag!

 

[theHacker]

@Ronja:
In Post #14 is n Edit mit einer Lösung.

 

[M3Y3R]

Titel: Gelöst: Suchfeld in Design einarbeiten ?????

Wie wäre es, wenn Du Deine Lösung hier herschreibst? Haben sich ja einige Leute den kopf drum zerbrochen und es ist schon immer ganz nett, wenn man dann erfährt, woran es lag!

Wie theHacker schon sagte, in meinem letzten Post ist ein Edit mit der Lösung...

Danke nochmals für die Hilfe !

 

[Ronja]

Oh sorry ... auf die Idee nach Editiertem zu suchen bin ich nicht gekommen .-)
Schönen Abend noch!