Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Rostak
Člen
Avatar
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
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Rostak
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ů :D

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č
Řešení problému
Nahoru Odpovědět
13.11.2016 9:57
Kuba je ajťák. Buď jako Kuba.
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Rostak
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.
Avatar
Rostak
Člen
Avatar
Odpovídá na Jakub Žák
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
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Rostak
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.
Avatar
Rostak
Člen
Avatar
Odpovídá na Jakub Žák
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
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Rostak
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
Nahoru Odpovědět
14.11.2016 18:41
Kuba je ajťák. Buď jako Kuba.
Avatar
Rostak
Člen
Avatar
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
Avatar
Jakub Žák
Člen
Avatar
Odpovídá na Rostak
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.
Avatar
Rostak
Člen
Avatar
Odpovídá na Jakub Žák
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.