Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči



Podobné dokumenty
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití

================================================================================ =====

CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www

Tvorba webových stránek

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy

Pseudotřídy. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.

O CSS podrobněji. Box model Document flow Layout

Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border

(X)HTML, CSS a jquery

TNPW1 Cvičení

TVORBA WEBOVÝCH STRÁNEK

Rozměry, okraje a rámečky

Uživatelská příručka 6.A6. (obr.1.)

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...

Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová

Vývoj Internetových Aplikací

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové aplikace

VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY

Inovace a zkvalitnění výuky prostřednictvím ICT Databázové systémy MS Access propojení relací s formuláři a sestavami Ing.

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Kapitola 5 Tvoříme tabulky

ŠKODA Portal Platform

František Hudek. duben Informační a komunikační technologie MS Excel Úvod do Excelu III

IE1 jazyk HTML a kaskádové styly

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

František Hudek. březen ročník. Informační a komunikační technologie OS WINDOWS Hlavní panel

Flash - animace. 17. Změna tvaru - Flash. Vytvořila: Radka Veverková Vytvořeno dne: Flash. DUM číslo: 16 Název: Flash

Webové stránky Webové aplikace WebDesign Internet Marketing VAFRO CMS MODUL REALITY

Název: VY_32_INOVACE_PG3303 Pohyb ve 3D prostoru 3DS Max. Vzdělávací oblast / téma: 3D grafika, počítačová grafika, 3DS Max

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA:

FFUK Uživatelský manuál pro administraci webu Obsah

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4

Zobrazování bannerů podporují pouze nově vytvořené šablony motivů vzhledu.

Název: VY_32_INOVACE_PG3311 Kamera a její použití, světelné efekty. Vzdělávací oblast / téma: 3D grafika, počítačová grafika, 3DS Max

Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_05_IVT_MSOFFICE_03_Excel

Možnosti tisku v MarushkaDesignu

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Tvorba webových stránek

OFF - LINE. PRO ZAČÁTEČNÍKY Zdroje textů a obrázků

Nová struktura souborů a složek

František Hudek. červen 2012

Rozvržení stránky. Co se v modulu dozvíte? Pozicování

Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.

CSS Kaskádové styly. formátování webových stránek

Odstranění historie prohlížení

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Formuláře. Téma 3.2. Řešený příklad č Zadání: V databázi formulare_a_sestavy.accdb vytvořte formulář pro tabulku student.

CSS Stylování stránek. Zpracoval: Petr Lasák

Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek

Soukromá střední odborná škola Frýdek-Místek, s.r.o. 4 Forma denní, 5 Forma dálková

Studijní průvodce e-learningovými kurzy

Zdokonalování gramotnosti v oblasti ICT. Kurz MS Excel kurz 6. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.

Provozní dokumentace. Seznam orgánů veřejné moci. Příručka pro administrátora krizového řízení

IE1 jazyk HTML a kaskádové styly

Nápověda ke cvičení 5

PŘEHLED A MOŽNOSTI VYUŽITÍ WEBOVÝCH MAPOVÝCH SLUŽEB

Střední odborná škola a Střední odborné učiliště, Hořovice

Úvod 2 Snížení intervalu pro automatický import zásilek 3 Možnost použít jiné jméno odesílatele na štítku 4 Podporujeme i webový prohlížeč Opera

Výukový materiál zpracovaný v rámci projektu

DUM 02 téma: Corel - křivky

NÁVOD K AKTIVACI A POUŽÍVÁNÍ OVÉHO ÚČTU V DOMÉNĚ PACR.EU

K práci je možné přistoupit následujícím způsobem. Odkaz na práci se nachází na osobním webu autora práce:

Tvorba fotogalerie v HTML str.1

Základy CSS (3. přednáška)

Název: VY_32_INOVACE_PG3315 Umisťování textur pomocí modifikátoru UVW Map. Vzdělávací oblast / téma: 3D grafika, počítačová grafika, 3DS Max

Vzorce. StatSoft. Vzorce. Kde všude se dá zadat vzorec

Radka Veverková Flash

OBSAH. Předmluva 13 Poděkování Přehled dnešního vývoje webů Design pro minulost, přítomnost i budoucnost 33

Adobe Photoshop. 1. Seznámení s programem. 1. Seznámení s programem. XMF, montážní program. Tomáš Fab. Vytvořila: Bc. Blažena Kondelíková

Uživatelská dokumentace

Dokument a jeho části oddíly, záhlaví, zápatí

KAPITOLA 1 Přehled aktuálního vývoje webů 11

KAPITOLA 8 TABULKOVÝ PROCESOR

Metodologie pro Informační studia a knihovnictví 2

Střední odborná škola a Střední odborné učiliště, Hořovice

Přehled základních html tagů

Nabídka reklamních ploch na webu zpravy.plus

METODICKÉ LISTY. výstup projektu Vzdělávací středisko pro další vzdělávání pedagogických pracovníků v Sokolově

Barvy a barevné modely. Počítačová grafika

Webové stránky. 8. Pozadí webové stránky. CSS pozadí. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

CZ.1.07/1.5.00/

Ovládání ústředny Visonic přes mobilní telefon

Webové stránky. 16. Obrázky na webových stránkách, optimalizace GIF. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

UŽIVATELSKÝ MANUÁL PERSONALIZACE MOJE SODEXO V

Příklad definice směn pro 4 kolektivy, které se střídají v nepřetržitém provozu po 12 hodinových směnách

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Studijní průvodce e-learningovým kurzem. STRUKTURÁLNÍ FONDY A PROJEKTY v období

Na obrázku níže je vidět jedno z možných nastavení umístění grafu Ve sloupci pro graf. Spuštění první plovoucí sady. Spuštění druhé plovoucí sady

Střední odborná škola a Střední odborné učiliště, Hořovice

Ředitelství silnic a dálnic CR. odbor Silniční databanky a Národního dopravního informačního centra (ND1C) Slovenská 1142/7, Ostrava-Přívoz, PSČ 70200

Formátování buněk EU peníze středním školám Didaktický učební materiál

Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro pozicování Ing.

INFORMATIKA MS WORD TVORBA VLASTNÍHO STYLU

Obsah manuálu pro štítky v systému LogisTIS

Vytváření grafů v aplikaci Helios Red

Transkript:

Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Autor: Mgr. Tomáš Javorský Datum vytvoření: 06 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: DUM seznamuje s nejčastějšími problémy, na které může webdesiner narazit, upozorňuje na některé rozdíly mezi prohlížeči a ukazuje, jak je řešit. Studenti se využitím tohoto materiálu naučí, jak dosáhnout shodného zobrazení stránek v různých prohlížečích nebo jak vytvořit dvousloupcové rozložení stránky s proměnnou výškou.

Tipy a triky, rozdíly mezi prohlížeči Při vytváření webových stránek se musíme často vyrovnat s tím, že rozdílné prohlížeče interpretují různé vlastnosti odlišně, jinak přistupují k zadané velikosti prvků atd. Pro většinu situací existuje nějaké řešení, i když je třeba občas napsat několik řádek kódu navíc nebo vytvořit nějaký grafický prvek. Tento dokument obsahuje řešení některých nejčastějších problémů, s nimiž se lze při vytváření stránek setkat. Rozdílné rozměry prvků v Internet Exploreru a Mozille Jedním z problémů je to, že IE (zejména starší verze) vypočítává šířku a výšku objektů jinak než Mozilla a ostatní prohlížeče dodržující standardy - podívejme se na příklad: Máme prvek o šířce 700 px a výšce 400 px, s paddingem 50 px z každé strany. Zápis v tabulce CSS: div { width:700px; height:400px; padding:50px; } Zatímco IE ponechá vnější rozměry prvku a padding vytvoří dovnitř prvku, Mozilla vnější rozměry prvku zvětší o padding, takže je prvek větší - šířka: 700 + 50 +50 = 800 px, výška 400 + 50 + 50 = 500px. Totéž se týká i vlastnosti border - má-li prvek nastavený nějaký padding nebo border, zobrazí se jinak v IE a jinak v Mozille, což může vést k rozhození layoutu stránky. Prvek v IE Prvek v Mozille šířka 700 px výška 400 px výška 500 px výška 400 px šířka 700 px šířka 800 px -700 + 50 + 50 padding se vytvoří dovnitř prvku, rozměry zadané v CSS zůstanou padding se přidá k rozměrům prvku, rozměry zadané v CSS se zvětší o padding Řešení: Prvek, který má zadaný padding nebo border, ale nikoliv rozměry uzavřeme do vnějšího prvku (obalu), který má zadané rozměry, ale nemá zadaný padding ani border. Pokud nemá prvek padding ani border, zobrazí se stejně v obou prohlížečích, zůstanou zachovány jeho rozměry a proměnlivý bude pouze vnitřní prvek, takže nedojde k rozhození layoutu stránky - ukázka kódu na další straně.

