Diskuze: Vycentrování menu

HTML a CSS HTML a CSS Vycentrování menu American English version English version

Avatar
tbartolen
Člen
Avatar
tbartolen:

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
IT Man
Redaktor
Avatar
Odpovídá na tbartolen
IT Man:

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

Nahoru Odpovědět  +1 18.7.2015 7:56
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na tbartolen
Honza Bittner:

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  +3 18.7.2015 8:56
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:

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
Avatar
tbartolen
Člen
Avatar
tbartolen:

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
IT Man
Redaktor
Avatar
Odpovídá na tbartolen
IT Man:

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  +1 18.7.2015 11:29
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
tbartolen
Člen
Avatar
Odpovídá na IT Man
tbartolen:

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:

(Pokud chceš vycentrovat celé menu)

Buď můžeš udělat to, co radil IT Man, 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í
+1 bodů
Řešení problému
 
Nahoru Odpovědět 18.7.2015 14:00
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tonda Kozák
tbartolen:

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
Redaktor
Avatar
Odpovídá na tbartolen
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:

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:

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
Redaktor
Avatar
Odpovídá na tbartolen
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na tbartolen
Tonda Kozák:

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:

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
Redaktor
Avatar
Odpovídá na tbartolen
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:

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
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:

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
Redaktor
Avatar
Odpovídá na tbartolen
Honza Bittner:

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
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 19 zpráv z 19.