HTML škola – časť druhá

Brat celkom úspešne zvládol prvú lekciu a tak je načase vydať druhé o niečo zložitejšie zadanie. Ale ešte predtým si zopakujeme to čo sme sa naučili v prvej lekcii.

  • padding používajte len vtedy ak chcetie niečo oddeliť (vzdialiť?) od vnútornej hrany (vo vnútri) elementu. Napríklad <div>. Avšak nezabúdajte, že padding sa prirátava k celkovej výške a šírke elementu. Čiže keď elementu nastavíte width: 100px; height: 100px; padding: 10px; tak výsledná šírka a výška bude 120px (priráta sa padding z každej strany)
  • margin používajte keď chcete nastaviť vzialenosť elementu od ostatných elementov (vonkajšia strana).
  • Čiže ešte raz, keďže opakovanie je matka múdrosti: pozrite si CSS box model.

Nové zadanie

Upravte web z predošlej verzie, podľa nového zadania.

Súbory na stiahnutie:

Nápoveda

  • Pre umiestnenie loga, nadpisu a aj podnadpisu v hlavičke kľudne použite CSS positioning. Hlavičku si dajte ako position: relative; a elementy v nej ako position: absolute;
  • Vo vnútri obsahu použite tri elementy. <h2> pre nadpis a <div> pre jeden aj druhý stĺpec. Samozrejme vo vnútri divov budete mať odstavce cez <p>.
  • Logo v návrhu je vložené ako samostatná vrstva. Vystrihnite si ho ako celú vrstvu a tak ho aj použite. Uľahčíte si tak vyrátanie jeho pozície. V photoshope, alebo gimpe si totiž môžete zmerať vzdialenosť hrany vrstvy loga od hlavičky…
  • A pre zopakovanie: Nie je Vám niečo zo zadania jasné ? Neviete si s niečim poradiť ? Tak sa pýtajte!

Deadline: 7 dní

Jeden komentár k “HTML škola – časť druhá”

  1. Len pre info: Ide to zatial o dost pomalsie ako som planoval a tyzdenny cyklus nehrozi, kedze brat nestiha a nemame moznost sa pravidelne osobne stretnut… Ale zatial (asi) nekoncime ;)

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *