TNPW 1

1. Cvičení 9 Centrování, Box model,plovoucí fotogalerie Technologie pro publikování na webu 1 TNPW 1

2. Centrování blokového prvku • Blokový prvek musí mít nastavenou pevnou šířku a levý a pravý margin na auto • Nadřazený prvek má nastavenu vlastnost text-align na center • U centrovaného prvku je většinou žádoucí nastavit text-align opět na hodnotu left (center je zděděn od nadřazeného divu)

3. Centrování blokového prvku body { text-align:center; } #Content { width:500px; margin:0pxauto; text-align:left; }

4. Box model

5. Řešení problémů s box modelem • Podmíněné vkládání souboru stylů • <!--[if IE]> <link href="styly/ie.css" rel="stylesheet" type="text/css" media="screen, projection" title=„Normální styl" /> <![endif]--> • Vkládá se až po definici normálního stylu, IE to „pochopí“, ostatní prohlížeče to ignorují jako poznámku • Matrjoška • Viz přednáška – principem je další obalový div s nastavenou šířkou (vnitřní má definován padding a border), u jednoho divu se nesmí setkat definice width s def. paddingu nebo borderu. • Hacky • Podtržítkový pro IE 6 (před název vlastnosti _ ) • Rovnítkový pro IE7 (před název vlastnosti = ) • Vždy až po definici dané vlastnosti ve správném tvaru

6. Plovoucí fotogalerie • Jednotlivé fotografie vloženy do divů stejných pevných rozměrů. • Fotografie jsou horizontálně vycentrované • Jednotlivé divy jsou od sebe odsazeny • Při změně velikosti obsahové části se divy automaticky přeskládají

7. Úkol - nebodovaný • Výchozí 3sl. layout z minulého cvičení • Definovat mu pevnou šířku a vycentrovat v rámci okna prohlížeče • Další část úkolu - nová XHTML stránka • Plovoucí fotogalerie • Stačí jediná fotografie, která se opakuje • Šířka na celou stránku, jednotlivé boxy mají barvu pozadí nebo rámec, jsou od sebe odsazeny • Při zmenšování zvětšování okna se boxy přeskupují • Validita XHTML 1.0 Strict je samozřejmá.