Diskuze: Vycentrování menu

tbartolen

Člen

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

Jan Lupčík

Tvůrce

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ář

Honza Bittner

Tvůrce

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.

tbartolen

Člen

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 18.7.2015 11:13

Nahoru Odpovědět

18.7.2015 11:11

Navštiv www.fb.com/skkelticz

tbartolen

Člen

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

Jan Lupčík

Tvůrce

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ář

tbartolen

Člen

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

Tonda Kozák

Člen

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č

Nahoru Odpovědět

18.7.2015 14:00

tbartolen

Člen

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

Honza Bittner

Tvůrce

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.

tbartolen

Člen

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

tbartolen

Člen

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

Honza Bittner

Tvůrce

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.

Tonda Kozák

Člen

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

tbartolen

Člen

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

Honza Bittner

Tvůrce

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.

tbartolen

Člen

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 19.7.2015 18:45

Nahoru Odpovědět

19.7.2015 18:44

Navštiv www.fb.com/skkelticz

tbartolen

Člen

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

Honza Bittner

Tvůrce

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.

Nejčastěji vyhledáváné

Diskuze: Vycentrování menu