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í
Pridaj komentár