NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
tbartolen
Člen
Avatar
tbartolen:18.7.2015 7:45

Ahoj, mám takový problém, udělal jsem si stránku, a nyní jsem začal s dolaďováním detailů. Zjistil jsem, že menu nemám vycentrované, a nevím proč, protože mam definovano text-align: center...
Kód

<nav>
                        <ul>
                                <li class="active"><a href="#">Kdo jsme</a></li>
                                <li><a href="#">Kde nás najdete</a></li>
                                <li><a href="#">Věkové kategorie</a></li>
                                <li><a href="#">Kontaktní údaje</a></li>
                                <li><a href="#">Kontkatní formulář</a></li>
                        </ul>

a css

nav ul {
        list-style: none;
        margin: 0;
        padding-left: 50px;
}

nav ul li {
        float:left;
        /*border: 1px solid #000000;*/
        width: 15%;
}

nav ul li a {
        /*background: #0057b8;*/
        display: block;
        padding: 5% 12%;
        font-weight: bold;
        font-size: 13px;
        color: #0057b8;
        text-decoration: none;
        text-align: center;
        width: 100%
}

nav ul li a:hover, nav ul li.active a {
        /*background-color: #000000;*/
        color: #000000;
}

díky za radu

Odpovědět
18.7.2015 7:45
Navštiv www.fb.com/skkelticz
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na tbartolen
Jan Lupčík:18.7.2015 7:56

Zkus přidat elementu ul text-align na hodnotu center.

Nahoru Odpovědět
18.7.2015 7:56
TruckersMP vývojář
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:18.7.2015 8:56

Ty máš blok nav, který má v sobě blok ul, který má v sobě položky a každá položka má v sobě odkaz.

Tím logicky plyne, že pokud přidáš text-align: center; na odkaz, nemůže se ti vycentrovat celé menu.

Ono vycentrovat položky není až taková prča, ale pokud dáš na seznam, tedy element ul, text-align: center, mělo by ti to fungovat. Pokud však budeš mít nějakou složitější strukturu, budeš chtít mít v menu i nějaké loga a další věci, centrování ti pravděpodobně až tak dobře fungovat nebude a dělají se proto tzv. hacky.

Koukni třeba sem, jak jsem to udělal já http://www.itnetwork.cz/…aktivni-menu.

Nejlepší možností na centrování a všeobecně rozmisťování všeho na stránce je Flexbox, který má však tuto podporu http://caniuse.com/#….

Nahoru Odpovědět
18.7.2015 8:56
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:18.7.2015 11:11

Přidání argumentu do nav ul právě nefunguje....takže mám napsat flexbox-align: center, nebo musím udělat nějaký div kvuli tomu? Nešlo by to nějak přes wrapper?

Takhle, ono to teoreticky vycentrované je, ale ne pořádně, podle mě hraje roli jen ten řádek

padding-left: 50px;

A proto to mam jemně do středu posunuté, mohl bych to asi posunout do středu víc, ale jakmile se změní velikost obrazovky, tak to bude zase špatně při takovým řešení...

Editováno
Nahoru Odpovědět
18.7.2015 11:11
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:18.7.2015 11:16

Přidám obrázek pro uplnost aby bylo jasné o co jde, už mi vypršel čas. limit pro editaci zprávy

Nahoru Odpovědět
18.7.2015 11:16
Navštiv www.fb.com/skkelticz
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na tbartolen
Jan Lupčík:18.7.2015 11:29

Pokud chceš vycentrovat menu a ne jenom text, mohl by jsi elementu nav přidat margin:auto; a ten padding odebrat.

Nahoru Odpovědět
18.7.2015 11:29
TruckersMP vývojář
Avatar
tbartolen
Člen
Avatar
Odpovídá na Jan Lupčík
tbartolen:18.7.2015 11:36

Taky nic, přemýšlím, že tam asi budu mít někde nějakou věc jinde, co mi to nějakým způsobem blokuje. NEmuže to být tim, že používám wrapper a mediaqueries na strance?

Nahoru Odpovědět
18.7.2015 11:36
Navštiv www.fb.com/skkelticz
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na tbartolen
Tonda Kozák:18.7.2015 14:00

(Pokud chceš vycentrovat celé menu)

Buď můžeš udělat to, co radil Jan Lupčík, ale musíš ještě omezit šířku nav.

Nebo můžeš zrušit floatování u ** li** a nastavit jim display: inline-block a potom nastavit ul text-align: center

