esempio utilizzo classi

**sitodue** · 20-06-2012, 16:18

Ciao a tutti, sto facendo le prime esercitazioni sull'utilizzo delle classi ma temo mi sia sfuggito qualcosa...

codice:

<style....>

.credenziali{xxxxx:yyyyyy;}

</style>

<body>
<div id="main">
   <div id=login">
   <form method="post"......>
       <span>Accesso area riservata</span>
       <div class="credenziali">Username</div>
       <div class="box"><imput type="text" name="user"></div>
       <div class="credenziali">Password</div>
       <div class="box"><imput type="text" name="passw"></div>
   </form>
   </div>
</div>

Qualunque proprietà provo ad impostare nella classe .credenziali non sortisce nessun effetto... :-s

**carlomarangoni** · 20-06-2012, 17:17

Originariamente inviato da sitodue
Ciao a tutti, sto facendo le prime esercitazioni sull'utilizzo delle classi ma temo mi sia sfuggito qualcosa...

codice:

<style....>

.credenziali{xxxxx:yyyyyy;}

</style>

<body>
<div id="main">
   <div id=login">
   <form method="post"......>
       <span>Accesso area riservata</span>
       <div class="credenziali">Username</div>
       <div class="box"><imput type="text" name="user"></div>
       <div class="credenziali">Password</div>
       <div class="box"><imput type="text" name="passw"></div>
   </form>
   </div>
</div>

Qualunque proprietà provo ad impostare nella classe .credenziali non sortisce nessun effetto... :-s

Invece di farci vedere solo dei ".....", "xxxxx" e "yyyyyy", perchè non ti sforzi di farci vedere un codice completo ed esplicativo in modo che possiamo capire dove sbagli?

**sitodue** · 20-06-2012, 17:32

codice:

<style type="text/css">

.credenziali {color:#0F0;
                border:solid 3px #0C6}

</style>

<body>
<div id="main">
   <div id="login">
   <form method="post" action="go.php">
       <span>Accesso area riservata</span>
       <div class="credenziali">Username</div>
       <div class="box"><imput type="text" name="user"></div>
       <div class="credenziali">Password</div>
       <div class="box"><imput type="text" name="passw"></div>
   </form>
   </div>
</div>

Non mi sembravano parti rilevanti per questo le ho omesse...
Il meccanismo di utilizzo e dichiarazione della classe è corretto?
Nel primo post mancano le virgolette in <div id="login"> ma è solo un errore di copia perchè sto trascrivendo a mano tra 2 pc...

**fcaldera** · 20-06-2012, 17:36

il tuo codice così come l'hai postato funziona come dovrebbe: http://jsfiddle.net/DmdGp/

lo stile viene applicato (ti manca comuque un apice doppio sul div login e hai scritto iMput al posto di iNput)

nota a margine, non usare il solo tag <div> per marcare i tuoi elementi. Alternative valide ai div nel tuo esempio sono le liste non ordinate oppure le liste di descrizione

**sitodue** · 20-06-2012, 20:03

Non so che pensare... quali possono essere i motivi per cui da me non funziona? Potrebbe esserci un conflitto con altre parti di codice?
Per quanto riguarda il consiglio... io sto provando a realizzare un semplice form con user e password ed i relativi textbox e la prima idea che mi è venuta in mente è stata quella di racchiudere i 4 elementi in altrettanti div e poi pensavo di provare ad impostare float:left per tentare di allinearli sulla stessa riga ma sono aperto ad ogni suggerimento... con una lista però non saprei come fare...

**fcaldera** · 21-06-2012, 09:26

Originariamente inviato da sitodue
Non so che pensare... quali possono essere i motivi per cui da me non funziona? Potrebbe esserci un conflitto con altre parti di codice?

questo non lo potremo mai sapere se non pubblichi una pagina da qualche parte con il codice "completo". Comunque una possibilità usando le liste (essendo un elenco di campi)

codice:

<form...>
   <fieldset>
       <legend>Accesso area riservata</legend>
       <ul>[*]
             <label for="username">Username</label>
             <input type="text" name="username" id="username" />
          [*]
             <label for="passwd">Password</label>
             <input type="password" name="passwd" id="passwd" />
          [/list]
   </fieldset>
</form>

Esempio: http://jsfiddle.net/VdVqK/1/

**sitodue** · 21-06-2012, 10:11

Ciao, grazie mille per l'aiuto prima di tutto;

Ho trovato la parte di codice che creava conflitto... in pratica avevo racchiuso una precedente parte di codice tra quelli che credevo essere commenti:

codice:




...codice

Tolti questi commenti il problema sparisce e la classe mostra correttamente le proprietà impostate... anche se non so il perchè :-s

Per quanto riguarda il codice di esempio che mi hai mostrato, ho 2 domande...
1 - A cosa serve il tag "fieldset" ?
2 - Ho visto che hai impostato la proprietà display:inline-block per le label... Negli esempi visti fin'ora avevo sempre solo visto o un elemento "block" impostato come "inline" o il contrario... cosa comporta invece impostarla in quel modo?

**fcaldera** · 21-06-2012, 10:35

Le tue domande trovano risposta in una qualsiasi guida base (a cui ti rimando per approfondimenti: http://xhtml.html.it/)

In breve, fieldset crea una suddivisione logica dei campi in un form: nel tuo caso racchiude i campi per le credenziali di accesso. E' obbligatorio usarne almeno uno con un doctype xhtml, facoltativo con html5

inline-block crea un elemento inline al quale si possono assegnare le proprietà tipiche di un elemento blocco (larghezza, altezza, margini, ...) e a cui si può fare anche un allineamento verticale (in base alle proprietà dell'elemento parent). Per funzionare su IE7 e precedenti richiede un hack specifico.

**sitodue** · 21-06-2012, 11:18

Tutti gli elementi di login li avevo racchiusi in un tag <div id="login"> che adesso comprende il fieldset che a sua volta comprende tutti gli elementi... quindi posso eliminare il div login e lasciare che sia il fieldset a fare da contenitore, o non è questo il suo scopo?
Nel caso in cui posso eliminare il div, posso eventualmente assegnare un id al fieldset come faccio per gli altri elementi contenitore in modo da potermi riferire agli elementi al suo interno ad esempio sempre tramite la sintassi #login ul{} ?

Ti chiedo anche un'ultima cosa su questa problematica...
Il testo contenuto nel tag <legend> in fase di progettazione in DW si visualizza correttamente su più linee restando confinato nei contorni del suo contenitore ma aprendo la pagina col browser resta su una sola linea sparendo sotto gli altri elementi. C'è un modo per correggere quest'effetto senza intervenire tramite
?

Discussione: esempio utilizzo classi

Strumenti discussione

Ricerca discussione

Visualizza

esempio utilizzo classi

Re: esempio utilizzo classi

Permessi di invio