FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
tbartolen
Člen
Avatar
tbartolen:22.5.2016 17:58

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.5.2016 17:58
Navštiv www.fb.com/skkelticz
Avatar
Martin Štěpánek
Tvůrce
Avatar
Martin Štěpánek :23.5.2016 7:53 
<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
23.5.2016 7:53
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
tbartolen
Člen
Avatar
Odpovídá na Martin Štěpánek
tbartolen:23.5.2016 14:01

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.5.2016 14:01
Navštiv www.fb.com/skkelticz
Avatar
Martin Štěpánek
Tvůrce
Avatar
Odpovídá na tbartolen
Martin Štěpánek :23.5.2016 14:21

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

Nahoru Odpovědět
23.5.2016 14:21
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:24.5.2016 9:53

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.5.2016 9:53
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:24.5.2016 13:42

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
24.5.2016 13:42
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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.