Každopádně doporučuju nezadávat u odkazu width: 100% (Když máš nastaven display: block, tak se to automaticky roztáhne na celou šířku, takhle se ti ale k tomu ještě připočítává ten padding, takže ve výsledku je odkaz širší než li.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
18.7.2015 14:00
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tonda Kozák
tbartolen:18.7.2015 14:10

Paráda, tohle funguje, přiložim hotový řešení, kdyby třeba někdo další řešil podobný problém

nav ul {
        list-style: none;
        margin: 0;
        /*padding-left: 50px;*/
        text-align: center;
}

nav ul li {
        /*float:left;*/
        /*border: 1px solid #000000;*/
        width: 15%;
        display: inline-block;
}

nav ul li a {
        /*background: #0057b8;*/
        display: block;
        padding: 5% 12%;
        font-weight: bold;
        font-size: 13px;
        color: #0057b8;
        text-decoration: none;
        text-align: center;
        width: 100%
}

nav ul li a:hover, nav ul li.active a {
        /*background-color: #000000;*/
        color: #000000;
}
Nahoru Odpovědět
18.7.2015 14:10
Navštiv www.fb.com/skkelticz
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:18.7.2015 18:03

Proč máš šířku li pevně danou? Udělej to tak, ať se to automaticky přizpůsobí obsahu.

Nahoru Odpovědět
18.7.2015 18:03
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:18.7.2015 18:26

Takhle?

nav ul {
        list-style: none;
        margin: 0%;
        /*padding-left: 50px;*/
        text-align: center;
}

nav ul li {
        /*float:left;*/
        border: 1px solid #000000;
        width: auto;
        display: inline-block;
        margin: 1%;

}

nav ul li a {
        /*background: #0057b8;*/
        display: block;
        padding: 0% 0% 0% 0%;
        font-weight: bold;
        font-size: 13px;
        color: #0057b8;
        text-decoration: none;
        text-align: center;
        width: auto;
}

nav ul li a:hover, nav ul li.active a {
        /*background-color: #000000;*/
        color: #000000;
}
Nahoru Odpovědět
18.7.2015 18:26
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:18.7.2015 18:39

Tak už vím proč, pokud to udělám aby se to dělal automaticky, tak přestane fungovat hover :-(

Nahoru Odpovědět
18.7.2015 18:39
Navštiv www.fb.com/skkelticz
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:18.7.2015 20:48

Hned nahoře jsem ti posílal ukázku, jak to funguje fajn. http://www.itnetwork.cz/…aktivni-menu
Zkus se na to konečně podívat. :)

Nahoru Odpovědět
18.7.2015 20:48
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na tbartolen
Tonda Kozák:18.7.2015 21:35

Skutečně?
Mně hover s tvým kódem funguje normálně.

http://kod.djpw.cz/ziob

 
Nahoru Odpovědět
18.7.2015 21:35
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:19.7.2015 0:06

Tak to je divný....ráno se na to podívám a asi to menu předělám podle Honzy, ale neumím Javascript...takže nevím jak to bude fungovat :-/

Nahoru Odpovědět
19.7.2015 0:06
Navštiv www.fb.com/skkelticz
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:19.7.2015 1:53

Na to JS potřebovat umět nemusíš. Jde tam o tu první část, kde se vytváří menu jen čistě v HTML a CSS.

Nahoru Odpovědět
19.7.2015 1:53
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:19.7.2015 18:44

Udělal jsem to teda podobně jako ty (Vzásadě jsem to zkopíroval, a vymazal věci, které se mi tam nehodí, a ještě to budu muset vycentrovat) ...ale co nechápu je, že se mi pod textem udělala čára, která není nikde definovaná...když se kouknu do kódu v prohlížeci, vypisuje mi to tohle :

a:-webkit-any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;

Což v mym stylesheetu neni a nevím jak se to bere v kódu v prohlížeci...O_o jinak kod meho menu po upravě:

#menu {
        width: 100%;
        height: 50px;
        top:0;
        left:0;
}

nav {
        width: 100%;
        height:50px;
        margin: 0px auto;

        /*z-index: 100;*/
        position: relative;
}

nav ul {

        float:left;
        position: relative;
}

nav ul li a {
        padding: 0px 15px;
        color: #0057b8;
        display: inline-block;
        font-size: 22px;
        line-height: 50px;

}

nav ul li:hover, nav > ul > li.active {
        border-bottom: 1px solid #0057b8;
}

P.S zadal jsem u a text decoration none a čáry jsou pryč, ale pořád nevím jak se tam vyčarovali

Editováno
Nahoru Odpovědět
19.7.2015 18:44
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:19.7.2015 19:08

Ještě jedna otázka, co bych měl upravit proto, aby mi to povolilo větší fontsize než 15px, aniž by se víceslovný názvy zobrazovali pod sebe, místo do řádku?

Po dalších upravach vypadá moje menu nějak takhle, než začnu stylovat stíny a tak

nav {
        width: 100%;
        margin: 0px auto;
        z-index: 100;
        position: relative;
}

nav ul {

        float:left;
        position: relative;
        text-align: center;
        width: 100%;
}
nav ul li {
        /*float:left;*/
        /*border: 1px solid #000000;*/
        width: 15%;
        display: inline-block;
        /*margin: 1%;*/

}

nav ul li a {
        padding: 0px 15px;
        color: #0057b8;
        display: inline-block;
        font-size:15px;
        text-decoration: none;

}
Nahoru Odpovědět
19.7.2015 19:08
Navštiv www.fb.com/skkelticz
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:19.7.2015 20:17

Každý prohlížeč má svou sadu stylů pro každý element. Ta "čára", přesněji možná podtržení, je u odkazů defaultní.

Protože tam máš pořád tu width: 15%; (což tam já určitě nemám) a právě to ti boří ty víceslovné, nebo dlouhé, názvy.

Nahoru Odpovědět
19.7.2015 20:17
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 19 zpráv z 19.