Wyśrodkowanie formularza

Question

Witam,

 

W jaki sposób dostosować szerokość formularza do rozdzielczości ekranu użytkownika?

Przy usunięciu szerokości i dodaniu margin-left: auto; i margin-right: auto; całość "rozjeżdza" się po ekranie, tzn. textarea  nie ustawia się pod pozostałymi polami.

Aktualny kod CSS:

#form {
margin:0 auto;
padding:20px;
margin-top:20px;
}

#form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-size: 14px;
color: #ffffff;
text-align: center; 
width: 1300px;

}

#form textarea
{
margin-bottom: 25px;
width: 300px;
height: 70px;
border: 10px;
background-color: #253341;
color: #ffffff;
text-align: center;
width: 1300px;

}

#form input 
{
margin-bottom:25px;
width:300px;
height: 25px;
border: 10px;
background-color: #253341;
color: #ffffff;
width: 1300px;
text-align: center;

}

#form input#submit 
{
width:255px; 
cursor:pointer;
margin-bottom:0px;
background-color: #1da6f9;
color: #ffffff;
width: 600px;
margin-left: 0px;
}

 

Efekty przy zastosowaniu stałej szerokości: www.linux-zsp2.cba.pl

Answer 1

Możesz nadać formularzowi szerokość [w procentach], a inputy same będą się dostosowywały do szerokości. [O ile się nie mylę to wszystkie input mają width: 100%]

Comments

Rzeczywiście trzeba dać  width: w % ale wg mnie wszędzie i dodatkowo 'margin-left: auto; margin-right: auto;'

np.:
margin-left: auto;
margin-right: auto;
width: 95%;

 i jeszcze dodatkowo 'display: block;' w label, input i textarea.: http://wklej.org/id/1900701/

pozdrawiam,

Answer 2

zamiast px daj wartość width: w procentach

Answer 3

Witam! Oprócz pewnie innych przyczyn ja ze swojego poziomu wiedzy widzę, że powtarzają się deklaracje szerokości np. 300px i 1300px oraz w #form najpierw deklarowany jest margines górny 0px a potem 20px. Pozdrawiam