.: Rychlé menu: navigace .:. odkazy .:. kategorie .:. vyhledávání .:. archivy .:. autoři :.  

19.10.2003



Jsem v CSS téměř začátečník, tak prosím „stylové guru”, aby mě nekamenovali, když jim zafušuju do řemesla.

Jako spousta začátečníků v CSS jsem narazil na problém — převést design z tabulkového do beztabulkového. Převáděl jsem před časem tento blog, který má klasický „dvousloupcový” design a převedl jsem ho tím nejjednodušším způsobem: levý sloupeček jako blok s float:left. Jenže pokud chci, aby v HTML kódu byl kód pro levý sloupeček až za textem, musím sáhnout k position:absolute. (Nemusím, pokud dám hlavnímu textu atribut float:right... Ale pokud mu nechci dávat pevnou šířku, jsem v koncích...)

No a jak jsem si tak hrál s tím designem, napadlo mne udělat si jednoduchý online nástroj, který by mi zjednodušil tvorbu CSS. Inspirovala mne vlna všelijakých list-a-maticů, border-o-maticů a podobných CSS pomůcek a výsledek mé noční práce můžete vidět zde.

Zatím funguje jen návrh dvousloupcového designu, pokud budou ohlasy kladné, dodělám i třísloupcový design a další fičurky. Princip práce je jednoduchý — na obrazovce máte tři oblasti: Hlavičku, levý navigační blok a hlavní text. V hlavním textu vidíte stále aktuální CSS a HTML. Každá oblast má v pravém horním rohu dvě tlačítka — jedno na definici písma v tom kterém bloku, druhé na definici vlastností margin, padding a border (u hlavičky navíc height a u levého bloku width). Každou z těchto vlastností můžete nastavit buď v pixelech, em, ex nebo v procentech, popřípadě ji vůbec neuvádět (NONE).

V hlavním textu jsou také dva odkazy — první je na nastavení výchozích hodnot, druhý přepíná mezi návrhem rozložení a barevným řešením.

Samosebou mne napadá ještě spousta věcí, které bych mohl vylepšit, ovšem před tím bych rád, aby celé dílko shlédli lidé, kteří webdesignu a CSS rozumí líp než já. Pro ně to sice není určeno, ale budu rád, když mě upozorní na chyby ve výsledném CSS kódu (nemyslím syntaktické, myslím prohřešky proti zásadám designu).

Konstruktivní kritiku k CSStyleru prosím do komentářů...

PS: Děkuji Ronymu, Otovi a Pixymu za rady a testování.


Zadal Arthur Dent, 19.10.2003 23:26:56, 9 komentářů...,
TrackBack URL tohoto příspěvku je http://www.maly.cz/tb.php/527

Zpět na článek

HotLinks
Zobrazit komentáře v chronologickém pořadí

kua - rony (web)

taka zaujimava vec a cely den nikto ani jedno pismeno?

chalani, podla mna z toho kuka pekna vecicka a uz sa tesim, ako zacnu komercaci Arthura napodobnovat, pretoze doteraz prisli len na primitivny TEXTAREA pre css subor vo svojich posahanych systemoch {wink}

Arthure diky.
    


    

Re: A co tohle? - Jiri Krakora

Jeste zdroj:

Poradil mi to nekdo na Intervalu. Take jsem to pred pul rokem resil.
    


Re: A co tohle? - Arthur Dent (web)

To je právě to... Když vypnete CSS, tak je pořadí NAVIGACE - TEXT... Ve zdrojovém HTML by měl být nejdřív obsah, pak navigace...
    

Re: A co tohle? - Jiri Krakora

Da se tam pridat mini navigace, ktera se skryje v css. Pri vypnutych stylech se objevi. Ale podle mne to nema valny vyznam. Minimalni procento lidi vypina styly, nebo chodi po internetu s N4.7 a starsim.
    

Re: A co tohle? - Arthur Dent (web)

Znovu: Ten levy sloupec, tedy ten vnimany jako navigacni, by mel byt v kodu az za textem. Neni to jen kvuli vypnutym stylum, to jsem udaval jako priklad. Ale je to treba pro lidi, co chodi z PDA - viz http://blog.converter.cz/weblogy-pda.htm Viz tez DogmaW4
    

Re: A co tohle? - Jiri Krakora

Tak to me nenapadlo. Poradil bych i skript, ale ten se da take vypnout. A tabulky jsou pomale. Ovsem to absolutni pozicovani, podle meho nazoru, neni take moc dobre reseni. Pravdepodobne to v IE zapricinuje nemoznost rozumne oznacit text. Co se tyce PDA, vetsina mych znamych, kteri ho maji, si stranky pouze nahraji a prohlidnou si to pak doma na PC, ale to jsou lide, co maji doma modem a nechteji zbytecne utracet. Takze shrnuto, podle meho nazoru to nema rozumne reseni.
    

Re: A co tohle? - Arthur Dent (web)

Obecný trend je tento: V HTML by měl být obsah na začátku stránky. Řešitelné to je změnou paradigmatu (navigace doprava) nebo absolutním pozicováním.
    

Re: A co tohle? - Jiri Krakora

Navigace vpravo je dobra. Absolutni pozicovani je divne. Opakuji, ze v IE nelze oznacit text.
    
HotLinks
Zpět na článek