Diskuze: css pozicování

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Ladislav Havelka

Člen

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

Tomáš123

Člen

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.

Ladislav Havelka

Člen

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

Peas

Člen

Peas:12.6.2015 8:50

Cauko, tak zahrnieme vsetko co si skusil do funkcneho riesenia nech je zabava . 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

Michal Šmahel

Člen

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.

Michal Šmahel

Člen

Michal Šmahel:12.6.2015 21:08

Omlouvám se, špatně jsem zkopíroval HTML.
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.

Neaktivní uživatel

Tvůrce

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

adder

Člen

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.

Tomáš123

Člen

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.