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!
Avatar
Ladislav Havelka
Člen
Avatar
Ladislav Havelka:11.6.2015 17:01

Ahoj
chtěl bych se zeptat v CSS jsem si udělal rozbalovací menu. nerozbalené je vše ok ale při rozbalení jse mi dostane do jiného elementu. ten se bud rozhodí a nebo ho překryje pri používání posicion:absolute. z-index taky nepomahá u otcovského elementu. evím proč u "body article section header" mi nejde ani nastavit vlastně pouzeu toho otcovského

Děkuji za odpověď

 
Odpovědět
11.6.2015 17:01
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Ladislav Havelka
Tomáš123:11.6.2015 18:19

Otázke som veľmi neporozumel, skús si ale prečítať tento článok: http://tomas123.mujskript.cz/index.php?….

Vlastnosť z-index funguje iba pri absolútne alebo fixne poziciovanom prvku. Inak sa nič nedeje. Slúži na zmenu predvoleného správania, kedy je vyššie prvok, ktorý je v kóde zapísaný neskôr.

Ak článok nepomôže, bodla by živá ukážka webu nahraného na server alebo aspoň v jednom z nástrojov ako http://jsfiddle.net/

Nahoru Odpovědět
11.6.2015 18:19
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Ladislav Havelka
Člen
Avatar
Ladislav Havelka:12.6.2015 7:21

http://jsfiddle.net/6xk33sz0/ děkuji v záložce čaj to menu :/

Editováno 12.6.2015 7:21
 
Nahoru Odpovědět
12.6.2015 7:21
Avatar
Peas
Člen
Avatar
Odpovídá na Ladislav Havelka
Peas:12.6.2015 8:50

Cauko, tak zahrnieme vsetko co si skusil do funkcneho riesenia nech je zabava :D. Rodicovskemu elementu, teda <li>, v ktorom je zoznam <ul> nastav position: relative. <ul> potom nastav position: absolute, left: 0 a napr: top: 30px a z-index: 1;

Moze to vyzerat takto:

HTML:
<li class="menu">
  <ul>
    <li>Polozka 1</li>
    <li>Polozka 2</li>
  </ul>
</li>

CSS:
.menu {
  position relative;
}

.menu ul {
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 1;
}
 
Nahoru Odpovědět
12.6.2015 8:50
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Ladislav Havelka
Michal Šmahel:12.6.2015 21:03

Nebo se podívej na můj příklad, krásně to tam popisuji. Kdyby jsi tam něco nepochopil, klidně se ještě zeptej.
HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

/* Hlavní seznam (menu) */
nav ul {
    list-style: none; /* Bez odrážek */
}

/* Položka menu */
nav ul li {
    display: inline-block; /* Zobrazit v řádku jako blocky */
    width: 100px;
    background-color: lightblue;
    padding: 2px;
    border: 2px solid blue;
    text-align: center;
    font-weight: bold;
}

/* Poddružený seznam (submenu) */
nav ul li ul {
    display: none; /* Skrýt */
}

/* Submenu - Pokud přejedeme myší nad položkou menu */
nav ul li:hover ul {
    margin-top: 4px;
    position: absolute; /* Vychýlení */
    display: block; /* Zobrazit jako block */
}

/* Položka submenu */
nav ul li ul li {
    display: block; /* Zobrazit pod sebou jako blocky */
    margin-left: -44px; /* Defaultně je to posunuté, posunout pod položku menu */
    border: 0;
    background-color: aqua;
    width: 104px;
    font-weight: normal;
}

Webová ukázka:
http://jsfiddle.net/bdwmon07/

Nahoru Odpovědět
12.6.2015 21:03
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Michal Šmahel
Michal Šmahel:12.6.2015 21:08

Omlouvám se, špatně jsem zkopíroval HTML. :D
Nové HTML:

<nav>
    <ul>
        <li>1. položka</li>
        <li>2. položka
            <ul>
                <li>1. podpoložka</li>
                <li>2. podpoložka</li>
                <li>3. podpoložka</li>
            </ul>
        </li>
        <li>3. položka</li>
    </ul>
</nav>
Nahoru Odpovědět
12.6.2015 21:08
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Ladislav Havelka
Neaktivní uživatel:13.6.2015 10:26

Proč dáváš nadpisu absolutní pozici? Kdybys ho nechal volně na stránce, menu by tak neblblo a stránka by se i snáze upravovala. A vůbec. Smaž si ten nadpis, který se nachází v headeru a udělej ho pomocí h1 bez absolutních pozic a dalších věcí.
Šlo o to, že ten tvůj nadpis, který byl v absolutní pozici, překrýval to menu, když tu absolutní pozici zrušíš, vše bude ok.

Nahoru Odpovědět
13.6.2015 10:26
Neaktivní uživatelský účet
Avatar
adder
Člen
Avatar
Odpovídá na Ladislav Havelka
adder:14.6.2015 8:45

stačí přidat

nav ul li { position: relative; }

a máš to.

Mimochodem kˇod mi přijde docela chaotický. Např. tohle body article section header už je prasárna.

Editováno 14.6.2015 8:45
Nahoru Odpovědět
14.6.2015 8:45
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na adder
Tomáš123:15.6.2015 18:29

"Mimochodem kˇod mi přijde docela chaotický."
A svojou radou mu ešte prirábaš...

Editováno 15.6.2015 18:29
Nahoru Odpovědět
15.6.2015 18:29
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
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 9 zpráv z 9.