CLEARFiX - xhtml, css, javascript, seo

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

Říkáte si k čemu to může být takové „sloučení více obrázků v jeden“, ale např. facebook, youtube, amazon a určitě spousta dalších moc dobře ví. Jde v podstatě o to, že více obrázků, které vkládáme do stránky přes CSS (background:ur(xxx.gif)), můžeme sloučit do jednoho společného obrázku, a tím ulehčit stránce jednak datově ale i počtem samotných dotazů na jednotlivé obrázky na server.

Příklady sloučení

Jak už jsem zmiňoval výše, je pár známých webů, které tento systém používají:
facebook.com
youtube.com
amazon.com

jak vidíte, tak všechny obrázky (kromě těch, které používají jako opakování buď repeat-x nebo repeat-y, zálaží na pozicování obrázků), jsou v jednom souborů, tím se docílí to, že se načte jeden obrázek, ve kterém jsou všechny obrázky, které se používají na této stránce.
Touto úpravou mají dohromady menší velikost, než kdyby byl každý obrázek zvlášť a tím pádem je na server pouze jeden dotaz.

Ale jeden z největších důvodů, kvůli kterému tuto techniku začínám postupně využívat a kterou Vám dnes ukážu, jsou odkazy, tlačítka nebo prostě prvky, které se po najetí změní v jiný obrázek, pokud neuděláte to, že je dáte dohromady v jeden společný, tak se při najetí stane to, že obrázek „přeblikne“, jelikož se načítá druhý, který má vytoužený efekt a uživatel tím pozná, že najel na prvek, který něco po kliknutí udělá.

Způsob jakým tento problém řeším já je na stránce www.nafukovacilode.cz.
Takto vypadá obrázek a takto zdrojový kod:

a:link,
a:visited,
a:hover {
width:267px;
height:66px;
display:block;
text-decoration:none;
position:absolute;
right:35px;
top:37px;
background: url(../img/homePageAction-more-bg.jpg) top left no-repeat;
text-indent:-9999px;
}
a:hover {
background: url(../img/homePageAction-more-bg.jpg) bottom left no-repeat;
}

Tímto se zaručí to, že po přejetí nad odkazem Vám odkaz neproblikne tím, jak se druhý obrázek dočítá.
Doufám, že jsem aspoň pár kodérům ukázal novou techniku, která jim pomůže zdokonalit kód, pokud by jste někdo měl nějaký dotaz, nebo věděl lepší řešení tak komentáře jsou Vám otevřené

P.s: Až vyzkouším jeden nástroj, který by toto všechno měl ulehčit, tak se o něj určitě rád podělím