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

Rozměr: px

Začít zobrazení ze stránky:

Download "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"

Irena Švecová
před 6 lety
Počet zobrazení:

1 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 absolutně pozicované bloky) <style type= text/css > {margin:0;} # obsah {position:relative; left:45px; top:10px; width:400px; border: 1px solid red;} </style> </head> <body> <h1>data Storage</h1> <p>téma<a href= >Správy</a>, zálohování a archivace dat je stále velmi aktuální. Množství dat vygenerovaných jednotlivými společnostmi stoupá.</p> <div id= obsah > <p>bliží se<a href= >další ročník konference</a>a výstavy Data Storage workshop.</p> </div> <p>data Storage workshop 2. ročník DSW proběhne 25 září v Praze.</p> </body>

2 Relativní pozicování Data Storage CSS 2 Text. Odstavec px 400px Odstavec 2 10px Text. Odstavec3... Blok (Odstavec 2) je odsazen o 10px od bloku předchozího elementu a 45px vlevo od toku od místa, kde začíná text. Tok není pozicováním přerušen. Obsah před i za relativně pozicovaným elementem tok dodržuje. Relativní pozicování se používá, kdy nemá být pořušen tok obsahu. Absolutní pozicování se používá hlavně u elementů, které mají být pozicovány velmi specificky.

3 CSS 3 Pevné pozicování Pevné pozicování umožňuje umístit blok napevno kamkoliv na stranku. Na rozdíl od absolutního pozicování jsou pevné elementy pozicovány vůči oknu prohlížeče. </style type= text/css > #nav { position:fixed; left:0px; top:0px; background:blue; width:100%; } ul, li, a { list-style-type:none; display:inline; text-decoration:none; padding-left:3px; padding-right:3px; } </style>

4 Pevné pozicování Výsledek: navigace CSS 4 Data storage Text Pokud obsah posunete, bude se objevovat pod navigací. Statické pozicování Umíst uje blok do normalního způsobu toku obsahu. Statické pozicování je podobné použití pravidla text-align: left Je to výchozí chování, takže se používá pouze pro změnu jiného pravidla.

5 CSS 5 Obtékání elementů Záměr nastavení obtékání obsahu kolem některých elementů, zejména obrázků. <style type= text/css > img { float: right; padding: 15px; } </style> Výsledek Text Obrázek Můžete nastavit obtékání libovolného elementu.

6 Obtékání elementů Obtékání bloku navigace #nav { float: rigrt; border: 1px solid red; padding-right: 20px; padding-top: 10px; margin-left: 10px; } CSS 6 Text px 10px Uvodní Str.1 Str.2 O nás Kontakt 20px

7 Zrušení obtékání CSS 7 Zrušen ení obtékání znamená odstranění okolního obsahu (element bude stále zarovnán na danou stranu, ale nebude obtékán jinými elementy). Vlastnost clear s hodnotami: left, right, both Navigace Text

8 CSS 8 Osa Z Osa Z je osa, podle níž na sebe můžete vršit a překrývat elementy. - Můžete určit, které bloky budou v popředí. Příklad. Vlastnost z-index u pozicovaných elementů. #box1 { position:absolute; top:10px; left:10px; background:red; width:300px; height:200px; z-index:1; }

9 Osa Z #box2 { position:absolute; top:20px; left:20px; background:yellow; width:300px; height:200px; z-index:2; } #box3 { position:absolute; top:30px; left:30px; background:blue; width:300px; height:200px; z-index:3; } CSS 9 Čim vyšší je číslo, tím bliže se element objeví

10 CSS 10 Rozvržení 1. Třisloupcový návrh n s postranními sloupci s pevnou šířkou Sloupec má pevnou šířku Šířka sloupce se zmenšuje nebo zvětšuje podle změny velikosti okna prohlížeče nebo rozlišení obrazovky Sloupec má pevnou šířku Pro umístění levého a pravého sloupce se při vytváření tohoto návrhu používá absolutní pozicování. Šířka prostředního sloupce je neuvedená, takže se bude měnit podle dostupného místa.

11 Rozvržení CSS Tři i sloupce se společným záhlavz hlavím m a zápatz patím Toto rozvržení pouzívá k dosažení žádoucího výsledku pouze plovoucí elementy a ne pozicování. záhlaví Postranní sloupec Obsah Postranní sloupec zápatí Příklad. Rozvržení pomocí plovoucích elementů. <style type= text/css > #zahlavi{width:768px;} #nav{float:left; width:200px;} #obsah{float:left; width:368px;} #vpravo{float:left; width:200px;} #zapati{width:768px;clear:both;} </style>

12 CSS 12 Vnořený plovoucí element Obsah obtéká blok uvnitř hlavní oblasti. (blok může být použit pro navigaci, obrázek nebo cokoliv jiného) Hlavní obsah Plovoucí prvek Příklad. Rozvržení s plovoucím elementem <style type= text/css > #obsah{margin:10px; border:1px solid red;} #obsah #nav{ float:right; width:150px; border:1px solid blue; margin-left:10px; } </style> V kódu HTML, musí být element div s identifikátorem nav vnořen v element div s identifikátorem #obsah.

13 CSS 13 Návrhy zarovnané na střed Návrh je zarovnán na střed a volné místo je rozděleno mezi levou a pravou stranu. Oblast pro návrh má pevnou šířku a je zarovnána na střed Pro zarovnávání způsob se záporným vnějším okrajem. Příklad. Pevný centrovaný návrh <style type= text/css > #kontejner { position:absolute; left:50%; width:400px; margin-left:-200px; border:3px solid red; }

14 CSS 14 Návrhy zarovnané na střed #kontejner #obsah {font-size:48px; font-weight:900; margin-top:100px; color:lime; border:2px solid black;} #kontejner #nav { background-color:yellow; font-size:32px; font-weight:900; position:fixed; top:0; width:400px; border:2px solid blue;} } </style> </head> <body> <div id="kontejner"> <div id="obsah"> <h1>1-obsah</h1> <p>text<br/><br/><br/><br/><br/><br/></p> </div> <div id="nav"> <h2>2-navigace</h2> </div> </div> </body>

Podobné dokumenty

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

Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení