Pozicování pomocí CSS
- Stáhněte si atlas květin k sobě na počítač (pravý klik → uložit odkaz jako).
- Stránka je vyřezaná z přehledu jedovatých rostlin na kvetenacr.cz, ale asi vám nijak nepomůže, že to víte.
- Ve stejné složce si vytvořte prázdný soubor s koncovkou
.css a v hlavičce stránky přepište tag <link rel='stylesheet' href='mujstyl.css'> tak, aby místo mujstyl.css odkazoval na váš soubor.
- Tenhle soubor budete odevzdávat. Kdybyste chtěli měnit taky samotnou HTML stránku, můžete, ale já na to nebudu brát ohled.
- Abyste vyzkoušeli, že to funguje, nastavte celé stránce libovolnou barvu pozadí.
- Změňte font na libovolný bezpatkový (nejsnáze pravidlem
font-family: sans-serif, ale zrovna tak můžete použít Google Fonts podle návodu z dřívějška)
- Celé stránce nastavte omezenou šířku (menší než šířka vaší obrazovky).
- Nastavte formátování sloupců
<div class='levy-sloupec'> a <div class='pravy-sloupec'>:
- každý ze sloupců by měl mít omezenou šířku (a levý asi bude užší),
- pravý sloupec má začínat horním okrajem stejně jako ten levý, a má být umístěný vpravo od něj. To zařídíte pravidly
position: absolute, top: 0 a vhodným nastavením pravidla left,
- jestli jste někam posouvali celý prvek
<body>, tak jemu nastavte position: relative, aby se vám to celé nerozsypalo.
- Prvku
<div id='smartsupp-widget-button'> nastavte formátování:
- umistěte ho napevno do pravého dolního rohu stránky (pravidlem
position: fixed),
- nastavte mu výraznou barvu na pozadí a barvu textu,
- nastavte, aby se barva na pozadí změnila při přejetí myší (
:hover),
- (nepovinné) můžete nastavit, aby text byl vlevo od ikony, a můžete použít pravidlo
border-radius pro zaoblené okraje.
- Prvku
<h2 class='horni-titulek'> nastavte pozici tak, aby při listování dolů stránkou zůstal přichycený na horním okraji (pravidlem position: sticky).
- Kromě toho potřebuje použít pravidlo
top: 0, aby bylo kam prvek přichytávat,
- aby to bylo ke čtení, asi mu chcete taky nastavit barvu na pozadí,
- (nepovinné) můžete se inspirovat původní stránkou a nastavit velká písmena pravidlem
text-transform.
- Blokům
<div class='titulniobal'> s jednotlivými rostlinami nastavte pěkné formátování:
- čáru na okraji jako rámeček,
- pevnou šířku (zhruba přiměřenou obrázkům),
- zobrazení vedle sebe (
display: inline-block),
- vnitřní odsazení od okraje (
padding),
- rozestupy mezi sebou (
margin),
- můžete upravit barvu na pozadí a písmo.
- Nastavte, aby se ikona s varováním kreslila v pravém horním rohu u každé rostliny:
- bloku
<div class='titulniobal'> nastavte position: relative, aby mohl sloužit pro rozmisťování prvků uvnitř,
- obrázku
<img class='varovani'> nastavte position: absolute, abyste ho mohli libovolně umístit,
- obrázku s varováním pak nastavte vlastnosti
left, top, right a/nebo bottom, abyste ho dostali do pravého horního rohu.
- Nastavte formátování názvu rostliny:
- zařiďte, aby byl celý až pod obrázkem (nejlépe použitím pravidla
display: block) a
- vypněte mu podtržení (
text-decoration). Aby to fungovalo, musíte tohle pravidlo vztáhnout na prvek <a>, ale:
- odkazy v levém sloupci by pořád měly zůstat podtržené.
- (nepovinný bonus): na konec názvu rostliny automaticky vložte nějaké roztomilé emoji pravidlem
content aplikovaným na pseudoprvek ::after.