|
|||||||
|
|
|
 |
|
|
Strumenti |
05-05-2010, 20:34
|
#1 |
|
Senior Member
Iscritto dal: Aug 2005
Città: Genova
Messaggi: 2285
|
[HTML e CSS] Alcuni dubbi e problemi di apprendimento
Sto piano piano imparando l'uso dei css e sono già riuscito a capire abbastanza come lavorano, come impaginare un sito senza uso di tabelle, ecc...
Oggi mentre stavo seguendo una guida per realizzare un form esteticamente un po più accattivante mi sono imbattuto in un paio di dubbi. Il codice è quello che trovate a questa pagina: http://24ways.org/examples/have-a-fi...ways-form.html in particolare mi sono chiesto e ho tentato di risolvere (senza successo purtroppo) questi problemi: 1) se volessi assegnare ad esempio al secondo fieldset un diverso stile, come faccio? Cioè io ho pensato nell'html metto Codice:
<fieldset id=test>....</fieldset> Codice:
form#prova fieldset 2) è possibile spostare un fieldtset in una posizione che non sia sotto gli altri ma ad esempio di fianco? Un po come si fa con i div diciamo...Avevo pensato (e qui casca l'asino dato che mi servirebbe il punto 1)  ) di definire la posizione in un id specifico che poi assegno ad un fieldsetRingrazio tutti quanti per l'aiuto!
__________________
Lego ™ Fans Club |
|
|
|
06-05-2010, 12:42
|
#2 |
|
Senior Member
Iscritto dal: Aug 2005
Città: Genova
Messaggi: 2285
|
Sono riuscito a ottenere qualcosa di "accettabile"...per lo meno con la visualizzazione con firefox...
Ecco i codici HTML Codice:
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset=utf-8 /> <title>Prova form html5 e css</title> <script type="text/javascript" src="./script.js"></script> <link rel=stylesheet href=style2.css type=text/css> </head> <body> <h1>FORM HTML5</h1> <div id=container> <form id=prova> <div id=column_1> <fieldset id=first> <!-- legend assegna un titolo ad un elemento fieldset --> <legend>Your details</legend> <ol> <li> <label for=name>Name</label> <input id=name name=name type=text placeholder="First and last name" required autofocus> </li> <li> <label for=email>Email</label> <input id=email name=email type=email placeholder="[email protected]" required> </li> <li> <label for=phone>Phone</label> <input id=phone name=phone type=tel placeholder="Eg. +447500000000" required> </li> </ol> </fieldset> <fieldset id=second> <legend>Delivery address</legend> <ol> <li> <label for=address>Address</label> <textarea id=address name=address rows=5 required></textarea> </li> <li> <label for=postcode>Post code</label> <input id=postcode name=postcode type=text required> </li> <li> <label for=country>Country</label> <input id=country name=country type=text required> </li> </ol> </fieldset> </div> <div id=column_2> <fieldset id=third> <legend>Card details</legend> <ol> <li> <fieldset> <legend>Card type</legend> <ol> <li> <input id=visa name=cardtype type=radio> <label for=visa>VISA</label> </li> <li> <input id=amex name=cardtype type=radio> <label for=amex>AmEx</label> </li> <li> <input id=mastercard name=cardtype type=radio> <label for=mastercard>Mastercard</label> </li> </ol> </fieldset> </li> <li> <label for=cardnumber>Card number</label> <input id=cardnumber name=cardnumber type=number required> </li> <li> <label for=secure>Security code</label> <input id=secure name=secure type=number required> </li> <li> <label for=namecard>Name on card</label> <input id=namecard name=namecard type=text placeholder="Exact name as on the card" required> </li> </ol> </fieldset> </div> <fieldset> <button type=submit>Buy it!</button> </fieldset> </form> </div> </body> </html> Codice:
/*Per info varie vedi:
* http://xhtml.html.it/articoli/leggi/3334/un-form-in-html5/1/
* dove vengono descritti i vari passi
*/
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 20px;
}
h1 {
font-size: 28px;
margin-bottom: 20px;
}
div#container{
position:absolute;
margin:20px; padding:0;
width:75%;/*height:100%;*/
background:#9cbc2c;
border: solid red;
-moz-border-radius: 5px;
}
/* Poi passiamo a dare uno stile all'elemento form che racchiude tutti i campi: */
form#prova {
//background: #9cbc2c;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
counter-reset: fieldsets;
padding: 20px;
width: 800px;
}
form#prova div{
}
div#column_1{
float:left;
border: solid black;
position:relative; top:0px;
width:49%;
}
div#column_2{
border: solid blue;
position: relative; left:50%;top:0px;
width:49%;
}
/*Rimuoviamo anche il bordo dai fieldset e applichiamo un po' di margine inferiore.
* Usando la pseudo-classe :last-of-type rimuoviamo il margine inferiore dall'ultimo
* fieldset perché non ne abbiamo bisogno:
*/
div fieldset {
border: none;
margin-bottom: 10px;
}
fieldset#first{
position:relative; top:0px /*relative! quindi si intende del contenitore sopra a qst elem*/
}
fieldset#second {
position:relative; top:0px;
}
fieldset#third {
position:relative; left:0px; top:-50px;
}
form#prova fieldset:last-of-type {
margin-bottom: 0;
}
/*A questo punto rendiamo grandi ed evidenti gli elementi legend. Applichiamo pure
* un'ombreggiatura di un verde chiaro per evidenziare questo dettaglio:
*/
form#prova legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
/*Se si vuole aggiungere una chiara indicazione dei passi necessari per compilare
* il form, invece di aggiungere tale indicazione manualmente ad ogni legend, possiamo
* usare dei contatori automatici.
* Per aggiungere un contatore ad un elemento dobbiamo usare le pseudo-classi :before e :after
* per aggiungere contenuto attraverso i CSS.
* Seguiremo questi passi:
* - creaiamo un contatore usando la proprietà counter-reset sull'elemento form;
* - richiamiamo il contatore con la proprietà content usando lo stesso nome dato in precedenza;
* - con la proprietà counter-increment indichiamo che per ogni elemento che corrisponde al
* nostro selettore il contatore sarà incrementato di 1.
*/
form#prova > fieldset > legend:before {
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
/*Infine, dobbiamo cambiare lo stile della legend che fa parte del gruppo dei radio-button,
* per farla apparire visivamente come una label:
*/
form#prova fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form#prova ol li {
background: #b9cf6a;
background: rgba(255,255,255,.3);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#prova ol ol li {
background: none;
border: none;
float: left;
}
form#prova label {
float: left;
font-size: 13px;
width: 110px;
}
form#prova fieldset fieldset label {
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#prova label[for=visa] {
background-image: url(visa.gif);
}
form#prova label[for=amex] {
background-image: url(amex.gif);
}
form#prova label[for=mastercard] {
background-image: url(mastercard.gif);
}
form#prova fieldset fieldset label:hover {
cursor: pointer;
}
form#prova input:not([type=radio]),
form#prova textarea {
background: #ffffff;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#prova input:not([type=submit]):focus,
form#prova textarea:focus {
background: #eaeaea;
}
form#prova input[type=radio] {
float: left;
margin-right: 5px;
}
form#prova button {
background: #384313;
border: none;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
color: #ffffff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
}
form#prova button:hover {
background: #1e2506;
cursor: pointer;
}
input
{
background: #FFFFFF;
color: #000000;
font-family: Tahoma, Arial;
//font-weight:bold;
}
input.error
{
background: #FF0000; /*rosso*/
color: #FFFFFF; /*bianco*/
}
input.correct
{
background: #32CD32; /*verde chiaro*/
color: #FFFFFF; /*bianco*/
}
top:0 e left:0 ma relativo al div column_2 no? 
__________________
Lego ™ Fans Club |
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 14:31.
