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.

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

V tomto článku bych chtěl vysvětlit co je potřeba k tomu, aby si kodér mohl nastylovat vlastní vzhled bubliny, ve které se zobrazují informace po kliknutí na ikonku na mapě, pro názornost, ukážu příklad na nově spuštěném webu www.zetor.cz, kde v kontaktech naleznete, po kliknutí na záložku „Jak k nám“, google mapu. Když si kliknete na jednu z ikon, umístěných na mapě, tak zjistíte, že použitý vzhled je trochu jiný, a upravený.

Je zbytečné, abych zde opět sáhodlouze popisoval, jak vše udělat, a popisoval krok po kroku, proto sem hodím pouze odkaz na příklady, na kterých je pěkně vidět, že stačí pouze připojit do dokumentu jeden Javascriptový soubor, a poté už si můžete bublinu stylovat dle Vaší libosti. Pokud Vám nebude něco jasné nebo budete mít s něčím problém, tak buď se zkuste podívat do zdrojových kódů na www.zetor.cz a nebo napište do komentářů, pokud budu vědět, rád poradím

Né každy doma máme dva operační systémy, s různými prohlížeči a nastavené tak, abychom si vše mohli otestovat, proto je zde služba BrowserShots, slouží k otestování Vašich stránek a můžete si udělat obrázek o tom jak se bude stránka chovat na jiných systémech a jiných prohlížečích, mimo to si můžete ještě vypnout Javascript, Javu a Flash a nebo nastavit barevnou hloubku a velikost obrazovky.

Pokud znáte ještě nějakou jinou stránku, která umí podobné věci nebo používáte na testování stránek něco jiného, tak se podělte do komentářů