| Autor | Zpráva | ||
|---|---|---|---|
| KOM Profil * |
Ahoj,
mám už na webu funkční skrývající se div po kliknutí. Ukázka zde. 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;
}
/* Hlavička */
#logo {
float: left;
clear: both;
padding-right: 140px;
}
/* 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> 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;
} |
||
| KOM Profil * |
#2 · Zasláno: 17. 3. 2016, 21:08:33
aha, takže border button se musi vynulovat pomoci outline: none
takze uz jen to skryvani divu... |
||
| Tomáš123 Profil |
#3 · Zasláno: 18. 3. 2016, 09:21:50
KOM:
Pomôže pätu absolútne napoziciovať na dno stránky. Analogicky ide presunúť aj rozťahovací <div>, ak by ti prekážala jeho pozícia. Je ale lepšie, ak sa neuhýna pred kliknutím.
|
||
| KOM Profil * |
#4 · Zasláno: 18. 3. 2016, 15:40:02
Ahoj, ja bych prave chtěl, aby uhybal po kliknuti. Aby jakoby zajel do paticky a pak z ni zase vyjel...
|
||
|
Časová prodleva: 8 let
|
|||
0