Suchbalken für Homepage

[redbull2906]

Hallo Leute,

habe mir in PS einen Textfeld erstellt als .png-Grafik.
Meine Frage jetzt - wie bau ich das in ein Formular ein so das der Text der geschrieben wird auch innerhalb meines Feldes steht?

<input type="image"> kanns ja net sein

und geht
<input type="text"> kann man da irgendwo die grafik definieren?

Danke für eure Hilfe

 

[BigBilly]

AW: Suchbalken für Homepage

value="TEXT"

Falls du das meinst...

 

[redbull2906]

AW: Suchbalken für Homepage

ne ich meinte vielmehr wie kann ich die Grafik anstatt des normalen Texfeldaussehens verwenden! Geht das überhaupt?

 

[Top_Gun]

AW: Suchbalken für Homepage

Wie kann man denn mit PS ein Formularfeld erstellen? Das geht doch gar nicht...

EDIT: Achso... so spontan wüßte ich nur eine Methode... Die Grafik als Hintergrund in ein div legen und die Formularfelder so ausrichten und via CSS definieren, dass es passt.

Ob du den Formularfeldern via CSS ne Grafik verpassen kannst, weiß ich nicht...

 

[redbull2906]

AW: Suchbalken für Homepage

ok ich lade des bild mla mit hoch zum besseren verständnis

 

[redbull2906]

AW: Suchbalken für Homepage

ok des mit den div werd ich mal versuchen

 

[Top_Gun]

AW: Suchbalken für Homepage

Also was auf jedenfall möglich ist, einem Textfeld eine Hintergrundgrafik zu geben. Diese Grafik erscheint dann aber lediglich in dem Textfeld und wird von den Rändern umschlossen. Diese kannst du mit CSS aber auch wegbekommen.

 

[dlogic]

AW: Suchbalken für Homepage

Mit CSS geht es recht gut... ein wenig noch die Größe des input Felds an die reale Größe der Grafik anpassen und dann gehts... sieht aber auch so schon recht gut aus.

Quellcode:

<style type="text/css">

.Box{
background-image:url('deinbild.png');
background-repeat:no-repeat;
padding-left:10px; // um den Cursor innerhalb der Box zu verschieben
width:223px; //Größenanpassung der Box
height:25px; //Größenanpassung der Box
}

</style>

<input type="text" name="search" class="Box">

 

[airwolf450]

AW: Suchbalken für Homepage

Also am einfachsten finde ich das Suchtool bei google, kannst du irgendwo auf der Googlehp einen Code dafür bekommen, musst kurz suchen, dann hastes gleich.

Grüße

andi

 

[leohh]

AW: Suchbalken für Homepage

Am einfachsten ist es wohl und dies aus verschiedenen Gruenden, die ich hier nicht naeher erlaeutern werde, wenn du vorab deine Grafik in 3 Bereiche aufsliced (linke Ecke, hauptteil & rechte Ecke)

Dann widmest du dich deinem Markup:

<span class="slt"></span>
 ** * *<span class="search"><input type="search" id="searchfield" /></span>
 ** * *<span class="srt"></span>

Semantisch inhaltslose span-Tags sind hier besser als div-container.
Danach nimmst du dir dein Marup vor:

span.slt *{
 **** * background: #fff url('[COLOR=#ff0000]lt.png[/COLOR]') no-repeat top left;
 **** * float: left;
 **** * width: [COLOR=Red]10px[/COLOR]; height: [COLOR=Red]21px[/COLOR]; * * * *}
 
 ** * * *span.srt *{
 **** * background: #fff url('[COLOR=#ff0000]rt.png[/COLOR]') no-repeat top left;
 **** * float: left;
 **** * width: [COLOR=Red]10px[/COLOR]; height: [COLOR=#ff0000]21px;[/COLOR]
 ** * * *}
 
 ** * * *span.search input {
 **** * background: [COLOR=#ff0000]#fff[/COLOR] url('[COLOR=#ff0000]bg.png[/COLOR]') repeat-x top left;
 **** * float: left;
 **** * border: 0;
 **** * height: [COLOR=#ff0000]21px[/COLOR]; width: [COLOR=Magenta]142px[/COLOR];
 **** * padding: [COLOR=#ff0000]3px[/COLOR];
 **** * font: [COLOR=Red]11px/13px arial[/COLOR];
 **** * color: [COLOR=Red]#000;[/COLOR]
 ** * * *}

Die rot markierten Stellen haengen von deinen geslicten Grafiken ab (Benennung und Groessenangaben - dies sollte sich aber von alleine verstehen). Die Breite deiner Suchbox, kann in diesem Fall beliebig sein, desshalb die Hervorgebung durch Magenta.

So koennte deine fertig geslicte Suchbox dann aussehen:
Links:
Hintergrund: Hier reicht eine Grafik die nur 1px breit ist.
Rechts:

Das clearen sollte man natuerlich nicht vergessen.
So ich hoffe, dass das einigermassen verstaendlich ist/war.

 

[sokie]

AW: Suchbalken für Homepage

Am einfachsten ist es wohl und dies aus verschiedenen Gruenden, die ich hier nicht naeher erlaeutern werde...

Das ist schade.

interessant und durchaus klärungsbedürftig sind die Sternchen im code...

 

[leohh]

AW: Suchbalken für Homepage

Einerseits ist es so, dass diese Methode sehr flexiebel ist - hier bist du lediglich an ein Minimum gebunden ( Breite der runde Ecken links und rechts plus den einen Pixel fuer den normalen Hintergrund ) jedoch keinem Maximum. Mit dem statischen Bild waere man sehr eingeschraenkt.


Die andere Sache waere, dass wenn man aus den geslicten Bildern in eine Art 'ImageMap' macht, man auch keine unnoetigen requests hat. An Groesse fuer die Bilddatei, was gleichzusetzen mit Trafficaufkommen ist, hat man auch gespart. Hier zwar jetzt nicht so wild aber auf einer gut besuchten Seite eines Fotografen z.B. schaut man schon, dass man so viel an Traffic spart wie nur moeglich, da man die Bilder des Artisten nicht verunstalten sollte.

Letztendlich fuehren einfach zu viele Wege nach Rom und das ist eben meiner.

[...]
interessant und durchaus klärungsbedürftig sind die Sternchen im code...

Sorry deswegen, es wird bei mir definitiv haeufiger vorkommen und ist soweit ich weiss ein Bug des Forums in Kombination mit Opera, weil ich meist aus Textmate oder e via Markdown schreibe und demzufolge meine Codesnippets auch formatiert werden.