Layout CSS senza larghezza fissa

Question

Io non sono esperto in CSS in qualsiasi modo;So che è una certa misura, ma non molto profondo;galleggiante e IE6 mi fa piangere.Quindi io sono sempre entusiasta di vedere quello che la gente può fare con esso.

Tuttavia, la maggior parte degli esempi che vedo utilizzare dimensioni fisse.Da quanto ho capito questo è perché il CSS è così difficile ed è molto più facile hack quando gli elementi hanno la larghezza, in particolare in IE6.

Ma, mi piace molto flessibile larghezza.Ed essendo così, non capisco perché è sbagliato fare del design con le tabelle?C'è un libro intitolato "Tutto quello che Sai di CSS È Sbagliato!", che spiega come è bene che ora si possono fare i layout di tabella con i CSS con i più recenti browser che...ma, non potremmo farlo per tutto il tempo con le tabelle HTML?Sì non è CSS e forse non è così pulita come puro CSS...ma, dopo tutto, il layout della tabella È quello che spesso abbiamo bisogno, e se dobbiamo scegliere tra i cattivi hacky CSS per farlo e semplice-ma-non-puro-abbastanza tabella HTML, non capisco il motivo di queste scelte dovrebbe essere considerato cattivo.Il BACIO è una cosa buona, non è vero?

O, forse, non riesco a capire e si PUÒ fare di tabella come layout in CSS che funziona in IE6 - senza troppo dolore nel culo?Esempi di tali siti?

AGGIORNAMENTO:Sì, lo so circa il contenuto e lo stile di separazione.Infatti, io sono fanatico di SECCO, SRP e di altri devono fare le cose.Ecco perché ho davvero cercato di fare le cose in CSS;ma se è COSÌ molto più difficile e più inaffidabili di tabelle, di modo che è anche scritto nei libri, come accennato sopra, perché provare così difficile?Io non dico che tutto deve essere fatto in tabelle;ma se è davvero più facile di CSS - perché dovrei preferire CSS per una semplice e prevedibile soluzione?

Che è, non dico che si deve utilizzare le tabelle di sempre.Tenete a mente master layout di pagina - è indipendente e non incidono su altre pagine, posso passare da CSS e tabelle e di nuovo in 20 minuti (in realtà ho già fatto) con nessun problema - PERCHÉ dovrei stick per i CSS, anche se i tavoli sono nessun danno?

AGGIORNAMENTO:Ho trovato questo per essere una buona sintesi di ciò che stavo cercando di dire: http://www.flownet.com/ron/css-rant.html.E la discussione http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments.

Per chi è interessato, qui un ancora migliore articolo: http://kv5r.com/articles/dev/layouttables1.asp

Answer 1

Vi sono essenzialmente di destra.Non c'è niente di veramente sbagliato con l'utilizzo di tabelle per il layout, come lungo come, per l'accessibilità, l'ordine delle cellule è appropriato per la pagina.Io personalmente trovo che a larghezza fissa di un molto peggio di degradazione di usabilità di tabelle per il layout.

Quando si fanno uso di tabelle per il layout, essere sicuri di utilizzare gli stili width: 100%; table-layout: fixed (e <col> con stile width) in modo che i browser possono apparecchiare la tavola correttamente dall'inizio (che risolve uno dei problemi di usabilità tabella di layout aveva), e in modo che non siete affidamento su IE piuttosto scarsa auto-larghezza del layout di indovinare.

Mentre io certamente preferisco CSS per il layout, ove possibile, e il più semplice layout del sito può essere ragionevolmente realizzato utilizzando solo i CSS (soprattutto ora IE5 e la sua Bizzarra Box Model è andato), ci sono alcuni casi in cui il CSS non è possibile hack e le tabelle possono.Un caso comune è fluido complesso-larghezza forme.

Il problema più significativo è la mancanza di capacità di dire le cose come width: 100%-10em per ottenere una colonna che è la larghezza della viewport meno una dimensione fissa per un'altra colonna.Per i casi più semplici, è possibile ottenere intorno a questo, con margini e un div contenitore, ma una volta che si inizia a riordinare gli elementi della pagina e l'aggiunta di più wrapper solo per ottenere il layout CSS lavorare, sei già mescolando la presentazione con il contenuto:non è davvero così diverso dalle tabelle.

