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

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

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

Vůbec nevím jak je tento princip účinný nebo jak moc googlu doopravdy pomáhám, ale jsem naučený, že první co musí být v kodu je text samotné stránky, a poté např. hlavička, levý sloupce / pravý sloupec, patička (někdy tento způsob nepoužiji 100% kvůli hlavičce a problematickému sepisování).

Typický příklad rozložení stránky:

HTML kód by v normálním případě vypadal:

	hlavička



	levé menu


	text stránky - obsah



	patička

CSS kód:

#header{
width:960px;
height:150px;
}
#content{
width:960px;
padding:20px 0px;
}
#content #menu{
width:220px;
float:left;
}
#content #text{
width:720px;
float:right;
}
#footer{
width:960px;
height:100px;
}

Takto to napíše většina kodéru, kteří postupují blok po bloku, ale jak jsem řekl víše, mi chceme docílit toho, aby text byl na prvním místě, proto by náš kod měl vypadat:

	text stránky - obsah


	levé menu



	hlavička


	patička

Abychom docíly něčeho podobného, tak css kod budeme muste trochu poladit:

#header{
width:960px;
height:150px;
/* timto dostaneme hlavicku opet nahoru, ale cela stranka pote musi byt
obalena jeste jednim divem, ktery bude mit sirku 960px, a
nastaven position:relative */
position:absolute;
top:0px;
left:0px;
}
#content{
width:960px;
padding:170px 0px 20px 0px; /* zvysil se padding + 150px */
}
#content #menu{
width:220px;
float:left;
}
#content #text{
width:720px;
float:right;
}
#footer{
width:960px;
height:100px;
}

Nevím zda ještě musím nějak kod dál okecávat změny jsem okomentoval v CSS, takže to bude asi všem hned jasné co se udělalo, jediné co se musí ještě do HTML přidat je jeden DIV, který bude celou stránku obalovat, ale ten tam bude každý mít už předtím, takže jediné co se musí nastavit je position:relative, ke kterému se poté bude pozicovat absolutně #header.
I kdyby to stále nebylo někomu dost jasné, tak tuto techniku jsem nedávno použil na stránce www.pohony-menice.cz.
Komentáře jsou Vám otevřené, takže se nebojte napsat svoje zkušenosti, techniky, účinnost tohoto zápisu

Typický problém začínajícího kodéra je ten, že se snaží dát jednomu prvku, např. DIVu, šířku, výšku, vnitřní odsazení, okraj a vnější odsazení naraz, neboli nastaví např.:

div{
width:300px;
height:300px;
padding:10px 15px;
margin:10px 20px;
}

tomuto nastavení se říká BOX model a pro názornost jak vypadá:

Na wikipedii je k nalezení obrázek na stránce Internet Explorer box model bug, kde je pěkně ukázáno jak si W3C představuje interpretaci a jak ho Internet Explorer zobrazuje, typickým příkladem je, že webdesigner používá pro testování stránky Mozilla Firefox a v tom přece vše jede jak má, ale pokud si poté stránku zobrazí v IE tak ejhle, najednou stránka nevypadá jak má! Je pár triků jak se to dá obejtí, např. použitím jiného DOCTYPE a přepnutí IE do správného (validního) zobrazení, a nebo se naučíme používat tzv. Matrjošku, místo zbytečného řečnění, ukáži rovnou postup!
HTML:

text

CSS:

#box{
width:300px;
height:300px;
margin:10px 20px;
}
#box #in_box{
padding:10px 15px;
}

Tímto docílíme to, že se ve všech prohlížečích nastaví výška a šířka boxu na 300px, můžeme nastavit i margin, protože ten se k šířce a výšce nepřipočítává, to se ale nedá říct o paddingu, který nastavíme divu uvnitř. Tímto docílíme správnou funkčnost ve všech prohlížečích.
Doufám, že jsem tento problém vysvětlit srozumitelně pokud ne, tak buď máte otevřené komentáře pod článkem a nebo si můžete další infromace vyhledat na google