NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
IT rekvalifikace s podporou uplatnění. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!

Diskuze: Schovávající se <div> po kliknutí

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

Aktivity
Avatar
kom72
Člen
Avatar
kom72:17.3.2016 19:57

Ahoj,
mám už na webu funkční skrývající se div po kliknutí. Ukázka zde:
http://www.kom72.cz/example.html
Bohužel se div skrývá tak, že pohne celou patičkou nahoru. Chtěl bych, aby se div skryl po kliknutí dolu, aniž by pohnul patičkou. Napadne někoho jak na to? Predem moc dekuji.

Kod:

<!doctype html>
<html lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

* { margin: 0; padding: 0; border: 0 }
body {
font-family: 'HelveticaRegular',Helvetica,Arial;
font-size: 14px;
    line-height: 1.8;
        background: #FFF;
        color: #999;
        overflow-y: scroll;
        overflow: -moz-scrollbars-vertical; /* u FF zobrazi vysedly vertikalni posuvnik i u stranek s kratkym obsahem, tak jako u IE */
}
body, html{
  height: 100%;
}
#all{
  min-height: 100%;
  height: auto;
  margin-bottom: -272px;
}
#push, #footer{
  height: 272px;
  clear: both;
}

#stranka {
        margin: 0 auto;
        width: 980px;
        text-align: left;
        background: #FFF;
}

/* Obsah */
#obsah {
        padding: 10px 10px 0px 10px;
        background: #FFF;
}

/* Patička */
#autor-obal {
          background: #9C9;
          margin-top: 40px;
}
#autor {
  color: #f2f2f2;
  margin: 0 auto;
  width: 860px;
  text-align: left;
  padding-top: 10px;
}
#autor span {
        display: block;
        width: 650px;
}
#autor button {
        background: none;
        border: none;
}
#autor h5 {
        color: #333;
        font-size: 16px;
}
.pruhlednost p {
        opacity: 1;
        height: 140px;
        margin: 0;
        transition: opacity .5s .3s, height 1s, margin .8s .2s
}
.pruhledny p {
        opacity: 0;
        height: 5px;
        margin: 0;
        transition: opacity .5s, height 1s .2s, margin .8s
}
.pruhlednost button h5,
.nepruhledny h5 {
padding: 0px 30px 0px 0px;
background: transparent url("../images/br_down.png") no-repeat right center;
border: none;
cursor: pointer;
}
.pruhledny button h5 {
padding: 0px 30px 0px 0px;
background: transparent url("../images/br_up.png") no-repeat right center;
border: none;
cursor: pointer;
}

#paticka-obal,
#paticka {
          background: #333;
          text-align: center;
          height: 60px;
          line-height: 60px;
          text-decoration: none;
}
#paticka span {
        vertical-align: 9%;
}
#paticka {
  margin: 0 auto;
  width: 980px;
}

</style>
</head>

<body>
<div id="all">
        <div id="stranka">
            <div id="obsah"></div><!-- ukoncujici ID: obsah -->
        </div><!-- ukoncujici ID: stranka -->
        <div id="push"></div>
</div><!-- ukoncujici ID: all -->
<div class="footer">
    <div id="autor-obal">
        <div id="autor">
                <div class="pruhlednost">
                          <div class=nepruhledny>
                          <button onclick="prohodit(this.parentNode, 'pruhledny')">
                                <h5>Klikací tlačítko</h5>
                          </button>
                          <br>
                          <p>
                              <span>
                                    Obsah zasouvacího divu
                                    <br>
                                                                        <br>
                                                                        <br>
                                                                        <br>
                                    Obsah zasouvacího menu
                              </span>
                          </p>
                          </div><!-- ukoncujici ID: nepruhledny -->
                </div><!-- ukoncujici ID: pruhlednost -->
                <script>
                function prohodit(element, trida) {
                    element.className = element.className == trida ? "" : trida;
                }
                </script>
        </div><!-- ukoncujici ID: autor -->
    </div><!-- ukoncujici ID: autor-obal -->
    <div id="paticka-obal">
        <div id="paticka">
             <span>Obsah patičky</span>
        </div><!-- ukoncujici ID: paticka -->
    </div><!-- ukoncujici ID: paticka-obal -->
</div><!-- ukoncujici ID: pata -->

</body>
</html>
 
Odpovědět
17.3.2016 19:57
Avatar
kom72
Člen
Avatar
kom72:17.3.2016 19:58

jo a ještě se zaboha nemůžu zbavit toho modrého orámování klikacího tlačítka, které se aktivuje po kliknutí.
Pomocí:

#autor button {
    background: none;
    border: none;
}

se zbavím pozadí, ale border tam pořád zůstává...

 
Nahoru Odpovědět
17.3.2016 19:58
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na kom72
Honza Bittner:17.3.2016 20:12

<button>, <input> atp. mají defaultně nastavenou i vlastnost outline, nastav ji na hodnotu none.

Co se týče odsouvání, záleží jakého efektu chceš na výsledné stránce docílit a jak se má patička chovat, jak má být napozicovaná atp.

Nahoru Odpovědět
17.3.2016 20:12
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
kom72
Člen
Avatar
kom72:17.3.2016 21:04

diky za info s buttonem, to jsem nevěděl..
paticku chci mit neustale pri malem obsahu stranky pripnutou na dolnim okraji obrazovky, je to i tak navrženo a funkcni. Jen potrebuji obratit to skryvani. Ted ten div jakoby vyjede nahoru (i s patickou) a ja chci, aby ten div zajel dolu, jakoby do paticky...

 
Nahoru Odpovědět
17.3.2016 21:04
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 4 zpráv z 4.