Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[css] Buton względem pola input - Rozwiązany - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] Buton względem pola input - Rozwiązany (/thread-css-buton-wzgledem-pola-input-rozwiazany)

[css] Buton względem pola input - Rozwiązany - Helid - 06-08-2010

Witam
To mój pierwszy post na tym forum, do którego sprowadził mnie między innymi poniższy problem Smile. 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ół.

RE: [css] Buton względem pola input - Engine - 06-08-2010

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

spróbuj margin

RE: [css] Buton względem pola input - Helid - 06-08-2010

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.

RE: [css] Buton względem pola input - Kartofelek - 06-08-2010

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 Big Grin

RE: [css] Buton względem pola input - Engine - 06-08-2010

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

Kod:
.alignleft {
    float:left
}


Cytat:<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>


RE: [css] Buton względem pola input - Helid - 06-08-2010

(06-08-2010, 22:57)Kartofelek napisał(a): 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 Big Grin
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.