Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Submenu řádkování

Aktivity
Avatar
tbartolen
Člen
Avatar
tbartolen:4.2.2015 10:47

Ahoj, potíž je v tom, že se mi nějakým způsobem řádkují submenu , a já vůbec netuším, proč a podle jakého klíče..
Jak je vidět na obrázku, tak se mi text v submenu zarovnává podle délky textu v menu ze kterého vychází...ale to nechci...a netuším jak se toho zbavit, už nad tim dumám pěkných pár hodin, a došel sem k závěru, že to asi nebude záležitost CSS...nebo ano? Děkuji za radu

Odpovědět
4.2.2015 10:47
Navštiv www.fb.com/skkelticz
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na tbartolen
Uživatel sítě :4.2.2015 12:37

Ahoj, definuj .li šířku:

.main-navigation li {
    width: 300px;
}
Nahoru Odpovědět
4.2.2015 12:37
Chybami se člověk učí, běžte se učit jinam!
Avatar
tbartolen
Člen
Avatar
Odpovídá na Uživatel sítě
tbartolen:4.2.2015 12:56

Tím nastavím šířku toho hlavního menu...a tím pádem se mi menurozskáče na dva řádky, to moc nechci, dá se to řešit zmenšením písma nebo něčím podobným? Jinak už sem to hodil na jeden řádek tím, že jsem definoval šířku u :

.main-navigation ul ul /*stylování sub menu*/{
        background: #2fff00;
        display: block; /*pak vratit na none*/
        float: left;
        position: absolute;
        top: 1.6em;
        left: -0.2em;
        z-index: 99999;
        padding: 4px;
        border-radius: 0.2em ;
    width: 200%

}
.main-navigation ul ul a {
        /*padding: 4px 0;*/
        font-size: 1.3rem;
        font-size: 13px;
    background-color: #0007aa;
    width: 100px;

Ale ted mám zase nesmyslně dlouhou tu zelenou lajnu, a když jí zužim, tak skáču znovu do druhého řádku

Editováno 4.2.2015 12:58
Nahoru Odpovědět
4.2.2015 12:56
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:4.2.2015 12:58

Přikládám obrázek co myslím

Nahoru Odpovědět
4.2.2015 12:58
Navštiv www.fb.com/skkelticz
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na tbartolen
Uživatel sítě :4.2.2015 13:00

Chtělo by to nějaká live náhled. Takhle nevím co tam máš dále dané a jak se to vlastně chová.

Nahoru Odpovědět
4.2.2015 13:00
Chybami se člověk učí, běžte se učit jinam!
Avatar
Lava
Člen
Avatar
Lava:4.2.2015 13:01

Máš urobený CSS RESET? V opačnom prípade si to prehliadače vykresľujú podľa vlastného uváženia

Nahoru Odpovědět
4.2.2015 13:01
Aspartám, sacharín, to je môj vitamín
Avatar
tbartolen
Člen
Avatar
Odpovídá na Uživatel sítě
tbartolen:4.2.2015 13:10

Live náhled? Dával sem obrázek, nevím co přesně tim myslíš...

Mego: Nejspíš ano, upravuju jen Wordpress šablonu, tak by to tam mělo být nastavené

Nahoru Odpovědět
4.2.2015 13:10
Navštiv www.fb.com/skkelticz
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na tbartolen
Uživatel sítě :4.2.2015 13:12

Ať se na to mohu podívat jako návštěvník, aspoň to menu se stylama. Z obrázku těžko něco zjistím, vidím kus cosi čehosi.. :/

Nebo to můžeš hodit i sem, jako code..

Nahoru Odpovědět
4.2.2015 13:12
Chybami se člověk učí, běžte se učit jinam!
Avatar
tbartolen
Člen
Avatar
tbartolen:4.2.2015 13:58

Já to mám na localu tak ti to asi nemužu nijak ukázat, jinak tady je kod menu, nebo chceš celý CSS?

.main-navigation /* okolo navigace, nejsem si uplně jistý, font menu*/ {
        font-family: verdana;
    clear: both;
    display: block;
    padding: 0.6em;
        background-color: #f70019;
        margin-top: 5px;
        margin-bottom: 0;
        max-width: 960px;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        background-image: url(images/navbg.png); /*změna barvy hlavniho menu*/
}
.main-navigation:after {
        clear: both;
        content: "";
        display: block;
}
.main-navigation ul {
        list-style: none;
        margin: 0;
        padding: 0 16px;


}
.main-navigation li {
        float: left;
        margin: 0px;
        position: relative;

}
.main-navigation a /*barva pisma v navmenu*/{
        font-size: 1.4rem;
        font-size: 14px;
        color: #ffffff;
    display: block;
    font-weight: normal;
    margin-right: 2em;
    text-decoration: none;
        text-transform: uppercase;
        word-spacing: 4px;
}
.main-navigation ul ul /*stylování sub menu*/{
        background: #2fff00;
        display: block; /*pak vratit na none*/
        float: left;
        position: absolute;
        top: 1.6em;
        left: -0.2em;
        z-index: 99999;
        padding: 4px;
        border-radius: 0.2em ;
    width: 200%

}
.main-navigation ul ul a {
        /*padding: 4px 0;*/
        font-size: 1.3rem;
        font-size: 13px;
    background-color: #0007aa;
    width: 100%;

}
.main-navigation ul ul ul {
        left: 100%;
        top: -0.3em;
        margin: 0;
        border-radius: 0 0.2em 0.2em 0;
        width: 100%


}
.main-navigation ul ul ul a {
        font-size: 1.3rem;
        font-size: 13px;

}
.main-navigation li:hover > a,
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a,
.main-navigation ul ul a:hover {
        color: #ff0400;
        display: block;
}

.main-navigation ul li:hover > ul {
        display: block;
}
Nahoru Odpovědět
4.2.2015 13:58
Navštiv www.fb.com/skkelticz
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na tbartolen
Uživatel sítě :4.2.2015 14:31

Mohu ještě poprosit to menu?

Nahoru Odpovědět
4.2.2015 14:31
Chybami se člověk učí, běžte se učit jinam!
Avatar
tbartolen
Člen
Avatar
Odpovídá na Uživatel sítě
tbartolen:4.2.2015 16:53

To asi nemam, to se tam zadává někam do pole přes php databazi nejspíš...čistý HTML dokument nemám :(

Nahoru Odpovědět
4.2.2015 16:53
Navštiv www.fb.com/skkelticz
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na tbartolen
Michal Šmahel:4.2.2015 17:13

Tak si to nech načíst v prohlížeči, dej zobrazi zdrojový kód stránky (CTRL + U (myslím)) a zkopíruj to odtud.

Nahoru Odpovědět
4.2.2015 17:13
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
tbartolen
Člen
Avatar
tbartolen:4.2.2015 17:34

Tak tedyy menu:

<nav role="navigation" class="site-navigation main-navigation">
                        <h1 class="assistive-text">Menu</h1>
                        <div class="assistive-text skip-link"><a href="#content" title="Skip to content">Skip to content</a></div>

                        <div class="menu-prvni-menu-container"><ul id="menu-prvni-menu" class="menu"><li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8"><a href="http://localhost/wordpress/">Úvodní stránka</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-9"><a href="http://localhost/wordpress/zkusebni-stranka/">Muži</a>
<ul class="sub-menu">
        <li id="menu-item-59" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-59"><a title="A tým" href="http://localhost/wordpress/soupiska-a-tymu/">Soupiska A</a></li>
        <li id="menu-item-62" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-62"><a title="A tým" href="http://localhost/wordpress/rozpis/">Rozpis A</a></li>
        <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="http://localhost/wordpress/b-tym/">B tým</a></li>
</ul>
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/wordpress/zkusebni-stranka/">Mládež</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-21"><a href="http://localhost/wordpress/zkusebni-stranka/">Ženy</a>
<ul class="sub-menu">
        <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href="http://localhost/wordpress/category/novinky-zeny/">Novinky ženy</a></li>
        <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://localhost/wordpress/soupiska-a-tymu/">Soupiska ženy</a></li>
        <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"><a href="http://localhost/wordpress/rozpis/">Rozpis ženy</a></li>
</ul>
</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/wordpress/zkusebni-stranka/">Keltí shop</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-23"><a href="http://localhost/wordpress/zkusebni-stranka/">Nižborský hokejbal</a>
<ul class="sub-menu">
        <li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="http://localhost/wordpress/category/novinky-a/">novinka A</a></li>
</ul>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/wordpress/zkusebni-stranka/">Kontakt</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/wordpress/zkusebni-stranka/">Sponzoři</a></li>
</ul></div>             </nav><!-- .site-navigation .main-navigation -->
Nahoru Odpovědět
4.2.2015 17:34
Navštiv www.fb.com/skkelticz
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na tbartolen
Michal Šmahel:4.2.2015 17:47

A jéje WP xD. Tak to ti neporadím.

Nahoru Odpovědět
4.2.2015 17:47
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na tbartolen
Uživatel sítě :4.2.2015 18:40

Chápu to tak, že chceš aby ta zelená plocha byla všude stejná?

Nahoru Odpovědět
4.2.2015 18:40
Chybami se člověk učí, běžte se učit jinam!
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na tbartolen
Uživatel sítě :4.2.2015 20:24

Jestli ano, tak tu šířku nastav na px a né na %.

width: 200px;

Potom už mi to nedělalo bordel, jak jsi uvedl na obrázku.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
4.2.2015 20:24
Chybami se člověk učí, běžte se učit jinam!
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na tbartolen
Matyáš Procházka:4.2.2015 21:29

Jestli to chápu dobře, tak ty chceš, aby ten text byl na jednom řádku? Respektive, aby se třeba zalomil až tam, kde chceš ty? Pokud ano, tak vlož mezi ty slova toto:

&nbsp;

Vytvoří to mezeru, která se nezalamuje.

Pokud budeš mít třeba toto jako položku menu:

Toto&nbsp;je&nbsp;testovací&nbsp;prvek&nbsp;menu

Nikde se text nezalomí a zobrazí se to jako jednořádková položka ;)

Editováno 4.2.2015 21:30
 
Nahoru Odpovědět
4.2.2015 21:29
Avatar
tbartolen
Člen
Avatar
tbartolen:4.2.2015 21:38

Paráda, použil jsem ty pixely místo procent a funguje to. To s tím nbsp si budu pamatovat, bude se to hodit. Děkuji mnohokrát všem.

Nahoru Odpovědět
4.2.2015 21:38
Navštiv www.fb.com/skkelticz
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 18 zpráv z 18.