Ukázka kódu: #obal { width:500px; height:400px; } #vnitrek { padding:20px; border:2px solid red; } <div id= obal > <div id= vnitrek > Jistou nevýhodou tohoto postupu je, že přidává další HTML prvky do kódu, nicméně protože prvky <div> nemají žádnou významovou hodnotu, nenarušují sémantiku kódu Vystředění layoutu v IE a v Mozille Pokud máme rozložení stránky, které nepřesahuje celou obrazovku a potřebujeme umístit layout doprostřed obrazovky, musíme použít jiný přístup v Mozille a jiný v Exploreru. Celý layout uzavřeme do prvku div, který má zadanou šířku - buď pevnou nebo procentuelní a pak tento div nastylujeme - ukázka následuje: obalovy <div id= hlavniobal >, který uzavírá všechny prvky stránky ostatní prvky stránky - menu, obsah atd. body { text-align:center; } #hlavniobal { margin-left:auto; margin-right:auto; } <body> Vystředí vše na stránce v IE. U dalších prvků je pak nutné nastavit znovu vlastnost text-align; <div id= hlavniobal > mezi tímto prvkem leží všechny ostatní prvky stránky Nastaveni stylu obaloveho divu: marginleft:auto; a margin-righ:auto; vystředí div a všechno v něm v Mozille. V IE nebude mít vliv. </body>

Absolutní reset Většina prvků se v prohlížečích zobrazuje mírně odlišně - jde zejména o vlastnosti margin a padding, což se později špatně odlaďuje. Abychom zobrazení všech prvků v prohlžečích sjednotili, lze použít tzv. absolutní reset, kdy nastavíme všem prvkům nulový margin, padding a border, takže se budou zobrazovat ve všech prohlížečích stejně. Stačí do tabulky stylů zapsat následující definici - hvězdička na místě selektoru znamená, že se definice týká všech prvků v HTML dokumentu: * { margin:0; padding:0; border:0; } Falešný dvousloupcový layout vytvořený pomocí obrázku Pokud vytváříme dvousloupcový layout s různobarevnými sloupci, narážíme na problém, která část stránky bude vyšší - pokud bude vyšší pravá část, bude pod levým sloupcem vidět její barva (obr. 1) - a naopak. U layoutů, kde známe přesnou výšku sloupců, se tomu můžeme vyhnout, většinou to však není možné - obzvlášť u dynamicky generovaných webů - u těch může být levý i pravý delší. Existuje jedno elegantní a jednoduché řešení: Levý i pravý vytvoříme jako průhledný a prvku <div>, který je oba obaluje, přiřadíme obrázkové pozadí představující požadované dva sloupce. Pozadí se bude svisle opakovat, takže vyplní jakoukoliv výšku stránky. obr. 1 obr. 2 levý pravý prvek <div> obalující oba sloupce - jeho pozadím je obrázek dole levý pravý protože je pravý delší, bude pod levým sloupcem vidět pozadí obrázek (např. pozadi.jpg) tvořící pozadí prvku a vytvářející efekt 2 sloupců

Ukázka kódu z předchozího příkladu: #obaldvasloupce { background-image:url( pozadi.jpg ); } #levysloupec { float:left; width:150px; } #pravysloupec { float:right; width:700px; } <div id= obaldvasloupce > <div id= levysloupec > <div id= pravysloupec >