Avatar
tbartolen
Člen
Avatar
tbartolen:

Jak upravit navigační lištu tak, aby se položky zobrazovali v jednom řádku a nepřetékali do druhého v závislosti na velikosti displeje? Nejspíš si budu muset nějak pohrát s velikostí fontu..media queries? NEbo jinak?
Díky!

Odpovědět 22. května 17:58
Navštiv www.fb.com/skkelticz
Avatar
Martin Štěpánek (Enormyk):
<nav>
    <ul>
        <li><a href="#">Domů</a></li>
        <li><a href="#">Články</a></li>
        <li><a href="#">Fotogalerie</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>
nav ul{
    margin: 0;
    padding: 0;
}

nav ul li{
    list-style-type: none;
    display: inline-block;
    padding: 10px 10px;
}

nav ul li a{
    display: block;
}

Takhle ti zůstane na jednom řádku, co nejvíce položek a ty, co se nevejdou se zalomí. Zmenšovat písmo podle velikosti displeje je nesmysl. Čím menší zařízení, tím větší by písmo a odkazy měli být větší kvůli čitelnosti a ovladatelnosti. Pokud by jsi to, ale vážně potřeboval, což já ti rozhodně nedoporučuji:

@media all and (min-width: 100px){
nav{
font-size: 5px;
}
}

@media all and (min-width: 400px){
nav{
font-size: 10px;
}
}

A tak dále dokud nebude velikost písma normální. Přímo ty velikosti si uprav podle počtu položek v menu.

Nahoru Odpovědět  +1 23. května 7:53
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
tbartolen:

No jasně, takže tomu zalamování nezabráním jinak, než tím nastaveím velikosti písma pro každou velikost zvlášť...?

Nahoru Odpovědět 23. května 14:01
Navštiv www.fb.com/skkelticz
Avatar
Odpovídá na tbartolen
Martin Štěpánek (Enormyk):

Popřípadě nastavení šířky nav ul li (width), ale to už si musíš vyladit podle počtu prvků.

Nahoru Odpovědět 23. května 14:21
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:

To je veľmi nedynamické riešenie. Ak nechceš riešiť zalamovanie, nemal by si robiť responzívny web.

Čo sa týka zmeny veľkosti písma, je to určite nevhodné. To si rovno môžeš nahrať na server obrázok.

Chytrejšie je v závislosti na veľkosti písma upravovať ostatné prvky. 1em je nastavená veľkosť písma (font-size). V @media deklarácii ide túto jednotku použiť: @media (max-width: 30em).

Keďže hodnota jednotky em sa môže meniť a vo vnútri dokumentu môže nastať potreba použiť pôvodnú veľkosť písma (veľkosť nastavenú pre koreňový element), existuje jednotka rem.

Celé sa to hodí na to, aby sa web nerozpadol, keď si užívateľ na mobilnom zariadení manuálne zväčší písmo (ale písmo sa zväčšuje aj na stolových zariadeniach a keďže Explorer neumožňuje užívateľom v pixeloch nastavenú veľkosť písma zväčšiť, bolo by lepšie sa jej na tieto účely vyhnúť).

Neviem ako je to naprieč prehliadačmi, ale 1em by malo byť 16 (zväčšiteľných) pixelov.

http://djpw.cz/138070

Nahoru Odpovědět 24. května 9:53
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na tbartolen
Honza Bittner:

Docela parádní je řešení s flexboxem, ale záleží na tvé požadované funkcionalitě. Flexbox ti dokáže přizpůsobovat položky v menu tak, aby se tam vždy vešly, ale při malé šířce se to bude buď zalamovat, nebo vytékat text.

Ale mohl bys také jednoduše např. změnit text položky za ikonku.

Nahoru Odpovědět  +1 24. května 13:42
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.