Opakování a pozicování

Opakování základních znalostí HTML a CSS a vlastnost position.

Cvičení: CSS position

1

Stáhněte si připravenou stránku. V kočičím domečku máte připravené kočičky, které budeme pozicovat. Podívejte se na výsledný obrázek.

Kocici domecek result

Každá z pěti kočiček si musí najít svoje místo.

  • Kočička s dopisy v levém dolním rohu,
  • kočička s motýlem přesně uprostřed domečku,
  • kočička s knihou sedí tak, že na levém horním rohu je přesně její střed (vyčuhuje z domečku),
  • kočka se sluchátky tančí přesně 30px od horního a 30px od pravého okraje
  • kočka s myší spí v pravém dolním rohu.

V souboru style.css je také přímo u daných tříd návod. Na počítání některých vzdáleností se bude hodit použití funkce calc.

2

Okno

pohodička

Stáhněte si webovou stránku,

  • Posuňte vyskakovací okno 200px od levého okraje stránky. Zamyslete se, v čem bude rozdíl, když na to použijete position nebo position: relative.
  • Tlačítka "Ok" a "X" posuňte na vhodnější místa. Tedy "Ok" dolů přibližně doprostřed (nemusí být přesně), "X" doprava nahoru. Napozicujte je vůči modálu, ve kterém se nacházejí.

Bonus

  • Přidejte na stránku mnohem více textu, tak, aby se stránkou dalo posouvat dolů (scroll). Můžete na to použít odstavce p plné textu s lorem ipsum.

  • Nápověda: Lorem ipsum text se generuje pomocí slova lorem následovaného číslovkou (bez mezery), pak stačí zmáčknout Tab. Tedy třeba lorem5+Tab

  • Přidejte na stránku další boxík, kde nabízíte uživatelům pomoc, pokud se ocitnou v nesnázích. Vhodně ho ostylujte.

  • Pomocí vhodného použití vlastnosti position zajistěte, aby tento boxík byl vidět nezávisle na tom, jak daleko je stránka posunuta.