Nel peggiore dei casi si finisce con quelle stupide ‘framework CSS’ che richiedono l'utilizzo di nidificazione e fissa i nomi di classe per specificare completamente il layout all'interno del markup stesso.Questo è niente di meglio di tabelle;Trovo assolutamente esilarante che questo disperato ritorno del brutto tempo è considerato trendy e all'avanguardia del Web 2.0 tecnica.

CSS3 è al lavoro su qualcosa di interessante alternative le attuali opzioni di Posizionamento, che un giorno la promessa di totale markup e il layout di separazione.Ma che è molto lontano oggi.

Answer 2

Guarda Yaml e Fluido 960gs.Entrambi aiuterà molto con il cross-browser layout.Tabella per il Layout non sono la risposta e IE6 sparirà prima o poi.

Answer 3

C'è una ragione che le tabelle del HTML sono un male per altro che i dati tabulari.HTML è un linguaggio di markup per il contenuto dei dati e, quindi, deve contenere i raggruppamenti di dati reali, non il layout per i dati.CSS è pensato per essere completamente per il layout e lo stile scopi;quindi il suo nome.Quindi il CSS deve contenere l'intero aspetto della pagina web HTML che contiene la struttura dati;e mai i due si incontrano.

Facendo di tutto nelle tabelle è male per un motivo.

Si dovrebbe pensare ad esso come l'astrazione tra stile e contenuto, e si può ottenere una buona carrellata da qui: http://www.alistapart.com/articles/separationdilemma/

Anche in risposta diretta alla tua domanda goto 'A List Apart" e di ricerca attraverso i vostri articoli.Che tipo di descrivere il viaggio che stai per fare qui: http://www.alistapart.com/articles/journey/

perché dovrei preferire CSS per una semplice e prevedibile soluzione?

È quello che stiamo cercando di dire.Può sembrare più facile nel breve termine, ma tutto ciò che si scrive sarà meno gestibile e più difficile da modificare in futuro.Si può andare e scrivere una pagina web che sembra più facile nel breve termine, ma si sta appena accoltellato voi stessi in piedi per più tardi, quando si vuole fare di più.Perché non basta fare bene la prima volta?(e ' solo una piccola quantità di sforzo in più davvero)

Answer 4

Solo perché layout CSS è una sfida per voi, che non lo rende inferiore ai tavoli.Affermando questo, stai commettendo un errore logico conosciuto come il Relativista Fallacia.

Una volta che si comprendere appieno CSS, come si usa, e la maggior parte dei browser diverso stranezze, troverete che è di gran lunga superiore a Tabelle HTML.

Il Markup dovrebbe essere semantico.Che è, deve descrivere con precisione il contenuto che esso contiene.Che rende leggibili a macchina (per la SEO e altre applicazioni).Tabelle per il layout non è semantica a tutti.

Astrazione di diversi strati aiuta a rendere un sito web molto più facile da mantenere.Mantenere il contenuto in HTML, il comportamento in Javascript, e la presentazione in CSS.

Hai ragione a dire che il CSS ha i suoi difetti, però.Ma le tabelle sono molti di più, che sono molto peggio.

Answer 5

Il motivo per cui non lo vuole fare markup che utilizza le tabelle come il layout è a causa del disaccoppiamento del design e dei contenuti.

Il codice dovrebbe sedersi in proprio, come una perfetta descrizione del contenuto in esso.In sostanza si dovrebbe contrassegnare le pagine in html ancor prima di toccare gli stili.Quindi si potrebbe utilizzare i CSS per modificare il modo in cui il markup semantico sembra per impostazione predefinita.

Il fatto della questione è che il contenuto web che si posa non e 'Tabulare dati' - Markup per computer/bot a leggere, e gli stili sono per noi vedere, mescolando i due soli confonde una o entrambe le parti, di solito il costo aggiunto di manutenibilità.

Answer 6

Ecco uno scenario che ho riscontrato personalmente che io, come la condivisione.Nota:Io non sto sostenendo "no-tavolo-a-tutti", fa venire in consegna per altre esigenze.

Ho creato un form (visivamente top-down flow):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

Quindi il cliente voleva un più strutturato tubolari uno come questo:

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

Come io non sto usando la tabella di TR TD sorta, posso facilmente (o quasi) di convertire la struttura utilizzando i CSS modifica e minore di markup HTML modifiche.