NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Jak vycentrovat NAV na střed

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:31.7.2017 11:41

Ahoj,
potřeboval bych pomoct s vycentrování navu na střed. Zkoušel jsem několik návodů, ale nešlo mi to.
Neví někdo jak se to dá udělat?

Děkuji za rady.

 
Odpovědět
31.7.2017 11:41
Avatar
jakubho
Člen
Avatar
Odpovídá na Vojta Korduliak
jakubho:31.7.2017 12:03

Upřímně, navigace ve smyslu proužku nahoře na stránce mi vždycky dělala problém, ale pokusím se poradit. Zkus to udělat přes margin:auto; . Ale jelikož nevím, jak přesně to tam máš nemůžu to ani odzkoušet, příště by jsi sem mohl dát tvůj kód, pro ostatní je to vždycky takové lepší :)

Nahoru Odpovědět
31.7.2017 12:03
Chyba-Jediná jistota v životě programátora.
Avatar
Ondřej Pech
Člen
Avatar
Ondřej Pech:31.7.2017 12:04

Nevím sice konkrétně tvoje řešení. Ale zkus dát elementu nějakou řířku a pak nastavit margin
např.

nav {
width: 80%;
margin: 0 auto;
}
 
Nahoru Odpovědět
31.7.2017 12:04
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:31.7.2017 12:06

Toť můj zdroják. margin: 0 auto; jsem už zkoušel..

nav ul {
    background-color: rgb(38,35,32);
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 35px;
}

nav li {
     float: left;
    line-height: 0.3em;
}

nav li a {
   display: block;
    color: #E7E7E7;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Century;

}

nav li a:hover {
    transition: 0.4s;
    height: 30px;
    background-color: #2F79B2;
}
 
Nahoru Odpovědět
31.7.2017 12:06
Avatar
David Hynek
Tvůrce
Avatar
Odpovídá na Vojta Korduliak
David Hynek:31.7.2017 12:14

Ahoj. Rodičovskému prvku musíš dát 100 % šířku. Třeba body. Width u NAV pak neví, kolik zbývá do 100 %, aby to mohlo rozdělit.

tedy nějak tak:

body {width: 100%;}
nav {width: 80%; margin: 0 auto;}
Editováno 31.7.2017 12:16
Nahoru Odpovědět
31.7.2017 12:14
Čím víc vím, tím víc věcí nevím.
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:31.7.2017 12:48

Jenomže já potřebuji udělat takové menu. Teď mi to udělalo tohle.

 
Nahoru Odpovědět
31.7.2017 12:48
Avatar
Marek Hlavčo
Člen
Avatar
Marek Hlavčo:31.7.2017 13:08

Uprav

nav li {
    float: left;
    line-height: 0.3em;
}

na

nav li {
    display: inline-block;
    line-height: 0.3em;
}

a rodičovi nastav text-align: center;

nav ul {
     text-align: center;
}
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
31.7.2017 13:08
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:31.7.2017 13:10

Děkuju moc.

 
Nahoru Odpovědět
31.7.2017 13:10
Avatar
David Dostal
Tvůrce
Avatar
Odpovídá na Vojta Korduliak
David Dostal:31.7.2017 13:11

Ahoj, navigaci dáš text-align: center a jednotlivým položkám display: inline-block. Tím by se měly vycentrovat.
Viz https://jsfiddle.net/bjf5h9d7/

 
Nahoru Odpovědět
31.7.2017 13:11
Avatar
Marek Hlavčo
Člen
Avatar
Odpovídá na Vojta Korduliak
Marek Hlavčo:31.7.2017 13:13

nieje zač :)

 
Nahoru Odpovědět
31.7.2017 13:13
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 10 zpráv z 10.