Sova v síti - 2/3 - vydáno 12.2.2002 Dobrý den, po dlouhé odmlce je zde vaše Sova v síti :-) OBSAH -- Centrování v CSS -- Aktualizace programu HTML Tabulka -- Zajímavé články jinde na webu -- Novinky u Petra Kocny -- Odpovídáme na dotazy čtenářů Na úvod nám dovolte omluvu za dlouhou pauzu. Pracovní vytížení celého týmu, který Sovu připravuje, dosáhlo v posledních týdnech takové míry, že včasné dokončení tohoto čísla neumožnilo. Ze stejného důvodu zde dnes nenajdete avizovaný článek "Proč (ne)otevírat odkazy do nového okna" a další Sova vyjde až 25.2.2002. CENTROVÁNÍ V CSS Marek Prokop Dotaz na centrování prvků pomocí CSS bývá ve všech konferencích a diskusních fórech jedním z nejčastějších. Zatímco horizontální centrování textu pomocí vlastnosti text-align je evidentní, s centrováním blokových prvků a zejména s centrováním vertikálním je to již složitější. Hned na úvod však upozorním, v čem vám tento článek *nepomůže*. Je to vertikální centrování bloku, jehož výška je dynamicky určena výškou jeho obsahu. Tato úloha se z pohledu CSS rovná kvadratuře kruhu a bez klentského skriptování je neřešitelná. Co se tedy v článku dozvíte? Skoro vše ostatní, konkrétně: -- Jak vodorovně vycentrovat blok s plovoucí šířkou. -- Jak vodorovně vycentrovat blok s pevnou šířkou. -- Jak vodorovně i svisle vycentrovat blok s plovoucí šířkou. -- Jak vodorovně i svisle vycentrovat blok s pevnou šířkou. + Horizontální centrování boxu s plovoucí šířkou Horizontální centrování boxu s plovoucí šířkou se nejčastěji používá pro jednoduchý, čistě pomocí CSS vytvořený layout stránky. Hlavní výhoda takového layoutu spočívá v tom, že šířka hlavního textového sloupce je menší než šířka okna prohlížeče (a text je tedy lépe čitelný) a současně je tento sloupec v okně vycentrován (a není tedy ošklivě nalepen na levý okraj). Popisované řešení však lze kromě celého layoutu stránky použít i pro vodorovné centrování dílčích blokových prvků v rámci jejich rodičů. Typickým příkladem může být centrování seznamů, tabulek, obrázků, apod. Princip řešení je velmi jednoduchý a funkční v podstatě ve všech prohlížečích, které alespoň částečně podporují CSS 1. Spočívá pouze v tom, že centrovanému prvku určíme stejně veliké hodnoty vlastností margin-left (levý okraj) a margin-right (pravý okraj). Centrovaný prvek pak nesmí mít explicitně určenou šířku (vlastnost width), která tak zaujme celou zbývající šířku svého rodiče. Velikost okrajů může být definována pevně, např. v pixlech, takto: margin-left: 50px; margin-right: 50px; nebo dynamicky v procentech (z šířky rodičovského prvku): margin-left: 15%; margin-right: 15%; Na http://www.sovavsiti.cz/samples/samp02031a.html jsem připravil ukázkový příklad, ve kterém jsou všechny vlastnosti centrovaného prvku definovány takto: #page { margin: 5% 15%; padding: 1em; border: 2px solid #cc9; color: #000; background : #fff none; } Každý ze svislých okrajů tedy bude široký 15% rodičovského prvku, kterým je v uvedeném příkladu prvek BODY. + Horizontální centrování boxu s pevnou šířkou Pokud potřebujete horizontálně vycentrovat blokový prvek o pevné šířce, můžete prostudovat příklad na http://www.sovavsiti.cz/samples/samp02031b.html Dle normy CSS by měla stačit tato sada pravidel: width: 550px; margin-left: auto; margin-right: auto; Ta určuje, že vnitřní šířka prvku má být 550px a zbytek šířky rodičovského prvku se má rovnoměrně rozdělit mezi levý a pravý okraj (margin). Potíž je ale v tom, že "margin: auto" neumí IE 5/Win (a samozřejmě ani 4). Pro něj musíme použít trik, který využívá jiné chyby IE spočívající v tom, že vlastnost text-align v rozporu s normou zarovnáná i blokové prvky. V rodičovskému prvku tedy určíme centrování pomocí text-align: center a v centrovaném prvku zarovnání zase vrátíme zpět pravidlem text-align: left Pokud bude rodičovský prvek obsahovat nějaké další prvky, budou také vycentrovány, takže raději použijte jako rodiče samostatný, pro tento účel vytvořený DIV. + Horizontální i vertikální centrování boxu s plovoucí šířkou S požadavkem na vertikální centrování bloků na obrazovce se již dostáváme na poněkud tenký led. Centrovaný blok bude vždy mít buď pevnou, tj. autorem určenou velikost, nebo velikost plovoucí, závislou na velikosti okna prohlížeče. Pokud se do takového bloku nevejde jeho obsah, máme problém Pokud velikost obsahu centrovaného prvku znáte, je vše snadné. V opačném případě ale musíte použít vlastnost overflow s hodnotou auto, nebo scroll, aby obsahem šlo svisle rolovat. Kód tak bude kompatibilni jen s IE 4+ a NN 6. Opera 5, která jinak zvládá CSS velmi dobře, bude bezmocná. Princip řešení spočívá v absolutním pozicování centrovaného prvku procenty. Nejprve určíte procenty rozměry centrovaného prvku, např. takto: width: 80%; height: 70%; a pak jeho pozici tak, aby byl prvek umístěn ve středu svého rodiče. Pro výše uvedené rozměry tedy bude pozice definována takto: position: absolute; left: 10%; top: 15%; Platí to ale jen v případě, že centrovaný prvek nemá žádný padding či border, nebo při zobrazení v IE 5/Win, který špatně počítá velikosti bloků. Ve vzorovém příkladu, který naleznete na http://www.sovavsiti.cz/samples/samp02031c.html je proto definice o něco složitější: #page { width: 80%; height: 70%; padding: 2%; border: 2px solid #cc9; position: absolute; top: 15%; left: 10%; overflow: auto; color: #000; background : #fff none; voice-family: "\"}\""; voice-family: inherit; top: 13%; left: 8%; } Kromě pravidla "overflow: auto;" je na konci pozice předefinována tak, aby kompenzovala padding o velikosti 2%. Vlastnost voice-family je trik k ošálení IE -- ten na těchto pravidlech skončí (pokračuje až dalším selektorem ve stylesheetu) a předefinici pozice tedy ignoruje. Správně by měl být kompenzován i dvoupixelový border, ten však ovlivňuje centrování prakticky nepostřehnutelně. Tento postup není vhodný pro prvky vnořené hluboko ve struktuře dokumentu, který nepoužívá absolutní pozicování, neboť absolutně pozicovat lze prakticky jen prvky umístěné přímo v BODY, nebo v jiných absolutně pozicovaných rodičích. + Horizontální i vertikální centrování boxu s pevnou šířkou Poslední úlohou tohoto článku je horizontální i vertikální centrování boxu s pevnou šířkou. Opět musíme pamatovat na velikost obsahu centrovaného bloku (a případně použít vlastnost overflow) a opět použijeme absolutní pozicování. Tentokrát však pozici bloku nelze definovat jen v procentech -- místo toho použijeme procenta a záporné okraje. Začneme podobně, jako v předešlém případě tím, že určíme rozměry bloku, tantokrát však nikoli v procentech, ale v pixelech. width: 550px; height: 300px; Poté prvek "posadíme" pomocí absolutního pozicování a procent tak, aby se jeho levý horní roh nacházel přesně ve středu rodičovského prvku: position: absolute; top: 50%; left: 50%; Na závěr prvek posuneme zápornými okraji (margin) o polovinu jeho výšky nahoru a polovinu jeho šířky vlevo: margin: -150px 0 0 -275px; Nepřipomínám vám to návod na vyjmutí ježka z klece ;-) Vzorový příklad naleznete na http://www.sovavsiti.cz/samples/samp02031d.html opět používá trochu komplikovanější řešení, které centrovanému prvku přidává padding a border, což je třeba zohlednit při výpočtu záporných okrajů a obejít pro IE 5/Win: #page { width: 550px; height: 300px; padding: 10px; border: 2px solid #cc9; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -275px; overflow: auto; color: #000; background : #fff none; voice-family: "\"}\""; voice-family: inherit; margin: -162px 0 0 -287px; } Jako v předešlém případě i zde si musíte uvědomit, že absolutně pozicovat lze prakticky jen prvek přímo v BODY, nebo uvnitř jiného absolutně pozicovaného prvku. Metoda tedy není vhodná pro vertikální centrování prvků vnořených kdesi hluboko ve struktuře dokumentu, který jinak absolutní pozicování nepoužívá. + Odkazy na vzorové příklady Na závěr ještě rekapitulace adres vzorových stránek: -- Horizontální centrování boxu s plovoucí šířkou http://www.sovavsiti.cz/samples/samp02031a.html -- Horizontální centrování boxu s pevnou šířkou http://www.sovavsiti.cz/samples/samp02031b.html -- Horizontální i vertikální centrování boxu s plovoucí šířkou http://www.sovavsiti.cz/samples/samp02031c.html -- Horizontální i vertikální centrování boxu s pevnou šířkou http://www.sovavsiti.cz/samples/samp02031d.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Doporučte sovu v síti vašim přátelům. Přepošlete jim toto číslo, nebo použijte formulář na http://www.sovavsiti.cz/recommend.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AKTUALIZACE PROGRAMU HTML TABULKA V minulém čísle jsme psali o novém českém freewarovém programu HTML Tabulka. V článku, který naleznete na http://www.sovavsiti.cz/c02022.html jsme kritizovali mj. to, že program generuje hodnoty "top" atributu valign bez uvozovek a pro XHTML se tedy ještě musí ručně upravit. Dnes to již není pravda. Autor programu, Jan Stodůlka, dokončil verzi 1.3, která tento nedostatek odstraňuje a rozšířil i nápovědu k programu. Do verze 1.4 navíc přípravuje další zajímavá rozšíření. Program si můžete stáhnout na serveru Slunečnice http://www.slunecnice.cz/sw/HTMLTabulka nebo přímo na stránkách autora: http://jnf.hyperlink.cz/ Autora můžete kontaktovat na adrese mailto:jnf@atlas.cz. Zde také uvítá vaše náměty na další vylepšení programu. ZAJÍMAVÉ ČLÁNKY JINDE NA WEBU Typografické minimum: jednotky a míry Martin Kopta zahájil seriál o typografii na webu pro Interval.cz článkem o jednotkách, ve kterých se měří velikost písma. http://www.interval.cz/r-article.asp?id=938 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Starší čísla naleznete na http://www.sovavsiti.cz/archiv.html Více odkazů pro webmastery na http://www.sovavsiti.cz/odkazy.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ NOVINKY U PETRA KOCNY K 6.2.2002 ... v katalgu katalogů http://www.lf1.cuni.cz/~kocna/kam-www.htm a vyhledávačů http://www.lf1.cuni.cz/~kocna/roboti.htm Vzhledem k přestávce ve vydávání Sovy, vybíráme dnes jen ty nejzajímavější a nejaktuálnější novinky: -- Zařazen další nový seznam - WorldLight, celkem je jich nyní 185 -- Euroseek je zrušen, databáze je převzata novým zdrojem - Worldlight.com -- Hladat.sk (www.hladat.host.sk) je vylepšený. Přidělujie již ID a heslo pro editaci. Zasílá emailem potvrzení o změně nebo zařazení odkazu. -- Klikni.iDnes - změna URL stránky pro registraci nových odkazů, URL je http://klikni.idnes.cz/edit_seznamurl.asp -- Toplist.cz - opraveno URL pro přidávání odkazů URL: je http://www.toplist.cz/cgi-bin/edit.asp?a=p -- Zrušené servery, které zmizely - WebDirectory, Euroseek, GrafikaWWW, Svetfotografie - domena je sice registrovana, ale nejsou zveřejněny žádné stránky, staré zmizely -- FotoPruvodce změna všech URL, místo foto.pruvodce.. je ve všech odkazech fotopruvodce (dohromady) -- Icq.Cz - zrušena ikonka + URL na přidáni do seznamu neboť ICQ list stále neexistuje, přestože je již téměř rok slibován -- Christian-index, změna URL pro novinky na serveru a přidávání nových odkazů URL je: http://www.christian-index.com/directory/new.shtm URL je: http://www.christian-index.com/getlisted.shtml Box.sk - zrušena ikonka a odkaz pro přidávání stránek na server, nefunguje ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ Dotaz: Stahnul jsem si podklady k redesignu do HTML 4.01 a dal se do jejich studia. Na problem jem narazil v defici kaskadovych stylu: html>#header { height: 72px; } ... html>#maincontent { width: 45%; } Proste nevim, kudy do toho, co to znamena. Kdyz jsem to treningove zkusil vymazat, zadne zmeny jsem nezaznamenal. Mohl bych Vas pozadat o vysvetleni ? Odpověď: "abc>xyz" je varianta kontextového selektoru. Zatímco "abc xyz" vybírá všechny prvky xyz vnořené kdekoli v abc, "abc>xyz" vybere jen ty prvky xyz, které jsou přímými potomky abc. V příkladu, který uvádíte, je selektor "html>..." použit k ošálení některých prohlížečů, které tento selektor neznají a interpretují ho jako normální kontextový selektor. Prohlížeče, které "abc>xyz" podporují budou naopak selektor "html>#header" ignorovat, protože prvek s id header jistě není přímým potomkem html (asi je potomkem body). Dotaz: co je lepsi pro konstrukci stranky- a) pouzit frame, kde bude menu v jedne polovine a do druhe nacitat kazdy odkaz z menu? b) nebo pouzit stranky ktere se budou nacitat stale znova pri kliknuti na menu, pricemz pocitat s tim, ze se stejne casti nakesuji? Ktere z techto reseni je rychlejsi? Odpověď: Pokud neni velikost rámce, který se nenačítá pokaždé (asi menu), nezanedbatelná, je rychlejší řešení s rámci. Je třeba však zvážit problémy s přístupností a použitelností, které rámce přinášejí. I když se jedná o částečně subjektivní názor a z diskuse s některými čtenáři Sovy vím, že existují argumenty i pro názor opačný, jsem přesvědčen, že rámce významně snižují kvalitu běžných stránek a měly by být použity pouze ve speciálních případech. Více informací naleznete v článku "Výhody a nevýhody rámců" na http://www.sovavsiti.cz/c01052.html Dotaz: V jednom z predchozich cisel Sovy jste psali v clanku o XHTML 1.0 Strict informaci o tom, ze tag iframe je treba nahradit tagem object. Mohli byste mi prosim odpovedet jakym zpusobem lze toto reseni uskutecnit a jak je to podporovano v prohlizecich? Odpověď: Značku OBJECT lze skutečně použít jako nahrádu značky IFRAME, i když nenabízí všechny její možnosti. Nejjednodusší varianta vypadá takto:

