Avatar
tbartolen
Člen
Avatar
tbartolen:

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
Marek Z.
Redaktor
Avatar
Odpovídá na tbartolen
Marek Z.:

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 Marek Z.
tbartolen:

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:

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
Marek Z.
Redaktor
Avatar
Odpovídá na tbartolen
Marek Z.:

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

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
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
tbartolen
Člen
Avatar
Odpovídá na Marek Z.
tbartolen:

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
Marek Z.
Redaktor
Avatar
Odpovídá na tbartolen
Marek Z.:

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:

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
Marek Z.
Redaktor
Avatar
Odpovídá na tbartolen
Marek Z.:

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 Marek Z.
tbartolen:

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
Odpovídá na tbartolen
Michal Šmahel (ceskyDJ):

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  +1 4.2.2015 17:13
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
tbartolen
Člen
Avatar
tbartolen:

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
Odpovídá na tbartolen
Michal Šmahel (ceskyDJ):

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
Marek Z.
Redaktor
Avatar
Odpovídá na tbartolen
Marek Z.:

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
Marek Z.
Redaktor
Avatar
Odpovídá na tbartolen
Marek Z.:

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í
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 4.2.2015 20:24
Chybami se člověk učí, běžte se učit jinam!
Avatar
Odpovídá na tbartolen
Matyáš Procházka:

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  +3 4.2.2015 21:29
Avatar
tbartolen
Člen
Avatar
tbartolen:

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  +1 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.