PDA

Visualizza la versione completa : problema con la disposizione dei radiobutton


 
mbolo
29-06-2010, 18:44
Ciao a tutti,
ho un problema con la disposizione dei radio button, nel senso che una semplice scelta [x] "Si" [ ] "No" viene renderizzata in verticale (vedi screenshot).

http://img41.imageshack.us/img41/8697/79263154.png

Di seguito il codice della mia pagina.
Come e` possibile fare in modo che venga visualizzato [x] "Si" [ ] "No" ?

Grazie

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fff: Registration</title>
</head>
<link rel="stylesheet" type="text/css" href="captiveportal-style.css" />

<body>

<form method="post">


<label for="name">A</label>
<input type="text" name="username" id="txt_username" />


<label for="name">B</label>
<input type="text" name="fullname" id="txt_name" />


<label for="name">C</label>
<input type="text" name="fullname" id="txt_name" />


<label for="name">D</label>
<input type="text" name="address" id="txt_addr" />


<label for="name">Sei gia' cliente?</label>
<input style="text-align: left;" type="radio" name="group1" value="si" checked>Si</input>
<input style="text-align: left;" type="radio" name="group1" value="no">No</input>


<input id="send" type="submit" name="btn_submit" id="btn_submit" value="Registrati" />



</form>

</body>
</html>

CSS:
body { margin:0;
padding:0;
text-align: center;
}

form {
font:13px Georgia, "Times New Roman", Times, serif;
background:#eee;
margin:20px;
padding:10px 20px;
width:330px;
margin-left: auto;
margin-right: auto;
}

form ol {
list-style:none;
margin:0;
padding:0;
}

form li {
padding:6px;
background:#e1e1e1;
margin-bottom:1px;
}

form li#send {
background:none;
margin-top:6px;
}

form label {
float:left;
width:150px;
margin-right:7px;
color:#0066CC;
line-height:23px;
}

form input {
padding:2px;
font:13px Georgia, "Times New Roman", Times, serif;
border:1px solid #999999;
width:150px;
}

form input:focus,
form textarea:focus {
border:1px solid #666;
background:#e3f1f1;
}

form li#send button {
border:none;
padding:4px 8px 4px 28px;
border-radius:15%;
-moz-border-radius:15%;
-webkit-border-radius:15%;
color:#fff;
margin-left:77px;
cursor:pointer;
}

form li#send button:hover {
background-color:#006633;
}

slegolego
29-06-2010, 19:15
la cosa piu' semplice che puoi fare e' eliminare a piedi pari la riga 41. > width:150px;
Funziona su FF e Safari , quindi probabilmente non funzionera' su IE.

Potrebbe farti comodo scaricare Firebug per Firefox e cominciare a usarlo.

Ps spero che nel ricopiare ti sia scordato il DTD ma che esista nel tuo documento

vdesigns
30-06-2010, 09:34
devi fare cosė. il radio button prende come dimensione i 150px che hai dato all'input. ma non c'č bisogno di cancellare la riga. devi solo creare una nuova classe:

.radio {width: 20px !important; float: left;}
e l'associ ai radio button. :ciauz:

slegolego
30-06-2010, 12:43
!important e' parzialmente supportato da IE6 e precedenti, il codice CSS non e' validato per cui non e' buona norma abusarne.
Piuttosto crea una classe per i campi di testo e una per i button e applica il width a quelli.

Ciao a entrambi

Loading