Diskuze: css pozicování

HTML a CSS HTML a CSS css pozicování American English version English version

Avatar
Ladislav Havelka:

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:

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:

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:

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

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

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
Fredep
Redaktor
Avatar
Odpovídá na Ladislav Havelka
Fredep:

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  +2 13.6.2015 10:26
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
adder
Člen
Avatar
Odpovídá na Ladislav Havelka
adder:

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:

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