CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.

Prezentace na téma: "CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo."— Transkript prezentace:

1 CSS – menu vlevo Mgr. Lenka Švancarová

2 CSS – menu vlevo

3 Na základě informací dále vytvoř svoje osobní stránky, které budou mít alespoň tři podstránky. Na všech podstránkách bude vlevo menu (viz obrázek na předchozím snímku). Stránky budou zarovnány na střed.  Varianta 1 bude mít pevnou šířku obou sloupců.  Varianta 2 bude mít pevnou šířku menu a zbytek se bude přizpůsobovat šířce okna prohlížeče.  Varianta 3 se bude přizpůsobovat šířce okna prohlížeče.

4 CSS – menu vlevo Na stránce použijeme třikrát div s id.  První nám vyčlení menu.  Druhý nám vyčlení místo pro informace.  Pomocí třetího dáme stránku na střed. Pokud u definice příslušného id zadáme šířku prvku, tak  u pevné šířky použijeme jednotku px a  u proměnlivé šířky %.

5 CSS – menu vlevo (index.html) Já Zájmy Osobní stránky Lorem Ipsum

6 CSS – menu vlevo (varianta1.css) #menu { background-color: yellow; position: absolute; top: 10px; left: 0px; width: 190px; } #telo { background-color: #92A7BE; position: absolute; top: 10px; left: 200px; width: 760px; }

7 CSS – menu vlevo (varianta1.css) Šířka obalu 960px = 200px + 760px Vlastnost margin s hodnotou auto vytvoří vlevo i vpravo stejný okraj. Ne všechny prohlížeče to umí správně, a proto je ještě použit text-align. body { text-align: center; } #obal{ position: relative; margin: auto; width: 960px; text-align: left; }

8 CSS – menu vlevo (varianta2.css) #menu { background-color: yellow; position: absolute; top: 10px; left: 0px; width: 190px; } #telo { background-color: #92A7BE; position: absolute; top: 10px; left: 200px; width: 760px; }

9 CSS – menu vlevo (varianta2.css) Šířka obalu je 90 procent z šířky okna prohlížeče. Šířka těla se mění, a proto není uvedena.  Šířka těla = Šířka obalu - 200px (posun těla) body { text-align: center; } #obal{ position: relative; margin: auto; width: 90%; text-align: left; }

10 CSS – menu vlevo (varianta3.css) #menu { background-color: yellow; position: absolute; top: 10px; left: 0px; width: 24%; } #telo { background-color: #92A7BE; position: absolute; top: 10px; left: 25%; width: 75%; }

11 CSS – menu vlevo (varianta3.css) Obal je stejný jako u předchozí varianty. Mezi menu a tělem je mezera 1 procento z šířky obalu (posun těla /25%/ - šířka menu /24%/). Šířky se počítají dle aktuální šířky okna prohlížeče. body { text-align: center; } #obal{ position: relative; margin: auto; width: 90%; text-align: left; }