Na svem webu jsem se vzdycky vyhybal pouziti hodnot display zacinajici na table. To byla ale evidentne chyba. Proto vam tu dnes prinasim navod, jak udelat sloupce tak, aby kdyz treba JavaScriptem pridate nejaky obsah, aby se #content automaticky zvetsil na vysku bez jakekoliv vypocitani JavaScriptem vysky nebo jine JS kejkle. Nebudu vice mluvit, podivejte se radsi na kod i s komentari pro snazsi pochopeni. Je mozne ze nektere deklarace css ktere zde uvidite nebudou potreba ale to uz si zjistite sami, kdyz vam to nebude fungovat tak jak ma.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*r jako row, tedy obal celeho radku, ktery obsahuje vertikalni navigaci a obsah*/ #r { display: table-row; } /*Dulezite je zde nastavit float:left; a sirku podle sirky vaseho layoutu*/ #nav { width: 250px; float: left; } /*Zde je dulezite nastavit vsechno co vidite, sirku si nastavte podle sebe na *px*/ #content { float: right; width: 750px; height: auto; } /*Samozrejme po dvou vedle sebe float divech, je potreba rict prohlizeci, ze uz dalsi sloupce pridavat nebudete clear:both*/ #paticka { clear: both; } |
Html kod je pak jeste jednodussi. Proste napisete za sebou(ne do sebe) divy s ID #nav, #content a #paticka a cele to obalite do divu #r.
|
1 2 3 4 5 6 7 8 9 |
<div> <div> Navigace </div> <div> Obsah stranky </div> <div> </div> </div> |
Vysledek je takovy, ze i kdyz JS pridavam html kod komentare, stranka se vyskou vzdy automaticky prizpusobi:
