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í.