Moduli CSS anziché tabelle 2011

Ho rinunciato all'uso del CSS per lo stile dei moduli quando ho colpito degli ostacoli come se richiedessero 3 caselle di testo adiacenti l'una all'altra (come un numero di telefono) o un elenco a discesa accanto a una casella di testo. Non riuscivo a trovare un modo affidabile per modellarlo senza le buone TABELLE.Moduli CSS anziché tabelle 2011

Sto pensando di tornare al CSS per lo stile dei moduli; Non so:

Se è più utilizzabile avere didascalie in alto oa sinistra del campo.
Come modellare le cose in modo da posizionarle bene anche con un paio di elementi di forma adiacenti.

Riferimenti? È ancora un sogno irrealizzabile?

fonte

2011-01-04 Caveatrob

Quindi stai dicendo che non sai come funziona il float o il modello box? – rxgx

Ci sono un paio di modelli CSS progettati specificamente per la disposizione di moduli.

Spero che questo aiuta a puntare in una direzione produttiva e impressionante. Stai attento.

fonte

2011-01-04 12:06:18

No, è molto possibile, e io (e molti altri) lo faccio da anni.

Vedere float: (left|right) e display: (inline|inline-block).

fonte

2011-01-04 02:44:15 alex

Usi le etichette sopra i campi oa sinistra? Cosa fai quando devi mettere le caselle di testo l'una accanto all'altra (come prefisso, prefisso, suffisso di un numero di telefono)? Hai esempi? – Caveatrob

@Caveatrob Controlla CSS e HTML di qualsiasi altro sito che lo fa. Guarda nei galleggianti. – alex

@Caveatrob Se avessi tre caselle di testo e le avresti volute una accanto all'altra, ogni flottante sarebbe rimasto (probabilmente con qualche spaziatura). Allora cancelleresti: entrambi; dopo. Se puoi fornire del codice HTML, possiamo contrassegnarlo con CSS per te. –

Intendi questo?

alt text

In sostanza si crea un pseudotable

.mxrow { 
clear: both; 
width: 100%; 
height: 50px; 
} 


.mxcell { 
float: left; 
padding-top: 10px; 
padding-bottom: 10px; 
height: 26px; 
} 

.mxcell_firstcell{ 
width: 25%; 
}

E il markup sarebbe

<div class = "mxrow"> 
    <div class = "mxcell mxcell_firstcell"><input element /></div> 
    <div class = "mxcell mxcell_secondcell"><another form element/></div> 
</div>

La singola cella classnames servono per applicare css specifico (il mio markup è una griglia)

fonte

2011-01-04 02:58:44

Sì. Ho fatto un sacco di tempo a farlo quando ho inventato il mio primo set di CSS floating/divvy per le forme. Ogni esempio che sembra trovare online ha una singola etichetta/controllo di una singola riga per riga. – Caveatrob

Beh, l'ho fatto perché molte animazioni javascript funzionano male con le tabelle. Permettetemi di prendere qualche css per voi, –

, ma nessuna degradazione graduale qui. –

Altre persone ti danno qualche suggerimento valido ioni ... se hai ancora problemi puoi provare un modulo css come formee ... http://www.formee.org/

fonte

2011-01-04 07:56:58 Nextneed

risposta

Problemi correlati