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.

V dnešní době, kdy se na fenoménu jménem facebook.com zakládají stránky, které mají podporovat a dělat reklamu, popřípadě budovat „komunitu“ oficiálním stránkám produktu, značky, firmy… se zapominá na user friendly (uživatelsky přátelský), po vytvoření stránky na facebooku, Vám totiž facebook vytvoří odkaz, který vypadá např. takto:

http://www.facebook.com/pages/Tendon/348750825937

hned na první pohled je jasné, že tento odkaz není to „pravé ořechové“, když nám facebook nabízí změnit URL stránky na jakoukoliv chceme (musí být samozřejmě volná), jediná podmínka je, že stránka musí mít minimálně 25 fanoušků.
Adresu nastavíte na stejné stránce, na které si můžete změnit adresu svého profilu:

http://www.facebook.com/username/

Kliknete na „Nastavte uživatelské jméno. pro vaše Stránky.“ a vyberete si stránku, ve které jste správce a nastavíte adresu.
Tímto změníte adresu stránky třeba na:

http://www.facebook.com/mytendon

a tato adresa vypadá už určitě mnohem lépe

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