| Autor | Zpráva | ||
|---|---|---|---|
| qteck Profil |
#1 · Zasláno: 7. 3. 2015, 11:36:35 · Upravil/a: qteck
ahoj,
změnil jsem px na procenta a web se mi posunul do leva #container{width: 89.4%;margin: 20px auto 40px auto;} s 950pxto šlape nastředu. http://evelinka.kerouac.cz/ Díky, možná by měla stránka mít šířku v obsolutních hodnotách body{width: 1024px}? apodle toho potom vymýšlet ty procenta? díky. |
||
| Tomáš123 Profil |
#2 · Zasláno: 7. 3. 2015, 18:01:38
qteck:
S použitím percentuálnych hodnôt sa stránka vystreďuje rovnako, ako v iných prípadoch. Tvoj problém spočíva v tom, že aj keď #containeru nastavíš percentuálnu šírku, nijak neovplyvňuješ prvky v vnútri, ktoré aj tak plávajú vľavo.
Riešenie: Pravému stĺpcu nastav float: right a šírku vnútorných stĺpcov tiež nastav v percentách.
Obecne ale nie je použitie percent najlepší nápad. Keď stránku priblížiš, obsah sa nebude mať kde podieť a rozsype sa ti layout. Oznamovacie vety končia bodkou "." (bez medzery). |
||
| Trejpa Profil |
#3 · Zasláno: 7. 3. 2015, 18:24:07
qteck:
„změnil jsem px na procenta a web se mi posunul do leva“ Neposunul, blok #container je opravdu na středu. Ale jeho obsah jsi na procenta nezměnil, takže 720 px široký #article a 198 px široký ul uvnitř #menu jsou uprostřed jen při šířce okna přesně 1027 px, na jiné šířce se dle svého floatu řadí zleva. Takže i těmto vnitřním musíš nastavit šířku (i vodorovný padding) v procentech. Ale doporučuji nastavovat plovoucím elementům jen šířku a padding nechat zanořenějším blokům (do #article přidat jeden kvůli odsazení), lépe se to počítá do 100 % a bez problémů jde na #container použít i max-width a min-width, aby nebyl obsah příliš široký nebo úzký.
#container { margin: 20px auto 40px; width: 89.4%; max-width: 120ex; min-width: 640px; }
#article { float: left; width: 74%; padding: 0; }
#article2 { padding: 0 8% 20px; border: 1px solid #cbccdd; border-radius: 12px; }
#menu { float: left; width: 25%; padding: 0; }
#menu ul /* případně #menu ul li */ { padding: 10px 5%; /* nebo jinak */ }
#footer { clear: both; padding-top: 12px; width: 100%; } |
||
|
Časová prodleva: 10 let
|
|||
0