Footer к низу страницы

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем fry, 15 сен 2009.

  1. fry

    fry Гость

    Описание проблемы: Если текст на странице большой, то футер спокойно прилепляется к низу страницы. Если текста мало - футер прилепляется под текстом. Как его прилепить к низу страницы?

    CSS-код

    Код (Text):
    #holder { padding:0 20px; min-width:955px; min-height:100%; height:auto !important; height:100%; margin-bottom:-4px; }
    .head { height:167px; position:relative; }

    .head .logo { position:absolute; top:0; right:6%; width:171px; height:144px; }
    .head .logo .text { position:relative; top:27px; margin-left:-26px; float:left; }
    .head .logo .corner { display:block; width:29px; height:144px; }
    .head .logo .left { float:left; }
    .head .logo .right { float:right; }
    .information { font-family: Arial, sans-serif;
    font-size: 30px;
    padding-left:40px;
    padding-right:40px;
    padding-top:70px;
    }

    .head .menu { position:absolute; top:125px; left:-12px; width:100%; font-size:94%; text-transform:uppercase; }
    .head .menu li { float:left; padding-right:3.4%; padding-left:12px; font-family:Georgia, serif; }
    .head .menu li span { color:#ff0000; font-weight:bold; font-family:Georgia, serif; }
    .head .menu li a { font-family:Georgia, serif; }
    .head .menu li a span { color:#000000; }
    .head .menu li.hasSubMenu { position:relative; margin-left:-10px; }
    .head .menu li.hasSubMenu a { color:#ff0000; height:1em; line-height:1em; }
    .head .menu li.hasSubMenu span { color:#ff0000; }
    .head .menu li.hasSubMenu span.arrow { position:relative; width:0.5em; top:-1px; margin-right:4px; height:1.1em; line-height:1.1em; font-size:102%; font-family:Arial; color:#828282; font-weight:normal; }
    .head .menu li.hasSubMenu li { }
    .head .menu li.hasSubMenu ul { position:absolute; left:4px; bottom:14px; }
    .head .menu li.hasSubMenu ul li { float:none; padding:0 0 4px 12px; white-space:nowrap; }
    /*
    .head .menu li.important a { color:#000000; font-family:Georgia, serif !important; }
    .head .menu li.important a span { color:#ff0000; font-family:Georgia, serif !important; }
    */

    .head .blogLink { position:absolute; top:125px; right:0; font-size:94%; font-weight:bold; text-transform:uppercase; font-family:Georgia, serif; }
    .head .blogLink span { color:#000000; font-weight:bold; font-family:Georgia, serif; }

    .head .contacts { position:absolute; top:25px; left:8%; padding-top:5px; font-family:Arial; }
    .head .contacts .phone { font-size:190%; }
    .head .contacts a { position:relative; font-size:105%; top:3px; }

    .body { height:100%; min-height:100%;}
    .body .centerMain { height:245px; margin:0 -20px 0 -20px; padding:0 20px; background:#f6f7f2; }


    .body .itemContent { width:100%; font-family:Arial; margin-left:0.3em; }
    .body .itemContent p { font:normal 110%/1.5em Arial; padding-bottom:0.8em; }
    .body .itemContent p.also { color:#555555; font-style:italic; }
    .body .itemContent p.also a { color:#555555; }
    .body .itemContent .info { width:66%; padding-bottom:25px; }
    .body .itemContent .screenshot { float:left; margin-left:-5px; position:relative; }
    .body .itemContent .note { float:left; width:20%; padding:10px 0 0 20px; margin-left:-10px; font-style:italic; }
    .body .itemContent .resume { margin-left:-50px; padding-top:50px; font-size:91%; color:#555555; position:relative; zoom:1; }
    .body .itemContent .resume .title { float:left; width:50px; padding-top:1px; font-size:110%; }
    .body .itemContent .resume .text { float:left; width:76%; }
    .body .itemContent h1 { font-family:"arial"; font-size:37px; padding-bottom:0.7em; }
    .body .itemContent .item { float:left; width:100%; margin-left:7.5%; margin-top:-30px; }
    .body .itemContent .item34 { float:left; width:63%; }
    .body .itemContent .goToItem { color:#555555; }
    .body .itemContent .goToItem .arrow { font-size:230%; line-height:1.3em; }
    .body .itemContent .goToItem .ctrl { position:relative; top:-0.27em; }
    .body .itemContent .goToItem a { font-size:100%; line-height:1.1em; }
    .body .itemContent .goLeft { float:left; width:8.2%; margin-top:0px; }
    .body .itemContent .goLeft .ctrl { margin-left:3px; }
    .body .itemContent .goRight { float:left; width:8.2%; text-align:right; margin-top:0px; margin-left:81%; position:absolute; }
    .body .itemContent .goRight78 { float:right; width:15.2%; text-align:left; }
    .body .itemContent .goRight .ctrl { margin-right:3px; }



    .body .itemContent div#header{position:relative}
    .body .itemContent div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B}
    .body .itemContent div#header a{position:absolute;right:0;top:23px}
    .body .itemContent div#content p{line-height:1.4}
    .body .itemContent div#navigation{background:#B9CAFF}
    .body .itemContent div#extra{background:#FF8539}
    .body .itemContent div#footer{background: #333;color: #FFF}
    .body .itemContent div#footer p{margin:0;padding:5px 10px}
    .body .itemContent div#footer a{display:inline;padding:0;color: #C6D5FD}

    .body .itemContent div#wrapper{float:left;width:100%}
    .body .itemContent div#content{margin: 0 25%}
    .body .itemContent div#navigation{float:left;width:25%;margin-left:-100%}
    .body .itemContent div#extra{float:left;width:25%;margin-left:-25%}
    .body .itemContent div#footer{clear:left;width:100%}
    .ulspisok { display:list-item; }
    .clientsinfo {
    width:50%; float:left; margin-left:-2%; margin-right:30px;
    }
    .body .itemContent .clientsinfo .text {
    width:100%; float:left; font-size:13px; line-height:18px; margin-right:30px;
    }
    .notecs { width:200px; margin-left:82%; top:342px; position:absolute; margin-right:2% }
    .body .itemContent .notecs h1 { font-size:23px; margin-bottom:-10px; }
    .body .itemContent .notecs span { display:block; line-height:21px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
    .clientsinfo h1 { font-size:60px; }
    .body .itemContent .clientsinfo h1 { font-family:Georgia, "Times New Roman", Times, serif; font-size:60px; padding-bottom:0.7em; }
    .imgnews { width:20%; float:left; margin-left:3%; margin-top:10px; }
    .foot { position:relative; margin:50px 8.2% 0 8.2%; padding-top:23px; background:url(../img/curve.gif) 0 0 repeat-x; }
    .foot .subFoot { /*position:relative; zoom:1;*/ }
    .foot .block { float:left; width:27%; margin-right:3%; padding-bottom:37px; }
    .foot .block div.title { padding-bottom:5px; font-size:94%; font-weight:bold; text-transform:uppercase; line-height:1.5em; font-family:Georgia, serif !important; }
    .foot .block p { font-family:Arial; }
    .foot .search form { /*float:left;*/ position:relative; width:100%; }
    .foot .search label { position:absolute; top:0.25em; left:5px; color:#bdbdbd; }
    .foot .search input.text { /*float:left;*/ width:71%; margin-right:1px; }
    .foot .search input.submit { /*float:left;*/ width:15%; }
    .foot .contacts { font-family:Arial; }
    .foot .contacts .phone { font-weight:bold; }
    .foot .copyright { position:absolute; top:23px; right:-6%; font-family:Arial; }
    .red { /*position:absolute;*/ height:6px; margin-left:5%; /*bottom:0; left:-3.4%;*/ background:#ff0000; }
    .red, .red .inner { width:12.3%; height:6px; font-size:0; }
    .red .left { background:url(../img/c-left-b.gif) 0 0 no-repeat; }
    .red .right { background:url(../img/c-right-b.gif) 100% 0 no-repeat; }



    HTML-код

    Код (Text):
    <body>
    <div id="holder">
    <div class="head">
    <div class="logo" style="background:#ec1c23 0 0 no-repeat;">
    <img src="img/c-logo-left.png" width="29" height="144" class="left corner png" />
    <img src="img/logo-text.png" class="text png" width="116" height="115" alt="kopo"/>
    <img src="img/c-logo-right.png" width="29" height="144" class="right corner png" />
    </div>
    <ul class="menu blackRedLinks">
    <li><a href="#"><span>O nas</span></a></li>
    <li><a href="#"><span>Продукты и услуги</span></a></li>
    <li><a href="#"><span>Портфолио</span></a></li>
    <li><a href="#">Клиенты</a></li>
    <li><a href="#"><span>Контакты</span></a></li>
    </ul>
    <a class="blogLink blackRed newWindow" href="#"><span>Блог</span></a>
    <div class="contacts">
    <span class="phone">787878 98989 77</span><br/>
    <a href="#" class="noReload redPink"><span>Обратная связь</span></a>
    </div>
    </div>
    <div class="body">
    <div class="itemContent content container">
    <div class="imgnews"><img src="img/k3.jpg" width="137" height="92" /></div>
    <div class="clientsinfo"> <h1>Центр финансового консультирования</h1>
    <div class="text">Семиотика искусства дает миракль, исчерпывающее исследование чего дал М. Кастельс в труде «Информационная эпоха». <br />
    Иными словами, эротическое отражает конструктивный художественный вкус, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. <br />
    По сути, элемент политического процесса просветляет базовый тип личности, отмечает автор, цитируя К. Маркса и Ф. Энгельса.</div>
    </div>
    <div class="notecs"><h1>Было сделанно:</h1><span class="123"><a href="">Са</a></span><span class="123"><a href="">Фирм</a></span></div>

    </div>

    </div>

    <div class="clear" ></div>
    <div class="foot">
    <div class="subFoot">
    <div class="vacancies block blackRedLinks">
    <div class="title"><a href="#"><span>Ваи</span></a></div>
    <p>На, которые способны свернуть горы.</p>
    </div>
    <div class="search block">
    <form action="" method="post">
    <label class="searchLabel" for="searchInput">поиск</label>
    <input type="text" id="searchInput" class="text" name="search" value=""/>
    <input type="submit" class="submit" value="OK"/>
    </form>
    </div>
    <div class="contacts block">
    <span class="phone">8989 899 898</span><br/>
    Электронная почта: <a href="9898" class="blackPink"><span>89009898</span></a><br/>
    joijoiohyiohoiohihoihio
    </div>
    <div class="copyright">© 2006-2009</div>
    </div>
    <span class="clear"></span>


    </div>
    <div class="pushRed"></div>
    <div class="red">
    <div class="left">
    <div class="right">
    <div class="inner"></div>
    </div>
    </div></div>
    </div>
    </body>
     
  2. Mavrun

    Mavrun Гость

Загрузка...
Похожие Темы - Footer низу страницы
  1. lemaks
    Ответов:
    1
    Просмотров:
    5.006
  2. wowa
    Ответов:
    4
    Просмотров:
    1.730
  3. wowa
    Ответов:
    7
    Просмотров:
    2.875

Поделиться этой страницей