Suchfeld will nicht passen

[typhoch2]

Hey ich versuche schon seit einiger Zeit ein Suchfeld vernünftig zu gestalten, aber es will einfach nicht klappen und langsam verzweifle ich.

also meine vorlage sieht so aus

Um es umzusetzen hatte ich mir gedacht, das Bild in 3 Teile aufzuteilen. Also die Lupe bis zum rechteckigen Input Field soll vorne hin. Danach das input field mit border top und bottom 1px und left und right 0px. Dahinter dann die Abrundung. Leider bekomme ich diese 3 Elemente nicht hintereinander. Entweder liegen sie aufeinander, die Styles passen nicht, oder die beiden Bilder liegen nebeneinander und das input feld obendrauf.

Habe auch gerade keinen passablen Code mehr da ich ich immer wieder gelöscht habe und nun war da nichts mehr wie es sollte. Also das ist noch da:

<div id="navitop_rechts">
<img src="images/searchicon.gif" width="19" height="20">
hier soll das input feld sein
<img src="images/searchicon2.gif" width="9" height="20">
</div>

 

[Chumper]

Float ist hier das Stichwort.
Das erste Bild links floaten, das zweite rechts, fertig.

Die Breite gibst du dem navitop_rechts und border-top und border-bottom auch, dann sollte das klappen.

 

[typhoch2]

Hey danke schonmal, aber float hatte ich auch ab und zu mal drin. Habs nun nochmal probiert...

<div id="navitop_rechts">
		
		<img src="images/searchicon.gif" width="19" height="20" style="float:left ">
		<form method="GET" action="index.php">
		<input type="hidden" name="content" value="suche">
		<input maxlength="1024" name="q" value="" style="width:140px; border-bottom:1px solid #9ca4af; border-left:0px; border-right:0px; border-top:1px solid #9ca4af;">
	</form>
              <img src="images/searchicon2.gif" width="9" height="20" style="float:right;">

</div>

die css zur navitop_rechts

#navitop_rechts {
width: 180px;
float:left;
height:22px;
border: 0px;
}

nun ist das input feld genau hinter dem ersten Bild mit der Lupe, jedoch kommt die Abrundung für das 2te Bild rechts eine Zeile tiefer und nicht direkt ans inputfeld.

Ich bekomms nicht nach oben.

Mfg

 

[Maik]

Moin,

das zu umfliessende Element wird im Markup an erster Stelle genannt - also:

<div id="navitop_rechts">

        <form method="GET" action="index.php">     
        <input type="hidden" name="content" value="suche">
        <img src="./images/searchicon.gif" width="19" height="20" style="float:left ">
        <img src="./images/searchicon2.gif" width="9" height="20" style="float:right;">    
        <input maxlength="1024" name="q" value="" style="width:140px; border-bottom:1px solid #9ca4af; border-left:0px; border-right:0px; border-top:1px solid #9ca4af;">
        </form>           

</div>

mfg Maik

 

[typhoch2]

Hey Danke Maik Nun klappt es auf jeden Fall bei mir in Firefox. Mein Internet Explorer 6 gibt mir allerdings wieder einmal nur wirrwarr aus. Seht selbst. Kann man das irgendwie für den IE optimieren? Weil ich meine ich bin sicher nicht der einzige der noch son alten IE hat, nagut ich nutze ihn nie aber manche tun das ja.

http://www2.pic-upload.de/02.08.09/66d2mssp337o.jpg

 

[Maik]

Kann man

<div id="navitop_rechts">

    <form method="GET" action="index.php">
            <input type="hidden" name="content" value="suche">
            <img src="./images/searchicon.gif" width="19" height="20" style="float:left;">
            <input maxlength="1024" name="q" value="" style="width:140px; border-bottom:1px solid #9ca4af; border-left:0px; border-right:0px; border-top:1px solid #9ca4af; float:left;">
            <img src="./images/searchicon2.gif" width="9" height="20" style="float:left;">
    </form>

</div>

mfg Maik