Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Formularz - Rozjężdżające się pola - 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Formularz - Rozjężdżające się pola (/thread-formularz-rozjezdzajace-sie-pola)



Formularz - Rozjężdżające się pola - hghormone - 05-03-2011

Witam.

Mam problem z prostym formularzem:

HTML:
Kod:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta />
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<form action="wpis.php" method="post">

<label>Data przyjęcia:</label> <input type="text" name="data_przyjecia" class='i1'><br>
<label>Model:</label> <input type="text" name="model" class='i1'><br>
<label>Nr imei:</label> <input type="text" name="nr_imei" class='i1'><br>
<label>Lock/Soft:</label><input type="radio" name="radio_lock" value="rlock" class='i1'><br>
<label>Naprawa:</label><input type="radio" name="radio_naprawa" value="rnaprawa" class='i1'><br>
<label>Uwagi:</label> <input type="text" name="uwagi" size="70" class='i1'><br>
<label>Nr tel.:</label> <input type="text" name="nr_tel" class='i1' ><br>
<label>Status:<form action="?"><div>
<select class='i1'>
<option>Punkt</option>
<option>Serwis</option>
<option>Serwis<---Punkt</option>
<option>Klient</option>
</select>
</div></form>
<label>Cena A (Punkt):</label> <input type="text" name="cena_a" class='i1' ><br>
<label>Cena B (Serwis):</label> <input type="text" name="cena_b" class='i1' ><br>
<label></label><input type="submit" value="Wyślij" style="margin: 2px 4px 0px 4px;">

</form>

</body>
</html>

CSS:
Kod:
h1 {
    text-align: center;
}
table {

    width: 78%;
    margin: 0 auto;
    table-layout: fixed;    
            
                }
table thead {
    background: #000;
    color: #fff;
}
table tbody {
    background: transparent;
    color: #000;
}
table tfoot {
    background: #525252;
    color: #fff;
    text-align: right;
}
table tfoot a:link, table tfoot a:visited {
    color: #fff;
    text-decoration: underline;
}
table tfoot a:hover {
    color: #fff;
    text-decoration: none;
}
table tbody tr:hover {
    background: #FFE9A0;
}
table tbody tr:nth-child(even) {
    background: #EBEBEB;
}
table tbody tr:nth-child(odd) {
    background: #D6D6D6;
}
table tbody tr:hover {
    background: #FFE9A0;
}
label {
    display: block;
    width: 150px;
    float: left;
    margin: 2px 4px -1px 4px;
    text-align: right;
}
caption {
font-size: 40px;
font-style: normal;
}
td {
padding:0px 0px;
margin: 10px
}
.i1 {
background-color:#EBEBEB;
border: 1px solid #006;
margin: 2px 4px 0px 4px;
    }
.k_pozycja{
  width:4% ;overflow:hidden;
  }
.k_data_przyjecia{
  width:9% ;overflow:hidden;
  }
.k_model{
  width:13% ;overflow:hidden;
  }
.k_nr_imei{
  width:10% ;overflow:hidden;
  }
.k_lock{
      width:4% ;overflow:hidden;
  }
.k_naprawa{
      width:4% ;overflow:hidden;
  }
.k_uwagi{
  width:15% ;overflow:hidden;
  }
.k_nr_tel{
  width 15% ;overflow:hidden;
    }
  k_status{
  width 15% ;overflow:hidden;
    }    
k_cena_a{
  width 1% ;overflow:hidden;
    }    
k_cena_b{
  width 1% ;overflow:hidden;
    }    
.k_czynnosc{
  width 9% ;overflow:hidden;
    }

Problemem są pola "Naprawa" i Uwagi ponieważ nie stoją one równo w rzędzie z innymi pozycjami, tylko są poprzesuwane w prawo.
Jaka jest tego przyczyna ?


RE: Formularz - Rozjężdżające się pola - hghormone - 05-03-2011

Udało mi się rozwiązać problem, wystarczyło przerobić kod tak :

Kod:
<label>Lock/Soft:</label><input type="radio" name="radio_lock" value="rlock" class='i2'><br>

<label>Naprawa:</label><input type="radio" name="radio_naprawa" value="rnaprawa" class='i2'><br>

a w CSS dodać:
Kod:
.i2 {
background-color:#EBEBEB;
margin: 2px 4px 6px 4px;
    }


Ale pojawił się następny problem ponieważ nie wiem jak ustawić w jednej lini powyższe 2 radio buttony ?
Próbowałem usuwać znacznik "<br>", ale nie pomaga wtedy 2 labele sa obok siebie a dopiero koło nich 2 radio buttony.
Kto wie jak ustawić to prawidłowo tzn. LABEL1>>RADIOBUTTON1 i obok w tej samej linii LABEL2>>RADIOBUTTON2 ?[/code]


RE: Formularz - Rozjężdżające się pola - Kartofelek - 05-03-2011

label {
display: block;


na

label {
display:inline-block


RE: Formularz - Rozjężdżające się pola - hghormone - 05-03-2011

Niestety nadal to samo.