Forum PHP.pl > [CSS][HTML]Problem z wyśrodkowaniem pola input

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]Problem z wyśrodkowaniem pola input

miras

31.08.2012, 12:27:16

Witam, mam następujący problem:

plik index.html:

[HTML] pobierz, plaintext 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 	 <head>
		<meta name="description" content="vvvvv" /> 
		<meta name="keywords" content="" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" href="stylesheets/x.css?1313239951" media="screen" type="text/css" />	
	</head>
	<body>
 
 
 
				<form action="" method="post">
					<div class="inp"><input type="text" name="szukaj" value="Wpisz produkt"> </div>
					<div class="subm"><input type="submit" value=""></div>
				</form>
 
 
 
 
	</body>
</html>
 
[HTML] pobierz, plaintext

plik style.css:

[HTML] pobierz, plaintext 
body {
	background-color: #fff;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
 
 
 
 
 
.inp input {
	background-image: url(../images/layout/szukaj_input.png);
	background-repeat: no-repeat;
	width: 284px;
	height: 35px;
	float: left;
	border: none;
}
 
.subm input {
	background-image: url(../images/layout/szukaj_subm.png);
	background-repeat: no-repeat;
	width: 63px;
	height: 35px;
	float: left;
	border: none;
	margin-left: -30px;
}
 
[HTML] pobierz, plaintext

i value w polu input czyli: Wpisz produkt wyświetla mi się tak:

http://ss-host.pl/images/2mpm.jpg a ja chcę go trochę do góry, nie ma żadnych paddingów ani nic, a tekst w środku inputa tak na dół mi zjeżdza, proszę o pomoc, bo już nie mogę..

Dzięki z góry!

erix

31.08.2012, 12:42:55

line-height?

miras

31.08.2012, 12:49:28

No nie do końca, bo jak dam line-height: 50px; to ucieka w dół, a jak dam line-height: -50px; to jest nadal w tym samy miejscu czyli tak jak na powyższym ssie.

rocktech.pl

31.08.2012, 12:55:50

Witam.

[CSS] pobierz, plaintext 
.inp input {
...
    margin-top: -5px;
...
}
[CSS] pobierz, plaintext

miras

31.08.2012, 13:00:00

margin-top:-5px; przenosi cały input, a ja potrzebuję, żeby przeniosło zawartość tego inputa, w tym przypadku by podziałało: padding-top: -5px; ale też nie daje żadnego efektu..

rocktech.pl

31.08.2012, 13:13:22

Wartość padding nie może być ujemna.

Zrób tak na div .inp nałóż obrazek. I potem ostyluj odpowiednio .inp input.

[CSS] pobierz, plaintext 
.inp  {
 
	background-image: url(../images/layout/szukaj_input.png);
 
	background-repeat: no-repeat;
 
	width: 284px;
 
	height: 35px;
 
	float: left;
 
	border: none;
 
}
[CSS] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.