Autor | Zpráva | ||
---|---|---|---|
André Profil * |
#1 · Zasláno: 24. 7. 2014, 03:21:56
Zdravim.
Jsem začátečník s css a mám problém se zafixováným menu na stránce dole. Potřebuju ho mít vycentrované v jakékoliv šířce prohlížeče, teď momentálně se to při změně šířky okna rozpadává. Nijak mě nenapadá, jak lépe skloubit tu fixed lištu s tím menu seznamem, ale určitě to půjde očesat a udělat chytřeji. Předem díky. Ukázka: http://kod.djpw.cz/apeb- Kód: http://kod.djpw.cz/apeb |
||
Tomáš123 Profil |
André:
„Potřebuju ho mít vycentrované v jakékoliv šířce prohlížeče, teď momentálně se to při změně šířky okna rozpadává.“ Ty síce použiješ vlastnosť text-align: center; , ale okamžite ju vynuluješ, tým, že nastavíš položkám float: left; ...Skús teda namiesto float: left; použiť display: inline/inline-block; .
Ďalší problém je v tom, že nastavuješ: a:link, a:visited { display: block; width: 120px; font-weight: bold; color: #FFFFFF; background-color: green; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } To znamená, že aj keď položke nastavíš display: inline; alebo display: inline-block; táto deklarácia to hneď prebije...Preč s ňou.
Ďalšia vec, rozmery menu nastavuješ v percentách...Menu je stále inak široké ako obsah. Nechceš nastaviť šírku 600px a margin: auto; ?
Tu je tvoja, trochu upravená, živá ukážka. Práve si vytváram svoj web...Zdalo sa mi nepochopiteľné, že položky neusporiadaného zoznamu v navigácii sú odrazu bezprostredne vedľa seba aj keď nemajú nastavený float: left; . A práve som prišiel na rozdiel medzi tvojou a mojou navigáciou: Ja v HTML neukončujem </li> .
|
||
André Profil * |
#3 · Zasláno: 24. 7. 2014, 13:06:28
Tomáš123:
Díky moc. S těmi procenty, když tam dám left: 25%; width: 50%; , tak jedině to mi tu lištu vycentruje, jinak mi to nejde. Samozřejmě bych byl radši za pevnou šířku třeba těch 600px, ale mám problém to marginem hodit doprostřed.
Aktuální kód: http://kod.djpw.cz/hpeb |
||
Tomáš123 Profil |
André:
Vyriešené, zmeny nastali v CSS v riadkoch 21, 22, 23. Mimochodom v súčasnosti má tvoj obsah šírku 700px. Je to tak preto, lebo predvolene prehliadače priratúvajú padding ku šírke. Toto nastavenie sa dá zmeniť použitím vlastnosti box-sizing spolu s prefixami alebo jednoduchšie a spoľahlivejšie takto:
<div class="obal"><!--tu nepouži padding, lebo sa priráta ku šírke--> <div class="obsah"><!--tu už môžeš padding pokojne použiť, lebo hranice určuje nadradený prvok--> . . . </div> </div> |
||
André Profil * |
#5 · Zasláno: 24. 7. 2014, 15:35:27
Tomáš123:
To je ono, díky. Koukám i s tim obalem to je lepší. Jelikož se css učím a snažím se vše okoukávat, na mé osobní stránce bych rád použil ještě poslední dvě věci, spíš estetické než vyloženě funkční. Potřebuji, aby spodní část stránky s textem třeba 50px nad menu postupně zešedla, podobně jako zde: http://i.imgur.com/KxIgf3g.png. Tuším, že se spodek textu musí obalit divem s barevným textem, ale nevim, jak to odstupňovat. Anebo ještě absolutní pozicí určitého pásu na stránce, pod kterým bude všechno odstupňované do šedé barvy, ale to by pravděpodobně obarvilo i menu, což je nežádoucí. A druhá věc, zaoblení rohů menu. Netušim, kam mám border-radius: 6px; dát, aby to fungovalo.
Aktuální kód: http://kod.djpw.cz/upeb Ukázka: http://kod.djpw.cz/upeb- Ještě jednou díky za tvůj čas. |
||
Tomáš123 Profil |
André:
„Potřebuji, aby spodní část stránky s textem třeba 50px nad menu postupně zešedla, podobně jako zde: ht>tp://i.imgur.com/KxIgf3g.png.“ To čo žiadaš je hlúposť. Prečo? Div s textom nemáš poziciovaný fixne a tak by bol pásik iba dole...Čiže želaný efekt by si aj tak nedosiahol. Ak budeš obsah poziciovať fixne, môžeš to urobiť napríklad cez absolútne napoziciovaný pásik na spodku div u, v ktorom je text, pričom by mal nastavenú opacity . Poprípade dva pásiky pričom by každý z nich mal inú hodnotu opacity .
Poprípade fixne napoziciovaný pásik s konštantnou vzdialenosťou od spodku stránky (tam sú ale iné nevýhody ako zlý výzor pri veľkom rozlíšení atď.) „A druhá věc, zaoblení rohů menu. Netušim, kam mám border-radius: 6px; dát, aby to fungovalo.“ Hotovo, nové riadky 43 a 44, overflow: hidden; preto, lebo by si musel nastaviť border-radius aj neusporiadanému zoznamu a takisto aj prvej a poslednej položke. Takto je to rýchlejšie.
|
||
André Profil * |
#7 · Zasláno: 24. 7. 2014, 17:37:17
Tomáš123:
Ok. Pro mě až moc složitý. Ale ještě jsem si všimnul, že když je stránka krátká a nerolovatelná, v případě odkazu na delší samozřejmě přibyde postranní lišta a menu i textový div poskočí. Jak se toto běžně ošetřuje s přihlédnutím k množství různých rozlišení a prohlížečů? Aktuální kód s funkčním odkazem: http://kod.djpw.cz/eqeb- |
||
Tomáš123 Profil |
#8 · Zasláno: 24. 7. 2014, 20:02:59
André:
„Jak se toto běžně ošetřuje s přihlédnutím k množství různých rozlišení a prohlížečů?“ Nemá význam zapodievať sa tým. Je to predvolené správanie prehliadačov. Ale existuje jedno riešenie: http://kod.djpw.cz/fqeb. Sleduj riadky 6, 7 a 12. |
||
André Profil * |
#9 · Zasláno: 24. 7. 2014, 21:19:17
Tomáš123:
To bohužel nefunguje, v ukázce skáče obsah a přímo u mě stejně jako předtím poskočí jak menu, tak obsah. Napadá mě se 17ti pixely pro lištu v každé stránce počítat a vystředit to až od jejího levého okraje, takže obsah stránek sice nebude dokonale vystředěný, ale zato dokonale stabilní. Jak to úvést do praxe? |
||
Tomáš123 Profil |
#10 · Zasláno: 25. 7. 2014, 10:29:21
André:
„a vystředit to až od jejího levého okraje,“ To som skúšal aj ja v [#8] príspevku...Nepodarilo sa mi pohyby stránky minimalizovať úplne, ale rozdiel je podstatne menší ako býval. Iné riešenie mi momentálne nenapadá... |
||
André Profil * |
#11 · Zasláno: 25. 7. 2014, 14:56:24
Tomáš123:
Odšťouchávače nebo JS scrollbar jsou asi trochu náročnější na zrealizování, už jsem to pořešil jinak a pěkně to všechno drží. html {overflow-y: scroll;} |
||
Časová prodleva: 10 let
|
0