CSS – menu vlevo Mgr. Lenka Švancarová

CSS – menu vlevo

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.

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 %.

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

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; }

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; }

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; }

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; }

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%; }

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; }