Weblog Letem světem Stylování obyčejných seznamů :: Weblog Letem světem

Archiv weblogu Letem světem z let 2002-2003


Stylování obyčejných seznamů

Zrovna včera jsem jednomu kamarádovi ukazoval krásu klasického HTML seznamu, který je tvořen pomocí elementů <ul> a <li>. Přišel totiž ke mně pro radu se stránkou, na které právě pracuje. Samozřejmě šlo o klasické uspořádání záhlaví + dvousloupcový layout. A samozřejmě vnořované tabulky v akci. Kód jsme tedy zgruntu předělali, nahradili strukturovaným XHTML a nasadili plné řízení vzhledu a rozmístění přes CSS. A samozřejmě jsme z levého menu reprezentovaného původně jednosloupcovou tabulkou udělali HTML seznam, který jsme řádně nastylovali. Výsledný kód se podstatně zmenšil a zjednodušil, navíc se zobrazuje shodně v MSIE, Opeře i Mozille.

Kamarádovi se nový styl tvoření stránek (přes externí CSS) docela zamlouval, nejvíc ho ale nadchla jednoduchost toho seznamu jako menu. Snažil jsem se mu ukázat, jak různě se dá jeden a ten samý kód snadno přestylovat na úplně jiný vzhled i chování. Pak poděkoval, dopili jsme pivko a odešel domů. A dnes jsem narazil na stránku, kterou bych mu zcela určitě ukázal a nemusel vše polopaticky vysvětlovat a ukazovat. Na stránce Listamatic totiž můžete najít ukázky různých způsobů stylování obyčejného seznamu - jako běžný seznam s odrážkami, jako menu s rollover efektem nebo jako horizontální navigaci. U každého příkladu navíc naleznete i příslušný HTML a CSS kód, takže to můžete používat jako názornou učební pomůcku. Anebo motivační ukázku pro ty, co rozhodují. (zdroj Zeldman)

Doplněno 22:52: Další zajímavý spot k tomuto tématu s názvem Jak se odrazit můžete najít na Nitrobloku. Autor rozebírá všechny možnosti, které vám CSS nabízí pro vzhled odrážek: jednu ze standardních, libovolný obrázek, znakovou entitu či prosté nic.

7.9.2003 | 21:28 | přidal Lukin

Vaše názory

Nebyl přidán žádný názor k tomuto tématu.

Weblog byl vytvářen publikačním systémem b2. Veškeré texty z archivu mohou jsou volně použitelné.