CLEARFiX - xhtml, css, javascript, seo

Jelikož je mojí hlavní náplní práce implementece webu pro redakční system, kde si obsah zákazník plní a upravuje sám, tak musím počítat s nemožným. Jeden z takových typických příkladů je horizontální menu, např. na www.realspektrum.cz nebo na www.hotel-prestige.cz. Jak si můžete všimnout, tak na obou webech je menu uděláno tak, aby byly jendotlivé položky roztáhnutý na celou šířku, a nebyl na konci nehezký „zub“.
Proto jsem si sepsal jednoduchý Javascript, který mi pomůže s přepočítáním, a roztáhne menu (respektive jednotlivé položky) tak, aby menu přesně sedělo a bylo přes celou šířku stránky.

Ukázkový zdrojový kód HTML z realspektrum.cz:

Nemovitosti
Financování
Naše služby
O společnosti
Tiskové centrum
Kontakty

Javascript, s jednotlivými komentáři

var widthLI
var widthSum = 0

/* SPOCITANI ITEMU */
countLI = $('#menu li').length

/* ODSTRANENI VSEM ITEMUM PADINNGU Z LEVA A Z PRAVA KVULI POCITANI SIRKY */
$('#menu a').css('padding', '9px 0px 10px 0px')

/* PROBEHNUTI VSECH ITEMU A ZJISTENI JEJICH SIREK + CELKOVE SPOCITANI */
$('#menu li').each(function(i, val) {

	/* ZJISTENI SIRKY JEDNOTLIVEHO ITEMU */
	widthLI = $(this).width()

	/* PRICTENI SIRKY AKTUALNIHO ITEMU K CELKOVE SIRCE + PREVEDENI NA CISLO */
	widthSum += Math.abs(widthLI)

})

/* ZJISTENI ROZDILU SIRKY A URCENI MEZERY */
differenceWidth = $('#menu').width() - widthSum

/* ZJISTENI JAK VELKY PADDING SE MUZE DAT NA JEDNIOTLIVY ITEM */
paddingSize = (differenceWidth / countLI) / 2

/* PRIRAZENI PADDINGU JEDNOTLIVYM ITEMUM */
paddingSizeItem = '9px ' + Math.floor(paddingSize) + 'px' + ' 10px ' + Math.floor(paddingSize) + 'px'
$('#menu a').css('padding', paddingSizeItem)

/* SPOCITANI VELIKOSTI POSLEDNIHO PADDINGU */
differenceWidthWithPadding = (differenceWidth - (Math.floor(paddingSize) * countLI * 2)) + Math.floor(paddingSize)

/* URCENI PADDINGU PRO POSLEDNI ITEM */
paddingSizeItemWithDifference = '9px ' + differenceWidthWithPadding + 'px' + ' 10px ' + Math.floor(paddingSize) + 'px'	

/* PRIRAZENI PADDINGU POSLEDNIMU ITEMU */
$('#menu li').last().find('a').css('padding', paddingSizeItemWithDifference)

Je asi zbytečné dál celou funkci popisovat, tento případ je při využití paddingu z leva a prava, ale samozřejmě jde s lehkou úpravou doladit i pro přidávání šířek jednotlivým položkám.
Za jakýkoliv komentář neb o připomínku budu vděčný, díky

Jeden z prvních článků zde na blogu byl o průhledném PNG pro IE 6, ale přímo jemu se věnovat nechci, chci se zabývat jedním problémem, na který jsem narazil při nedávnem ladění stránek.

Základní zápis vypadá takto:

Tímto na elemntu logo a search, zprůhledním PNG.
Druhá možnost zápisu je, že chci přímo cílit na určitý element, který je v elementu:

Tímto docílím toho, že se dostanu na element s ID logo, který je v elementu s ID header.
Já jsem si na tento zápis už docela zvyknul, protože stejně zapisuji i styly v CSS, jenže k tomuto zápisu MUSÍTE MÍT do stránky připojený nějaký Javascriptový Framework (jQuery, Mootools, Scriptaculous…), který toto umí! Nedávno jsem totiž ladil stránky, ve kterých žádný JS Framework nebyl a zaboha jsem nemohl přijít na to, proč to nefunguje.
Strávil jsem nad tímto problémem nějakou chvilku a to už je důvod o tom napsat krátký článek
Pokud jste někdo měl ještě nějaký podobný problém nebo víte o něčem co se hodí k tématu, tak se nebojte zapojit do diskuze, díky.

Pokud používáte prettyPhoto a vkládáte na stránky fotky o velkých rozměrech, tak se na nich objeví v pravém horním rohu, tato ikonka a fotka se zmenší:

asi né každému se může tato featura líbit, proto se dá jednoduchým způsobem vypnout:

$("a[rel^='lightbox']").prettyPhoto({
	allowresize: false
});

stačí nastavit allowresize na false a prettyPhoto, už nebude fotky změnšovat a zobrazovat na nich ikonku
Více o těchto parametrech si můžte přečíct v dokumentaci, možná se budete divit co se dá vše v prettyPhotu nastavit.

Cufón slouží k použití vlastního fontu na webových stránkách, je to Javascriptový nástroj a jeho správná funkčnost je tudíž podmíněna zapnutým Javascriptem.

Pro použití si musíme stáhnout ze stránek cufon.shoqolate.com soubor cufon-yui.js, který připojíme do dokumentu, tímto jsem splnili první část, druhá část je o vytvoření souboru se samotným fontem, který si vygenerujeme na výše uvedené stránce.
S vyplněním poliček asi nikdo nebude mít problém, ale i kdyby přesto, tak dejte vědět do komentářů nebo e-mail, rád poradím, asi jediný problém je s výběrem „glyphů“, já vybírám Basic Latin, Latin-1, Latin A a Latin B, stačí odzkoušet a otestovat, zda fungují všechny znaky a diakritika.
Po úspěšném stáhnutí souboru a nahrání do stránek, si oba soubory připojíme do dokumentu:

Tímto jsme dostali cufón do stránky, teď ho musíme ještě spustit na daných elementech.
Nejjedodušší zápis, pro nadpis H2, vypadá takto:

Pokud děláme klikací nadpis H2 a chceme hover nad cufónem, tak musíme při volání cufónu zavolat atribut hover a nastavit ho na true:

Musíme ještě pro IE zavolat JS funkci, která nám odstraní bug, který vykresluje cufón se zpožděním, umísťujeme ho nad ukončovací tag </body>:

Popisovat jednotlivé další nastavení nemá cenu, když na oficiálních stránkách je výborná dokumentace.

Pokud Vám i přesto není ještě něco jasné, tak se můžete podívat na stránky, kde jsem cufón hojně použil www.mytendon.cz a www.lanex.cz.

A teď potom všem vysvětlování přejdu k nevýhodám, hlavní je, že text nemůžete označit (v IE s trochou štěstí jde), proto není dobré používat na celé bloky textů, maximálně nadpisy a některé prvky, u kterých se nepočítá s kopírováním.
Celkově je cufón efektní Javascriptový nástroj, který se snad používá a posouvá web do úplně jiného levelu. Určitě doporučuji minimálně zkusit a ošahat si co umí a co se s ním dá všechno dělat

Netuším, kolik návštěvníků stránek používá tisk přímo z prohlížeče, ale rád to, i třeba tomu 1% usnadním a vytvořím jim speciální styl pro tisk.
Jak vypadá výsledný vzhled tisku, se můžete podívat na nově spuštěných stránkách www.lanex.cz, nejlépe to jde vidět v sekci O nás, pokud si (v Internet Exploreru) zobrazíte náhled tisku, tak uvidíte, že se tiskne opravdu jen text, který je pro uživatele důležitý.

Základní deklarace speciálního tiskového stylu se provádí přes:

ve zdrojovém kódu ho umísťuji pod všechny CSS, které mám nadeklarovány, aby všechny CSS tzv. „přebyl“.
Samotný print.css vytvořím z hlavního CSS stylu, kde nastavím header, footer a menu (pokud je) na display: none, ostatní nadřazené DIVy hlavního textu, dám na 100% a background (pokud mají) nastavím na bílý, samozřejmě jím odstraním padding a margin a výsledek testuji v Internet Exploreru, zdá se mi na toto nejrychlejší a nejlepší a jelikož většina uživatelů (BFU) používá právě IE.

Samotné tlačítko, sloužící pro tisk stránky vypadá nějak takto:

Vytisknout stránku

Více o tisku stránky vědět asi nepotřebujete, existují samozřejmě ještě triky, jak výsledný vzhled tisku pomocí CSS doladit, ale nevím kolik kodéru něco podobného používá, nebo se tiskem do podrobna zabývá.
Opět stejný závěr, kdybyste měli jakýkoliv dotaz nebo nějaké doplnění k tisku HTML stránky, tak se neváhejte vyjádřit do komentářů, díky