CLEARFiX - xhtml, css, javascript, seo

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

Nejsem ten, komu by se něco podobného hodilo, ale věřím že spousta uživatelů některé prvky využije!
Proto přikládám dva odkazy ke stažení:
iPhone GUI
Palm Pre GUI

Doufám, že je narozdíl odemě využijete

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

Každý kdo používá nebo chce používat vlasní mapu na svých stránkách, musí si ke každému místu na mapě nalést GPS souřadnice.
Při prvním testování map na svých stránkách jsem používal „vytahování“ souřadnic z odkazu, který mi po vyhledání google nabídnul, ale tento způsob je nepřesný, a neurčí místo tak, jak bych si představoval.

Do dnes jsem používal způsob, který fungoval, ale byl složitější na ovládání a docela při větší práci zdržoval, princip spočíval v tom, že jsem si prvně vyhledal místo na mapy.cz, kliknul si na vyhledané místo, potom na GPS:

GPS souřadnice vykopíroval a vložil do maps.google.com, tím se mi udělal přepočet, a vrchní (převedné) číslo jsem zkopíroval a vložil do API na svých stránkách:

Toto jsem dělal vždy, když jsem chtěl zjisti GPS nějakého místa, až dnes mi Jindra ukázal jeden úžasný nástroj, díky kterému se vše zjednodušší

Jde v podstatě jen o to, že si vytvoříme novou záložku, do které si vložíme na místo adresy tento kousek kódu:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Po kliknutí na tuto záložku (v případě že jsem na stránce maps.google.com), se nám zobrazí GPS souřadnice středu vyhledaného místa:

Na obrázku jde krásně vidět, že stejné místo, které jsem vyhledaval předchozím způsobem, má stejné souřadnice jako zavolání na stránce této funkce. Pro ty co stále nechápou jak může něco takového fungovat, tak jde jen o to, že se na stránce zavolá javascriptová funkce, která vytáhne střed mapy, takže pokud pohnu mapou a poté teprve kliknu na záložku, tak GPS souřadnice budou jiné.

Doufám, že vám to ulehčí práci tak jako mě, pokud někdo používáte něco podobného, nebo máte svůj vlastní způsob vyhledávání GPS souřadnic, tak se neváhejte pochlubit do komentářů. Díky