Náhradní obsah, pokud prohlížeč načíst object neumí.

 Podpora v prohlížečích by měla být o něco lepší, než v případě značky IFRAME. Dotaz: Chtel jsem se jen zeptat jakym zpusobem jste vytvarel http://www.sovavsiti.cz. V hlavicce je PPWIZARD, to jste vse delal jim, nebo na css pouzivate jiny SW ? Nebo jste to delal rucne ? Hodne by me zajimal postup pri tvorbe teto stranky. Odpověď: Protože stránky Sovy v síti obsahují mnoho opakovaných částí (záhlaví, menu, zápatí, přihlašovací formulář, atd.), používáme PPWizard pro off-line generování stránek trochu podobně, jako se na straně serveru používají SSI (server side includes). Samotný kód stránek, a to jak HTML, tak CSS je však opravdu tvořen ručně, textovým editorem TextPad. Žádný HTML/CSS editor nepoužíváme. O PPWizardu se více dozvíte z článku "PPWizard - univerzální preprocesor i pro HTML" na http://www.sovavsiti.cz/c01192.html O textovém editoru TextPad píšeme v článku "TextPad - výborný editor i pro HTML" na http://www.sovavsiti.cz/download/sova0104.txt Dotaz: Zajímá mě, zda se dá pomocí CSS umístit na stránku více obrázků (něco jako fotoarchiv) aniž by se musely použít tabulky. Pod sebe by to nebyl tak velký problém, ale jak je dát vedle sebe? Odpověď: Značka IMG je řádková (inline). Za sebou zapsané obrázky tedy budou zobrazeny za sebou, nikoli pod sebou. Pomocí vlastnosti margin jim lze i určit okraje, vlastnostmi width a height sjednotit velikost. Na řádek by se pak mělo vždy zobrazit tolik obrázků, kolik se jich tam vejde. Protože však vyladění stránky může být v praxi složitější, věnujeme tomuto tématu příště celý článek. A to je pro dnešek. Těšíme se na shledanou v pondělí 25.2.2002, kdy v Sově naleznete: -- Obrázková galerie pomocí CSS -- Jak udělat galerii obrázků bez tabulek, jen s pomocí kaskádových stylů. -- Proč (ne)otevírat odkazy do nového okna -- ačkoli je otevření odkazu do nového okna někdy praktické, většinou z toho uživatel velkou radost nemá. Čím se řídit, abyste mu práci s odkazy co nejvíc usnadnili? -- Odpovědi na vaše dotazy, zajímavé odkazy, novinky v katalogu katalogů a vyhledávačů Petra Kocny, novinky na Slunečnici atd. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Nechcete, nebo naopak chcete dostávat Sovu v síti? Odběr lze odhlásit odesláním zprávy na unsubscribe@sovavsiti.cz. Přihlásit se lze odesláním zprávy na subscribe@sovavsiti.cz, nebo formulářem na adrese http://www.sovavsiti.cz/. Chcete nám cokoli sdělit? Uvítáme vaše náměty, připomínky, kritiku, atd. na adrese mailto:redakce@sovavsiti.cz. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Není-li v konkrétním případě uvedeno jinak, je autorem všech publikovaných článků Marek Prokop. Tento ezin, nebo jeho libovolnou část můžete volně šířit dále, pokud současně uvedete zdroj následujícím způsobem: _________________________________________________________________ Sova v síti -- (c) 2001 Marek Prokop -- http://www.sovavsiti.cz/