Diskuze: Menu

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

Aktivity

Rostak

Člen

Rostak:11.11.2016 17:46

Mám problém se CSS. Nějak se mi nedaří roztáhnout menu na celou obrazovku. Pokud nezmenším velikost stránky. Nejlépe je to vidět přímo na stránkách https://e-revize.cz/ U tlačítka kontakt. Jak to nejlépe upravit?
Poradí mi prosím někdo zkušenější.Já jsem jenom amatér co si rád dělá vlastní stránky.

#stranka{margin:0 auto;max-width:1200px;}
#obal{overflow:hidden;}
#logo{width:24%;height:134px;float:left;text-align:center;font-size:50%;border-top:solid #fff;background:blue;background:linear-gradient(#3FADE5, white);}
#logo h1{padding:8% 1%;}
#hlavicka{width:76%;height:134px;float:right;background:url(obrazky/revize-elektro-instalace-hromosvodu-stroju-skoleni-vyhlaska-50.jpg);border-top:solid white;}
#hlavicka p{margin:0;text-align:center;font-weight:bold;height:16px;background-color:white;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,
#cssmenu #menu-button{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;box-sizing:border-box;}
#cssmenu:after,
#cssmenu > ul:after{content:"";display:block;clear:both;line-height:0;height:0;}
#cssmenu #menu-button{display:none;}
#cssmenu{background:#0093DD;border-top:solid white;}
#cssmenu > ul > li{float:left;}
#cssmenu > ul > li > a{padding:17px;font-size:120%;letter-spacing:1px;text-decoration:none;color:white;font-weight:700;}
#cssmenu > ul > li:hover > a{background-color:red;}
#cssmenu ul ul{position:absolute;left:-9999px;z-index:2;}
#cssmenu li:hover > ul{left:auto;}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150, 150, 150, 0.15);padding:11px 15px;width:170px;text-decoration:none;color:white;font-weight:400;background-color:#0093DD;}
#cssmenu ul ul li a:hover{font-weight:700;background-color:red;}

Odpovědět

11.11.2016 17:46

Jakub Žák

Člen

Jakub Žák:13.11.2016 9:57

Menu roztáhlé je, ovšem ta tlačítka mají velikost dle obsahu, tudíž se logicky roztáhnout nemůžou Ještě lépe je to vidět, když si okno trochu zmenšíš - menu se ti rozsype do dvou řádků

Nejlepší na to je flexbox, který za tebe je schopen zařídit, že se položky roztáhnou automaticky. Taky bych asi dle media queries zmenšoval písmo těch tlačítek na menších obrazovkách.

Hodně zjednodušeně:

ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        font-size: 10px;
}

ul li {
        flex-grow: 1;
        flex-basis: 0;
        text-align: center;
}

ul li a {
        padding: 17px 0;
        width: 100%;
        display: block;
}

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

13.11.2016 9:57

Kuba je ajťák. Buď jako Kuba.

Jakub Žák

Člen

Jakub Žák:13.11.2016 10:11

Taky bych změnil ještě:

ul ul {
        width:100%;
}

ul ul li {
        width:100%
}

ul ul li a {
        width:100%;
}

což by mělo opravit to, že nyní submenu může být širší, než příslušná položka menu.

Nahoru Odpovědět

13.11.2016 10:11

Kuba je ajťák. Buď jako Kuba.

Rostak

Člen

Rostak:13.11.2016 18:08

Asi dělám něco špatně. Roztažení chodí bez problémů, ale menu se zmenšilo na výšku textu. Podmenu je zarovnané do středu a taky má malý text. Pokud změním výšku textu tak se to chová podivně.

#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,
#cssmenu #menu-button{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;box-sizing:border-box;}
#cssmenu:after,
#cssmenu > ul:after{content:"";display:block;clear:both;line-height:0;height:0;}
#cssmenu #menu-button{display:none;}
#cssmenu{background:#0093DD;border-top:solid white;}
#cssmenu > ul {width: 100%;margin: 0;padding: 0;display: flex;flex-wrap: nowrap;flex-direction: row;font-size: 10px;}
#cssmenu > ul > li{flex-grow: 1;flex-basis: 0;text-align: center;float:left;}
#cssmenu > ul > li > a{padding:17px O;width: 100%;display: block;font-size:120%;letter-spacing:1px;text-decoration:none;color:white;font-weight:700;}
#cssmenu > ul > li:hover > a{background-color:red;}
#cssmenu ul ul{width:100%;position:absolute;left:-9999px;z-index:2;}
#cssmenu ul ul li {width:100%}
#cssmenu li:hover > ul{left:auto;}
#cssmenu ul ul li a{width:100%;border-bottom:1px solid rgba(150, 150, 150, 0.15);padding:11px 15px;width:170px;text-decoration:none;color:white;font-weight:400;background-color:#0093DD;}
#cssmenu ul ul li a:hover{font-weight:700;background-color:red;}

Nahoru Odpovědět

13.11.2016 18:08

Jakub Žák

Člen

Jakub Žák:13.11.2016 22:58

Někam na web by to dát nešlo? Třeba někam do podsložky dát klon toho aktuálního s tímto?

Nahoru Odpovědět

13.11.2016 22:58

Kuba je ajťák. Buď jako Kuba.

Rostak

Člen

Rostak:14.11.2016 17:51

Posílám odkaz jak to vypadá

http://kod.djpw.cz/mocc

Nahoru Odpovědět

14.11.2016 17:51

Jakub Žák

Člen

Jakub Žák:14.11.2016 18:41

Výška menu

#cssmenu > ul > li > a

má v paddingu písmeno O místo nuly.

Text v submenu
Přidat:

#cssmenu ul ul {font-size:1.7em; text-align: left;}

Špatná šířka submenu
Odebrat:

#cssmenu ul ul li a {width:170px;}

Editováno 14.11.2016 18:41

Nahoru Odpovědět

14.11.2016 18:41

Kuba je ajťák. Buď jako Kuba.

Rostak

Člen

Rostak:14.11.2016 22:56

Už je to lepší, ale nevím jestli flexbox je to správné řešení . Toto menu má teď všechny nabídky stejně široké. Zatím co dříve se to pěkně vyplnilo podle potřeby. Písmo chová taky nějak divně a to ikdyž vymažu všechny velikosti a nechám jen jednu.

Nahoru Odpovědět

14.11.2016 22:56

Jakub Žák

Člen

Jakub Žák:14.11.2016 23:03

Všechny jsou stejné, protože

flex-basis:0;

bez toho se přizpůsobí obsahu.

Nahoru Odpovědět

14.11.2016 23:03

Kuba je ajťák. Buď jako Kuba.

Rostak

Člen

Rostak:16.11.2016 22:41

Děkuji. Ještě jsem to trošku doladil a už to chodí.

Nahoru Odpovědět

16.11.2016 22:41

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.

Nejčastěji vyhledáváné

Diskuze: Menu