CSS: Amplasarea verticală a coloanei fără <table>

Ok, I leaned html & CSS back in 2001. I was used to do something like this (To create a website with a "vertical-column" layout):

<html>
<head>
    <title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
    <tr>
    <td id="header" colspan="3"><!-- header code/php include --></td>
    </tr>
<!--/header -->

<!--/content -->
    <tr>
    <td id="col1" name="menu"><!-- content code/php include --></td>
    <td id="col2" name="content_left"><!-- content code/php include --></td>
    <td id="col3" name="content_right"><!-- content code/php include --></td>
    </tr>
<!--/content -->

<!-- footer -->
    <tr>
    <td id="footer" colspan="3"><!-- header code/php include --></td>
    </tr>
<!--/footer -->
</table>
</body>
</html>

Easy, everything is automatically aligned the way I want, no CSS headache etc. Life was good back then. HOWEVER, not so long ago, I read that this approach should no longer be used. I was going to try a new way using a bunch of div's, but w3c & w3c's validation does not like you using block elements as inline elements...WTF!!!

Deci ... frustrarea mea ma determinat sa va intreb:

HOW? How to accomplish something like this in "modern way"...as easy as possible? Does html 5 has a better way?
WHY? Why is it that now we should not use this table approach to get a "vertical column layout" on a website?

0
Luăm în considerare faptul că dacă w3c și alții vor veni cu aceste "reguli" și schimbări, ar trebui să ofere o soluție COMPATIBLĂ și cu browser încrucișat la schimbările pe care le fac.
adăugat autor Omar, sursa
Float's sunt o durere de cap pentru mine și nu se înțelege bine. Au comportamente cu adevărat ciudate. Ele nu sunt drept ca elemente de bloc. Cum pot preveni aceste probleme de plutire, astfel încât să pot începe să mă simt mai încrezător în utilizarea flotorului? -Așa cum le-am evitat 100% din moment ce nu pot controla ciudățenia lor. De exemplu, ele tind să se suprapună, să schimbe pozițiile unul pe altul, să apară în locații în care nu ar trebui să fie etc etc ...
adăugat autor Omar, sursa

3 răspunsuri

HOW?

Opțiunea 1: Google "CSS 3 layout". Acest lucru a fost bine acoperit de-a lungul ultimilor 6 ani sau cam asa ceva si acolo sunt gobs de tutoriale acolo.

Opțiunea 2: Google "CSS Framework" și alegeți unul pentru a vă construi aspectul. 960.gs este unul popular.

WHY?

În mod ideal, ați folosi tabele pentru date tabulare și CSS pentru aranjarea restului paginii. De ce? Ei bine, teoretic, CSS vă oferă mult mai multă flexibilitate. Cel mai bun exemplu este, probabil, atunci când vine vorba de un design web receptiv. Pe un iPhone, aș putea dori 2 coloane. Pe iPad-ul meu, aș putea dori 4 coloane. Asta se poate face cu CSS, dar devine cu adevărat complicat dacă dai cu greu tabelele HTML.

0
adăugat
un alt motiv bun este pur pentru accesibilitatea și rezultatele căutării. Cititorii pentru utilizatorii cu deficiențe de vedere au un timp foarte dificil atunci când întâlnesc tabele care îngreunează utilizatorii cu deficiențe de vedere să utilizeze site-ul. Google este destul de mult afectat de vedere, atunci când vine vorba de construirea rezultatelor căutării. Dacă utilizați machete de tabelă, este posibil ca site-ul dvs. să fie mult mai scăzut pe rezultatele căutării decât ar trebui să fie. Alte două lucruri pe care trebuie să le țineți minte.
adăugat autor Tony318, sursa

Mai jos este o grilă de bază am cobbled împreună puteți utiliza cu orice site-ul de dimensiune. Va trebui să ștergeți flotoarele din coloane fie cu suprapunere ascunsă, fie cu o clarificare clară. Dacă proiectul dvs. nu are nevoie să suporte IE7, puteți utiliza caseta de margine box-size pentru a adăuga elemente de umplutură în coloanele dvs., altfel adăugați un element suplimentar în fiecare coloană pentru umplere.

În timp ce pot aprecia că realizarea coloanelor a fost super ușor cu tabele care erau destul de mult singurele lucruri pe care le-ar fi mai bine pentru aspectul înțelept.

HTML:

<!DOCTYPE HTML>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    
    <div class="content grid">
        <div id="col1" class="col s1of3"></div>
        <div id="col2" class="col s1of3"></div>
        <div id="col3" class="col s1of3"></div>
    </div>

    
</body>
</html>

CSS:

.grid {
}
    .grid .col { float: left; }

    .grid .col.s1of1 { width: 100%; }
    .grid .col.s1of2 { width: 50%; }
    .grid .col.s1of3 { width: 33.33333333%; }
    .grid .col.s2of3 { width: 66.66666666%; }
    .grid .col.s1of4 { width: 25%; }
    .grid .col.s3of4 { width: 75%; }
    .grid .col.s1of5 { width: 20%; }
    .grid .col.s2of5 { width: 40%; }
    .grid .col.s3of5 { width: 60%; }
    .grid .col.s4of5 { width: 80%; }
0
adăugat
Acest lucru este foarte asemănător cu OOCSS . Frumos!
adăugat autor DACrosby, sursa

CSS3 are câteva opțiuni de aspect ale coloanelor, dar nu sunt foarte bune pentru compatabilitate și un număr corect de opțiuni nu sunt acceptate de un număr mare de browsere.

Dacă doriți să creați coloane de lățime variabilă/fixă, atunci acesta este probabil articolul pe care îl căutați:

http://www.alistapart.com/articles/holygrail

Folosind această metodă, puteți seta una sau mai multe Diviziuni la o lățime fixă, în timp ce o altă redimensionare este adecvată pentru a umple pagina.

If you just want all your columns to resize, then just make them all float: left, and width: {percentage of page}%

0
adăugat
În cazul coloanelor cu dimensiuni fixe. Spuneți, 2 coloane, id = "content_left" style = "width: 500px" și id = "content_right" style = "width: 300px" ? De asemenea, ar trebui să folosesc ej: ?
adăugat autor Omar, sursa
Un ultim lucru ... flota este o durere de cap pentru mine și nu se înțelege bine. Au comportamente cu adevărat ciudate. Ele nu sunt drept ca elemente de bloc. Cum pot preveni aceste probleme float , astfel încât să pot începe să mă simt mai încrezător în folosirea lui float? -Așa cum le-am evitat 100% din moment ce nu pot controla ciudățenia lor. De exemplu, ele tind să se suprapună, să schimbe pozițiile unul pe altul, să apară în locații în care nu ar trebui să fie, etc ... Am văzut float ca "oaia neagră" a CSS familie
adăugat autor Omar, sursa
float este probabil instrumentul principal al celor mai multe layout-uri CSS. Hunker și dă-i o încercare. ;)
adăugat autor DA., sursa
Dacă doriți un div de 500px în stânga și 300px unul în dreapta, atunci da. Și span este pentru definirea unui stil mic în jurul textului (de exemplu, făcând o altă culoare) unde div este pentru a conține un bloc de conținut,/code> este ceea ce ați folosi.
adăugat autor Death, sursa