Avatar
kom72
Člen
Avatar
kom72:

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. března 19:57
Avatar
kom72
Člen
Avatar
kom72:

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. března 19:58
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na kom72
Honza Bittner:

<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  +2 17. března 20:12
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
kom72
Člen
Avatar
kom72:

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. března 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.