Starší komentáře ke článku: Třísloupcový layout webu pomocí CSS
Zpět na článek | Úvodní stránka Interval.cz
Datum vložení: 8.8.2001 1:59:54
Velmi dobré téma, přehledě a jasně napsáno. Doufám, že bude i pokračování, třebas příklady dalších variant sazby pomocí CSS, jak ošetřit starší prohlížeče, atd.
Díky.
Datum vložení: 9.8.2001 0:36:05
Ne tak docela. Prostřední sloupec nemá být position relative, ale static (respektive vubec nic). Pokud jde o "vyreseni problemu" trisloupecneho textu, je tam problem v tom, ze treba chcete aby soucet sirek tri sloupcu byl XY a skupina těch sloupců byla umístěna na středu stránky, a jste, kde jste byli.
Prostě je to řešení vhodné jen pro některé případy. Navíc z hlediska pure webdesignu byste se měli zamyslet nad tím, proč píšete prostřední sloupec nejdříve. :-[
Datum vložení: 9.8.2001 8:14:53
No, to ze prostredni sloupec uvaden jako prvni, neni nic spatneho - jsou zde totiz nejdulezitejsi informace z celeho serveru, coz jiste ocenuji uzivatele textovych prohlizecu (napr. ty =).
Jinak na to, ze prostredni sloupec je defivan jako relativne, nevidim nic spatneho :)
Datum vložení: 16.8.2001 16:11:53
Dobře, Míro, tak tedy:
---> Vůči čemu relativně pozicuješ prostřední sloupec? (IMHO je static správně, protože chceš, aby protékal, jako by u něj nebylo nastaveno žádné pozicování -- viz referenční příručka CSS.)
Datum vložení: 28.8.2001 13:38:23
<I>Starší prohlížeče netřeba ošetřovat.</I> Zobrazí se to v nich, jako kdyby styly definovány nebyly, což je <I>korektní zobrazení</I>.
Datum vložení: 28.8.2001 15:16:16
tak tomu neverim
Datum vložení: 8.8.2001 8:44:28
ked zoradim stlpce tymto sposobom tak potom neviem editovat obsah webu cez fropntpage.
preview zobrazi web korektne ale ked chcem editovat zobrazi sa len pravy stlpec a stred.
pripadne mi poradte iny vizualny editor ktory umoznuje editovat aj taketo weby.
pisat kod v notepade je niekedy dost zdlhave.
Datum vložení: 8.8.2001 8:47:09
Abych se priznal, s tvorbou kaskadovych stylu ve vizualnich editorech nemam vubec zadne zkusenosti. Zkusil jste i jine programy, treba Macromedia Dreamweaver 4?
Jinak CSS nepiste v notepadu, ale treba v TopStyle, ktery vam vytvareni CSS docela usnadni. Myslim, ze jeho lite-verze je obsazena i v instalaci Homesite 4.5.
Datum vložení: 16.9.2003 18:09:18
skus macromedia dreamweaver mx 2004
Datum vložení: 8.8.2001 8:55:11
vlastnost right je obsazena v CSS2? ve specifikaci CSS1 je jen left a top. ktery prohlizece (od ktere verze) zvladaji CSS2?
Datum vložení: 8.8.2001 9:05:16
No, Internet Explorer 5, Opera 5, Netscape 6 a Mozilla urcite zvladaji alespon minimalne zakladni vlastnosti CSS 2, vcetne one zminovane vlastnosti right - dukazem toho je vyse priklad ve clanku.
Zpameti vam ale nereknu, zdali je right vlastnost CSS2 a stranky W3 mi zrovna nefunguji :(
Datum vložení: 8.8.2001 11:48:50
CSS2 nepodporuje žádnou vlastnost right. To je teda pěkná blbost. Ani v úplný definici neni o týhle vlastnosti nic psanýho. Jestli ji bude něco podporovat tak možná Css3, která se zatim ale dělá.
Jinak CSS2 bude podporovat určite MSIE 5.0 a vyšší, ale na 90% i MSIE4.0. O netscapech bych to s tou podporou neviděl nijak šlušně. Podporujou jen něco málo.
Datum vložení: 8.8.2001 12:00:35
Asi mate na mysli uplne neco jineho, CSS2 totiz rozhodne podporuje vlastnost right, stejne jako left, top a bottom, které jsou určeny pro pozicování elementu:
<a href='http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top' target='_blank'>http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top</a>
Datum vložení: 8.8.2001 14:06:16
To máš pravdu, já myslel dynamický polohování
Datum vložení: 8.8.2001 9:23:16
take se primlouvam za to , aby tento clanek mel pokracovani.
Datum vložení: 8.8.2001 9:33:32
Dalsi clanky o praktickem vyuziti CSS podobne tomuto prvnimu urcite budou pokracovat. Pokud mate nejaky konkretni tip na CSS clanek, dejte nam urcite vedet.
Datum vložení: 8.8.2001 10:01:26
no treba 3 sloupcovy design v css, ale i s pouzitim horni casti (hlavicky) a dolni (paticky), tisknuti stranek z webu, .... a tak.
je mozne, ze jste uz o tom psali, v tom pripade se omlouvam :)
Datum vložení: 8.8.2001 10:05:16
Urcite jsme o tom jeste nepsali. A jakou mate predstavu o tech sloupcich? Vsechny maji fixni velikost nebo je jeden z nich je roztazen na velikosti okna a zbyvajici dva jsou fixni?
Datum vložení: 8.8.2001 10:14:55
hlavicka bude roztazena na celou sirku stranky, pod ni tri sloupce levy pevna sirka, pravy taky, prostredni se roztahne podle potreby (tak jako v tomto clanku), no a spodni paticka zase bude pres celou sirku stranky.
a taky jak to postupne napsat do kodu, aby se to co nejlepe cetlo , kdyz to chce nekdo jenom v textove forme (textove browsery). diky moc ;)
Datum vložení: 8.8.2001 10:21:36
Zadny problem v tom nevidim.
Ostante, uz na necem podobnem pracuji:
<a href='http://www.interval.cz/interval-css/interval-css.htm' target='_blank'>http://www.interval.cz/interval-css/interval-css.htm</a>
Datum vložení: 8.8.2001 14:17:10
Je to asi trochu z cesty, ale co napsat článek o CSS a posuvníkách(barvy). Sice jsem nikde nenašel jeho definici(asi ještě neni schválenej) ale funguje.
Datum vložení: 8.8.2001 14:25:09
No, neni to schvaleno neni presne, protoze se vlastne jedna pouze o vylepseni Internet Exploreru 5.5od Microsoftu, takze zmena barvy posuvniku bude fungovat pouze v tomto prohlizeci.
Takovy clanek nicmene uz na Interval.cz vysel, je k dispozici na teto URL:
<a href='http://www.interval.cz/r-article.asp?id=660' target='_blank'>http://www.interval.cz/r-article.asp?id=660</a>
Datum vložení: 9.2.2002 21:38:18
Chtěl bych se zeptat, jestli už na Intervalu vyšel nějaký článek, který řeší třísloupcový layout s hlavičkou i patičkou...
Rozhodl jsem se jednou pro vždy pohřbít rámy a předělat celou strukturu stránek, ale musel jsem oželet patičku, ve které jsem měl umístěnou reklamu a informaci o tom, kolik času zbývá do konce roku a nakonec odkaz na autora stránek. A připadá mi taková nedokončená taková stránka. :-( Navíc chci dát možnost návštěvníkům pohybovat se po stránkách, aniž by museli vyrolovat svůj prohlížeč zpět na "vrchol" stránky.
Pár způsobů jsem zkoušel, ale bezvýsledně, vždycky se mi překrývali nějakým způsobem.
A ještě se chci zeptat na jednu věc, zda se dá toto rozmístění kombinovat s tabulkami vedle sebe... Zkusil jsem totiž zadat dvě tabulky, kterým jsem zadal šířku 45%, ale jaké bylo moje překvapení, když jsem zjistil, že tabulky se vedle sebe postavili tak, že zasáhli mimo obrazovku i do prava (používám rozlišení 1280 x 1024). Můžete mi tento výsledek, prosím, vysvětlit. Případně, jak to mohu udělat jinak. Nebo snad budou muset tabulky ležet pouze pod sebou...?
Díky za odpověď.
Datum vložení: 8.8.2001 9:33:29
Preklep se vloudil - v definici middle-column chybi uzaviraci slozena zavorka...
Datum vložení: 8.8.2001 9:35:59
Mate pravdu, opravdu chybi, diky za info, opravil jsem to. Obcas me fascinuje, jak je mozne udelat chybu pri kopirovani fungujiciho zdrojoveho kodu do clanku... :)
Datum vložení: 8.8.2001 11:13:20
Gratuluji, velmi pěkný článek na neotřelé téma. Nicméně, otevřete si okno se Sovou nebo s oním zmiňovaným příkladem a zkuste si párkrát změnit jeho velikost (v různých prohlížečích). V tomhle jsou, myslím, tabulky lepší. ;-)
Datum vložení: 8.8.2001 12:11:15
Zdravim,
ponekud nevim, co jste mel na mysli, ale predpokladam to, ze pri velmi male velikosti okna se jednotlive DIVy prekryvaji pres sebe. To ovsem nijak nevadi, protoze prakticky nikdo nema na pocitaci nastaveno rozliseni mensi nez 640x480 bodu.
Nicmene, hlavni duvod, proc pouzivat CSS muze byt treba to, ze je mozna rychla zmena designu celeho webu, moznost strukturovani informaci (coz b tabulkach nejde), mensi vysledna delka HTML kodu atd.
Datum vložení: 8.8.2001 11:24:30
Pane autore,
trisloupcova sazba je terminus technicus z oblasti typografie a sazby. Je tedy definovan. A to jako sazba !pretekajici! ve 3 sloupcich. Toho se clanek evidentne netyka. Clanek by sa mel jmenovat spise "Layout ve 3 sloupcich pomoci CSS" Pokud vim tato vec neni zatim na webu resitelna (snad nejakym hustym scriptem pracujicim se zjistenou vyskou okna prohlizece). Je to skoda, ale je to tak. Obecne je uroven typografickych znalosti tady na Intervalu dost nizka. viz. starsi otresny clanek o "vyrobe tucneho pisma" pomoci outline. Verim ve zlepseni...
Datum vložení: 8.8.2001 12:04:28
Diky za info. Dovolim si ale podotknout, ze tento server neni zameren na typografii, ale primarne na tvorbu www webovych stranek, kde mnoho typografickych pravidel neni mozne v HTML jednoduse aplikovat.
Presto ale respektuji vas nazor a nazev clanku zmenim na presnejsi.
Datum vložení: 8.8.2001 12:15:57
Problem typografie na internetu je opravdu PROBLEM. Bohuzel to tak je. Slo mi pouze o ten zavadejici nazev. (Sam jsem se nachytal a nedockave klikl, abych konecne nasel reseni "jak na tu trisloupcovou skladbu"). Musim rict, ze jsem velice prekvapen Vasim pristupem (kladne), ktery nepovazuji na ceskem webu za prilis casty. Proto take prijmete moji omluvu za trochu zklamane-utocny ton meho prispevku.
Zdravim
Datum vložení: 8.8.2001 12:20:19
skladba = sazba Ach jo...
Datum vložení: 8.8.2001 12:23:41
Zdravim,
nejak tomuto prispevku nerozumim...
Datum vložení: 8.8.2001 15:47:46
Pokud mate na mysli muj posledni prispevek (skladba = sazba), tak se jedna jen o opravu preklepu v mem predchozim prispevku ;-)
Datum vložení: 29.8.2001 6:25:05
Ale pokud tvůrci WWW stránek nedodržují alespoň základní <I>typografická pravidla</I>, vznikne hrozně vypadající stránka. Základní <I>chyby</I> jsou např.
1) používání patkového písma (Times New Roman) na nadpisy a bezpatkového písma (Arial, Helvetica, MS Sans Serif, Verdana) na běžný text
2) nadužívání ozdobných písem <I>i na běžný text</I>
3) více typů ozdobného písma na jedné stránce
4) používání skloněného písma (lze dobře nahradit kurívou) a tučné kurzívy
5) zvětšování písma pro zvýraznění určitých slov v textu (výsledek: nepravidelná hustota řádků)
6) více než dvě až tři rodiny písma na stránce (stačí jedno patkové, jedno bezpatkové a jedno neproporcionální)
7) používání tagů <B>i</B> a <B>b</B> místo <B>em</B> a <B>strong</B>
8) používání nestandardního parametru <B>face</B> tagu <B>font</B>
9) nadužívání barev - viz články Magie barev na Webu I. (<a href='http://www.interval.cz/r-article.asp?id=635)' target='_blank'>http://www.interval.cz/r-article.asp?id=635)</a> a II. (<a href='http://www.interval.cz/r-article.asp?id=653)' target='_blank'>http://www.interval.cz/r-article.asp?id=653)</a>
10) podtrhávání jiných věcí než odkazů
11) prostrkání pro zvýraznění slov běžného textu (mění hustotu písma)
12) třetina stránky je sázena základním řezem, druhá kurzívou a třetí tučně (výsledek: nepřehledný guláš)
13) falšené nadpisy místo skutečných
Omlouvám se za odbíhání od tématu, ale jen málokdo si přečte kapitolu pátou z knížky Web design Pavla Satrapy (elektronická podoba <a href='http://www.kit.vslib.cz/~satrapa/docs/webdes/pismo.html)' target='_blank'>http://www.kit.vslib.cz/~satrapa/docs/webdes/pismo.html)</a>.
Datum vložení: 25.3.2004 13:51:36
kudla tri odkazy a vsechny tri nefunkcni , to tam vubec uvedeno nebylo a pritom me to vadi vic jak nake patkove nepatkove pismo
Datum vložení: 13.7.2004 23:15:58
to je jasny ze tam ty stranky nebudou do nekonecna.
Datum vložení: 14.7.2004 11:03:06
Všechny odkazy jsou funkční, jen musíte z URL odstranit tu závorku na konci, která je nadbytečná ;-)
Datum vložení: 8.8.2001 13:50:10
Dík za článek.
Jen malý dotaz - neprojeví se v různých prohlížečích různě, když odsadím v <B>minimální vzdálenosti</B> (extrémně v žádné vzdálenosti) prostřední sloupec z levé a pravé strany (ve vzoru je odsazení 10 px)?
Děkuji za odpověď.
Datum vložení: 8.8.2001 14:02:01
Zdravím,
ve clanku je prostredni sloupec odsazen o 10 pixelu, ale tim se rozumi, ze je odsazen o 10 pixelu od leveho a praveho sloupce, ale zadavany rozmer je vztazen od okraje stranky prohlizece. Pro odsazeni o techto 10 pixelu je tedy potreba pricist k tomuto rozmeru navic velikost daneho sloupce + dany okraj stranky.
Pokud je tedy levy okraj stranky 20 pixelu, levy sloupec je siroky 150 pixelu, tak vysledna hodnota pro margin-left prostredniho sloupce bude celkem 180 pixelu (20+150+10).
Pokud bude toto odsazeni prostredniho sloupce mensi, treba jenom 150 pixelu, pak bude zakonite obsah prostredniho sloupce "prepsan" obsahem danych sloupců a to bude ve vsech prohlizecich - IE 5, Netscape 6, MOzilla, a Opera 5 stejne. Pokud bude odsazeni prostredniho sloupce od okraju treba zadan jako 1 pixel, tak bude vsude jeden pixel. Co proste zadate, to take dostanete :)
Myslel jste toto, nebo neco jineho?
Datum vložení: 8.8.2001 14:20:27
Ptal jsem se na předposlední větu Vaší odpovědi. To ostatní mě bylo jasné. Díky
Datum vložení: 8.8.2001 14:12:06
Hej, udelejte tam s tim něco!
Datum vložení: 8.8.2001 14:18:10
Jaky clanek mate na mysli?
Datum vložení: 8.8.2001 14:12:29
Dobrý den,
nedaří se mně nastavit délka levého sloupce tak, aby byla stejná jako délka prostředního sloupce (stejně jako <a href='http://www.interval.cz)' target='_blank'>http://www.interval.cz)</a>.
Děkuji za odpověď
Datum vložení: 8.8.2001 14:20:11
Zdravim,
interval.cz ma levy sloupec (stejne jako pravy) zadany fixne, tzn. asi 145 pixelu, kdezto prostredni sloupec na intervalu je zvetsuje/zmensuje podle velikosti okna prohlizece, a stejne tak tomu je i ve clanku.
Muzete presneji upresnit, co vlastne nejde nastavit?
Datum vložení: 8.8.2001 14:27:25
Jde mi o délku sloupce, nikoliv o šířku.
Když "sjedu" na intervalu na konec článku/stránky, tak je levý sloupec vybarven tmavěmodře až úplne dolů. A to mně právě nejde.
Diky.
Datum vložení: 8.8.2001 14:37:39
No, nedivim se, ze vam na nejde. Na intervalu je to udelane specialni "ficurou", kterou si asi necham panentovat a pak budu inkasovat poplatky za kazde pouziti :-).
Ale dost legrace. Levy sloupec je kompletne vybarven tmavomodre,az uplne dole proto, ze tento modry pruh je vlozen do stranky jako obrazek na na pozadi background v body). Obrazek ma sirku 1800 pixelu, vysku asi 1 pixel, a pekne se tak nasklada na celou plochu :-).
No a na plochach, kde by tento modry pruh vadil, treba vedle horniho a spodniho banneru, tak tyto bannery jsou vlozeny do tabulky, ktera ma velikost 100 procent a definovany BGCOLOR, ktery prepise obrazek na pozadi.
A to cele kouzlo :)
Datum vložení: 10.8.2001 1:04:40
Dekuji za radu. Funguje to prekvapive bez problemu. Nejtezsi je vymyslet jednoduche reseni :-).
R.
Datum vložení: 13.8.2001 8:02:50
Hlavne nezapomente na to, ze obrazek na pozadi musi byt dostatecne siroky, ja dam alespon 1800 pixelu, aby se hi-tech uzivatelu s velkymi monitory a rozlisenim na strance neopakoval.
Datum vložení: 13.8.2001 23:33:18
Ja jsem to "vymyslel" trosku jinak. Obrazek ma sirku jenom onech 145 pixelu, ale zadal jsem, aby se opakoval pouze ve ve vertikalnim smeru:
{ background-repeat: repeat-y; }
Robert Chmelař
Datum vložení: 29.8.2001 6:28:48
To sice bude fungovat, ale prohlížeče např. MSIE 2.0 a nižší (všechny bez kvalitní podpory CSS) ti to nesežerou.
Datum vložení: 3.9.2001 9:48:24
Prosim vas, MSIE 2.0 je davno mrtvy, vcetne IE 3.0 a jejich podil je tak mizivy, ze se je nevyplati brat v potaz.
Datum vložení: 7.9.2001 12:51:55
Já to chápu, jen jsem chtěl upozornit na to, aby se webmaster nedivil, kdyby mu přišla stížnost od sběratele starých programů.
Datum vložení: 7.5.2004 14:02:35
A co dát
body {height: 100%;}
#levejsloupec {height: 100%;}
Datum vložení: 9.8.2001 18:41:31
dobry den nedari sa mi dostat do background-u bunky v tabulke obrazok (vlastne mi to ide vsade okrem NN4) podobne ako to mate na Intervale v zahlavi tabuliek. A co ma prekvapuje este viacej ked si do svojho style sheet-u vlozim adresu vasho bacground image tak tento sa zobrazi spravne aj pod NN4. Mozte mi prezradit tuto "ficuru" (samozrejme ak to nieje tajomstvo ;-)) ? za odpoved dakujem a zelam vela dobrych napadov
Datum vložení: 13.8.2001 8:00:49
Zdravim,
zadne tajemnstvi v tom neni. Je mozne, ze kdyz nas obrazek funguje a vas ne, mate spatne cestu k souboru? Musel bych to videl - poslete na muj email, podivam se na to.
Datum vložení: 16.9.2003 18:18:46
zistil som este dalsiu vec, z ktorej som skoro infarktoval pokym som na nu dosiel a to to, ze ako back image nemozete pouzit jpg...
Datum vložení: 28.8.2001 12:22:55
s absolutnim pozicovanim jsou jen problemy, ja to mam na svych strankach delany takhle a funguje to jedna basen:
.levy {
width: 30%;
float: left;
padding-right: 4px;
}
.stred {
width: 50%;
float: left;
}
.pravy {
width: 20%;
float: right;
padding-left: 4px;
}
Datum vložení: 28.8.2001 13:35:10
Další podobný článek najdete na adrese <a href='http://dusan.pc-slany.cz/internet/css_p_design.htm' target='_blank'>http://dusan.pc-slany.cz/internet/css_p_design.htm</a> . Zabývá se <I>nejen</I> tvorbou tří sloupců, ale ještě navíc <I>hlavičky</I> a <I>patičky</I> - vše samozřejmé čisté CSS.
Datum vložení: 6.9.2001 9:13:51
Děkuji Vám za ten článek, nějak jsem potřebovala vědět jak na to. Pokouším se vytvořit stránky tak, abych se vyhnula frejmům, a můj původní třísloupcový layout jsem napsala velmi těžce a nepřehledně a takhle se to zjednoduší.
No a protože jsem úplný začátečník mám jeden dotaz:
- pokud chci vytvořit stránku např. dvousloupcovou (klasicky - levá strana menu, pravá strana - info, tam se bude měnit obsah) a teď musím mít na každé html stránce definovaný levý sloupec s menu? nebo jde to přes nějaké vložení souboru.
Nebo se tohle dělá úpně jinak?
Datum vložení: 7.9.2001 12:55:13
To se řeší na adrese <a href='http://dusan.pc-slany.cz/internet/leve_menu.htm' target='_blank'>http://dusan.pc-slany.cz/internet/leve_menu.htm</a> .
Datum vložení: 7.9.2001 23:55:55
D9ky za tip, je to super :-)))
Datum vložení: 22.9.2001 13:40:45
Mel bych na Vas maly dotaz. Na adrese <a href='http://www.dm2000.cz/reesag/pokus.html' target='_blank'>http://www.dm2000.cz/reesag/pokus.html</a> mam stranku kterou potrebuji udelat. Potrebuji vsak dosahnout toho aby se mi oba objekty definovane css stylem v pozadi nerolovaly pri posunu posuvnikem. Nevedel by jste nekdo jak to napsat. Resp. Lze pouzit border-attachment:fixed na vic prvku v pozadi v ramci jedne stranky. Jak :)???
Datum vložení: 3.10.2001 23:18:03
Dobry den,
kdyz tento clanek srovnavam s clankem <a href='http://www.interval.cz/r-article.asp?id=190' target='_blank'>http://www.interval.cz/r-article.asp?id=190</a> ktery resi dve tabulky vedle sebe, tak mam velike dilema, kterou z kostrukce stranek je lepsi pouzit.
Rad bych poprosil zkusene webmastery ci autora o pomoc.
Predem dekuji.
Pavel H.
Datum vložení: 2.1.2004 14:24:28
Prosím o poradu jakým způsobem lze pozicovat obrázky ve stránce, aby ležely na levém líci stránky a pak jestliže jsou dva na sebe navazující obrázky vedle sebe, pokouším se převést stránky z HTML do XHTML s použitím CSS, původní jsou s CSS, ale jsou tak zv. tabulkové.
Petr Quitta
Datum vložení: 17.8.2005 16:22:13
Proč se ve Firefoxu 1.0.6 krajní sloupce nepodbarví až do konce textu? Poslední řádek textu v nich "vyjíždí" z podbarvené plochy.
Datum vložení: 18.8.2005 12:19:45
zrušte si u left a right column height: 300px a mělo by Vám to jít
Datum vložení: 22.9.2007 20:24:44
podla mna je lepsie zadavat velkosti v percentach.potom nam to lepsie vyjde a nebude sa to prekrivat