P6 - div

Vrstva - div - slouží k rozdělení stránky - pevné absolutní pozicování

 <!-- vrstva hlavicka --> 

<style="position: absolute; width: 800px; height: 60px; z-index: 1; left: 5px; top: 10px" id="vrstva1hlavicka">

Hlavička - sem lze dát nějaké logo,...

</div>

Význam atributů pro DIV - absolutní pozice vzhledem k levému hornímu rohu stránky

<!-- Hlavička -->   

<div style='position: absolute;           <!--        ZAPOZICUJ         -->                                          ; id='hlavicka'>

<a href='ves.html' target='hlavni'><img src='obr/panorama.jpg' title='O vsi Lhota'align='center'>

 </a>

 </div>

<!-- Aktuality -->   

<div style='position: absolute;             <!--       ZAPOZICUJ            -->                                       ; id='aktuality'>

  <p> Začala houbařská sezóna<br />

  </p>

  <p>aktualita 2<br />

   </p>

</div> 

 <!--Obsah -->

<div style='position: absolute;           <!--      ZAPOZICUJ      -->                                              id='obsah'>

 <H1>Rok na vsi</h1>

 <table align='center' border=3>

 <tr><td class='menu'><a href = 'rok/jaro.html' target='hlavni'>Jaro</a></td>

<!-- PŘIDEJ 3 BUŇKY S ODKAZY - TARGET='HLAVNI' JE NASMĚRUJE DO IFRAME, KTERÝ MÁ JMÉNO hlavni-->

 </tr>

 </table><br><p></p>

<iframe name='hlavni' src='ves.html' height='590px' width='955px';>

        </iframe>

  </div>

šířky a výšky div jsou propočítané s ohledem na top, left a také hodnoty margin a padding v css a je nutné počítat i s šířkou ohraničení divu.

• musíme vytvořit soubor, který bude po načtení stránky index.html jako první v iframe hlavni ->ves.html a zastylovat ho stejným stylopisem (vy si jej stáhněte, uložte do složky p6-div a zastylujte)

• do divu aktuality vložte obrázky (grafika k webu je ke stažení) obr1.jpg a obr2.jpg, které budou třídy akt (zastylovaná v css) a budou odkazy na soubory akt1.html a akt2.html, které uložíte do složky aktuality a po kliknutí se zobrazí v iframe hlavni.