form e css

[spritz83]

come posso allineare ottimamente una lista di form, con accanto il nome di cosa inserire, con il css???

è possibile senza usare una tabella con due colonne e tante celle quanti i form?


es:

nome: ----form-----
cognome: -----form----
info: ------form------
----------------
----------------
----------------
etc: ------form------

??
grazie in anticipo a tutti!!!

[Marcolino's]

Immagino che per form tu intenda campi di input

Puoi fare così:
CSS

p {width: 100%}
p input {
  float: right;
  width: 50%;
}
p label {
  float: left;
  width: 50%;
}

XHTML

  <label>Nome:</label>
  <input type='text' />
</p>

[spritz83]

sì sì! intendo campi di imput... me poco chiaro sorry

non uso xhtml, ma penso che possa funzionare lo stesso. Non mi sarebbe mai passato per la testa di usare due float
dopo vedo che schifezze combino! ^_^


dimenticavo: bello il tuo sito!

[floyd46]

ciao
potresti vedere nel mio sito (in firma) un articolo che dovrebbe esserti utile; prova a vedere nella sezione CSS.

fammi sapere se è quello che cercavi.
saluti

[spritz83]

Ho apprezzato il tuo sito, ed ho imparato un sacco di cose, ti ringrazio. Però non c'era quello che intendevo, almeno non mi pare di averlo trovato. si è avvicinato di più Marcolino

una domanda OT: il comando Display: inline
è riferito a ciò che c'è dentro i blocchi oppure al flusso degli stessi?

ps: è scomodissimo non poter usare il pulsante dx del mouse!!! e cmq le immagini possono prendertele lo stesso! =\

[floyd46]

ciao
mi riferivo a questo articolo, sezione CSS:
http://www.extrowebsite.com/articolocss.asp?ID=26

[spritz83]

mea culpa! quello non l'avevo ancora guardato!

ora mi sorge un altro dubbio: i tag LABEL immagino siano specifici xml... mi sbaglio? cosa posso usare in html per definire la classe senza usare tag che "vanno a capo"... imposto un <h?> ? è bruttino...

[Francis87]

no, il <label> esiste anke x html

x andare a capo:

[Marcolino's]

Originariamente inviato da spritz83
sì sì! intendo campi di imput... me poco chiaro sorry

dimenticavo: bello il tuo sito!

Rispondo un po' a tutto se riesco.

Grazie

Purtroppo per problemi di spazio ho dovuto togliere dalla mia firma la mia pillola sui form, prova e cercarla con la ricerca del forum, se rifunziona

Allora:
<label> :: io l'ho stringata al massimo, ma è un elemento che risale a molti anni e quindi versioni fa dell'html, solo non lo usava nessuno, perché fino a pochi anni fa non si parlava mai di usabilità e in più si usavano le tabele per impaginare.
Come dice l'elemento stesso, <label> vuol dire etichetta, quindi serve a nominare ciò che viene dopo, ma non solo, serve anche per "connettere" idealmente l'elemento che lo segue, per esempio:

<label accesskey='1' for='nome'>Nome: </label>
<input name='nome' type='text' />

Se premi da tastiera la combinazione di tasti ALT+1 il cursore ti porta direttamente alla text box che segue la label.

E' molto utile per aumentare l'accessibilità/usabilità di un form, sempre carenti da questi due punti di vista, ma è molto comodo da usarsi nel modo che ho descritto sopra per definire un layout senza tabelle per i form.

Ovvio che quell'esempio era troppo semplicistico, ma troppo ci sarebbe da dire al riguardo.

Una cosa sola, che è valida sempre anche se non la usi per i form: quando usi le proprietà "float" devi capire che tutto il focus della finestra viene spostato a destra o a sinistra a seconda della proprietà che hai usato.
Per esempio float: left è usata spesso per mettere del testo intorno ad un'immagine posizionata sulla sinistra.

[img]...[/img]



Testo che parte dalla destra dell'immagine e prosegue sotto alla stessa, se più lungo dell'altezza dell'immagine stessa
</p>

Funziona, lo puoi vedere in azione in giochini, ma se poi non rimetti le cose a posto, ovvero se non ridai il giusto "focus" alla finestra, tutto ciò che segue verrà sballato dal float precedente.

Quindi è buona norma, creare un qualcosa di vuoto o anche di pieno, dipende da cosa stai facendo, per ridare il giusto fuoco, ovvero inserire un bel clear: left; oppure tutto ti sballerà a destra o a sinistra, a seconda del float precedentemente dato.

In-line o block: dipende!
Alcuni elementi sono già elementi di blocco, come i paragrafi o i layer, ma ciò non vuol dire che occupino tutto lo spazio a loro assegnato.
Per esempio se scrivo:

<div style='width: 100px'></div>

Il layer è a livello di blocco, ma non lo vedo perché vuoto (in realtà quel becero di IE te lo fa vedere comunque) se lo voglio vedere devo metterci dentro qualcosa, o stabilire un'altezza.
Oppure definirlo come block!
Oppure se non voglio proprio vederlo o meglio definirlo su una riga, lo dichiaro come in-line.
Per esempio tanti menù orizontali vengono costruiti a partire da una lista non ordinata, elemento a livello di blocco, che però ordinandogli di mettersi in-line, si mettono proprio su una riga, creando la barra di navigazione orizontale.

Attenzione però, questo è un discorso semplicistico, non tutti i browser agiscono allo stesso modo, IE la fa da padrone in quanto a idiosincrasie, ma anche Opera non scherza su questo.
Per una trattazione più approfondita ti invito a guardare il sito di gianluca troiani e molti altri ancora più approfonditi, che puoi trovare tra i miei bookmark.

Buon divertimento.

[spritz83]

siete stati tutti incredibilmente gentili e pazienti con la mia ignoranza... ora vedo di metterci del mio e poi vi farò sapere! ^_^