| Autor | Zpráva | ||
|---|---|---|---|
| santa01 Profil * |
#1 · Zasláno: 3. 4. 2012, 21:04:43
Ahoj, potřeboval bych osvětlit jednu situaci ...
jsem začátečník a chtěl bych pochopit jak můžu pomocí html a css pozicovat různé elementy. Tím myslím, že když udělám menu, které ukotvím vlevo a tak jak můžu jednoduše zbytek elementů dát vedle toho, aniž bych musel v css souboru upravovat například margin: -150px 0 0 160px; a pod? Díky za odpovědi |
||
| Trejpa Profil |
#2 · Zasláno: 3. 4. 2012, 21:22:02
santa01:
Menu se vlevo dává obvykle pomocí plavání. Jemu i obsahové části se nastaví šířka. Za oba plovoucí prvky se dá ukončení plavání (třeba patičkou). Vše je obaleno ve vystředěném bloku s rozměrem. Tak jako v mém příkladu. Můžeš nechat plavat jen menu, ale potom bude po skončení menu neplovoucí zbytek (obsah) zalézat pod něj. Proto se v takovém případě používá pro obsah levý margin, který zastrčený obsah vytlačí tak, aby nebyl plovoucím menu vůbec ovlivněn. Další možností je využití absolutního pozicování, to ale (hlavně začátečníkům) nedoporučuji. |
||
| santa01 Profil * |
#3 · Zasláno: 3. 4. 2012, 21:33:20
Dobře, když mám tyto plovoucí prvky, jak jim můžu nastavit takovou šířku, aby dosahovala okraje okna? Protože každý má jiné rozlišení obrazovky, to samé aby dosahovalo stejné výšky. Je to možné? Díky
|
||
| Trejpa Profil |
#4 · Zasláno: 3. 4. 2012, 21:55:31
santa01:
Ano. Můžeš vycházet ze 100% šířky okna a zadat jim rozměry šířky v procentech, třeba 20 a 79% (kvůli chybám v zaokrouhlování nepoužívám celý součet 100 %). Pokud bys chtěl třeba pevný rozměr menu a zbytek se přizpůsobující volnému místu, tak využiješ druhou variantu plavání s marginem [#2]. Narazíš ale na problém, že texty se při velmi široké stránce špatně čtou (od zhruba 80 znaků na řádek není jednoduché při čtení navázat na další). Proto vznikají taková rozvržení, která jsou v určitém rozmezí natahovací podle šířky okna, ale mají nastavenu i minimální a maximální šířku. Příkladem může být stránka seznamu. Zjednodušeně: <!DOCTYPE HTML> <div style="margin: 0 auto; width: 90%; min-width: 60ex; max-width: 120ex;"> <h1>Nadpis</h1> <div style="float: left; width: 20%;">menu</div> <div style="float: left; width: 79%;">obsah</div> <div style="clear: left;">patička</div> </div> |
||
| santa01 Profil * |
#5 · Zasláno: 3. 4. 2012, 22:01:00 · Upravil/a: santa01
<div style="clear: left;">patička</div> Co znamená v uvedeném příkladu clear? Mimochodem - to float mi nefunguje :/ ... i když dám za menu float: left - stále je to za tím ... |
||
| pidusak Profil |
#6 · Zasláno: 3. 4. 2012, 22:14:55
|
||
| Trejpa Profil |
#7 · Zasláno: 3. 4. 2012, 23:10:58
santa01:
„i když dám za menu float: left - stále je to za tím ...“ Co ti nefunguje? Má menu float? Má obsah float? Má menu a obsah nastavenou šířku? Je celková nastavená šířka menu a obsahu menší než obalující blok? Nezvětšuješ si šířku menu nebo obsahu pomocí paddingu, marginu nebo border-width? Lepší bude, když ukážeš živou ukázku svého snažení. V ní se hledají chyby rychleji než na teoretické úrovni bez špetky kódu. |
||
| santa01 Profil * |
#8 · Zasláno: 4. 4. 2012, 07:14:13
Aha! Float musí mít i element před tím ... jinak to nefunguje, mockrát děkuju, už to jde :)
|
||
|
Časová prodleva: 12 let
|
|||
0