[css] Buton względem pola input - Rozwiązany

[Helid]

Witam
To mój pierwszy post na tym forum, do którego sprowadził mnie między innymi poniższy problem . Przejdźmy może jednak do rzeczy, potrzebuje "wyśrodkować" w jednej linii input typu text + buton zatwierdzający. Kod wygląda następująco:

Kod:

<form>                      
                    <input type="text" name="search" id="searchbox" size="40" />
                    <input type="image" src="images/button-search.gif" name="GO" id="go" />        
                </form>

Demo można zauważyć pod adresem: http://helid.hekko.pl/katalog/ - 1 formularz u góry po lewej.
Jak widać button idzie zbyt wysoko do góry, margin i padding nie pomaga, ponieważ wraz z nim input tekstowy też idzie w dół.

[Engine]

#go {
position:relative;
........
}

spróbuj margin

[Helid]

Kod:

position:relative;

Nie pomaga

Kod:

Jak widać button idzie zbyt wysoko do góry, margin i padding nie pomaga, ponieważ wraz z nim input tekstowy też idzie w dół.

Margin już testowałem wcześniej.

[Kartofelek]

1) nie mozna umieszczac inpotow bezposrednio w formie - musi byc cos "otaczajacego" czyli np div lub fieldset.


2) overflow:hidden dla formy + ewentualnie width i heigth zalatwi sprawe
3) używaj labeli, bo bez tego teksty login i hasło są mało znaczące.

Kod:

<form>
<fieldset>
<label for="login">Login:</label>
<input type="text" name="login" id="login" value="" />
....
....
</fieldset>
</form>

a potem dla labeli i calej reszty "kropków" dajesz float:left i jestes

[Engine]

Więc postaw je obok siebie na div-ach. I wtedy ustaw margin lub padding dla danego div-a

Kod:

.alignleft {
    float:left
}

<form>
<div class="alignleft">
<input type="text" name="search" id="searchbox" size="40" />
</div>
<div class="alignleft">
<input type="image" src="images/button-search.gif" name="GO" id="go" />
</div>
</form>
<div id="clear"></div>

[Helid]

1) nie mozna umieszczac inpotow bezposrednio w formie - musi byc cos "otaczajacego" czyli np div lub fieldset.


2) overflow:hidden dla formy + ewentualnie width i heigth zalatwi sprawe
3) używaj labeli, bo bez tego teksty login i hasło są mało znaczące.

Kod:

<form>
<fieldset>
<label for="login">Login:</label>
<input type="text" name="login" id="login" value="" />
....
....
</fieldset>
</form>

a potem dla labeli i calej reszty "kropków" dajesz float:left i jestes

Bez efektu tylko ramka doszła, patrz demo.
---Edit
Rozwiązanie użytkownika Engine po moich małych przeróbkach działa jak należy.
Plus dla wszystkich za pomoc.