Autor Zpráva
André
Profil *
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 *
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 *
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: http://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 divu, 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 *
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
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 *
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
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 *
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;}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: