Živá ukázka

Výsledek

<!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;
}
#footer {position: relative;}
 
#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-obal {position: absolute; bottom: 0; left: 0; right: 0;}
#paticka span {        
    vertical-align: 9%;
}
#paticka {
  margin: 0 auto;
  width: 980px;
}
 
</style>
</head>
 
<body>
<div id="all">
        <div id="stranka">
            <div id="obsah"></div>      
        </div>        
        <div id="push"></div>
</div>
<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>
                </div>
                <script>
                function prohodit(element, trida) {
                    element.className = element.className == trida ? "" : trida;
                }
                </script>
        </div>
    </div>
    <div id="paticka-obal">
        <div id="paticka">
             <span>Obsah patičky</span>
        </div>
    </div>
</div>
 
</body>
</html>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS