четвер, 21 квітня 2011 р.

задача перша виконана

Все виявилося важче ніж я думав. Думав буде як в мультику: "сунь, плюн і зверху скотчем" )) Але все виявилося не так просто, і пішло багато часу на розбір що як робити в цсс. Притиснути футер сторінки до низу броузера ще не зміг, тому він притиснений до низу контенту. Тобто, якщо тексту буде мало, то футер може висіти десь на середині екрану. Вирішення цього завдання я покладаю на наступний раз.

В цілому є все що я собі придумав. Є хедер, є контент і є футер.

виглядає наразі це так



Код CSS виглядає наступним чином
----------------------------------------------------
body {
background:#000;
font-size: 36px;
font-family:Verdana, Geneva, sans-serif;
margin:0;}

.head {
background:#000;
height: 150px;
text-align:center;
border-bottom-style:solid;
border-bottom-color: #FFF;
border-bottom-width: 1px;}

.head-tx {
height: 100px;
text-align:center;
padding-top:50px;}

.content-box{background:#FFF;
width:500;
margin-left: 200px;
margin-right: 200px;}

.footer {background:#000;
height: 50px;
border-top:#FFF solid 1px;}

.footer-tx {
height: 30px;
text-align:center;}

p {
color:#000;
font-size:18px;
margin: 10px;
padding: 10px;}

p1 { color:#FFF;
font-size:50px;}

p2 { color:#FFF;
font-size:20px;}

---------------------

код взагалі далекий від ідеалу, але це покищо найкраще що вийшло)

Код ХТМЛ такий
------------------------
Опубліковано о

1 коментар:

  1. igor12 вересня 2013 р. о 09:00

    Модифікував твій код, щоб притиснути футер до низу. Ось твоє рішення (http://sv-igor.com/uk/html/78-prytysnutyi-futer.html):

    <!DOCTYPE html>
    <html>
    <head>
    <title>TITLE</title>
    <meta charset="utf-8">
    <style>
    body,html{height:100%;}
    *{padding:0;margin:0}
    body {
    background:#000;
    font-size: 36px;
    font-family:Verdana, Geneva, sans-serif;
    margin:0;
    padding:0}

    .wpapper{min-height:100%}

    .wpapper:after{content:' ';display:block;height:75px;clear:both}

    .head {
    background:#000;
    height: 150px;
    text-align:center;
    border-bottom-style:solid;
    border-bottom-color: #FFF;
    border-bottom-width: 1px;}

    .head-tx {
    height: 100px;
    text-align:center;
    padding-top:50px;}

    .content-box{background:#FFF;
    width:500;
    margin-left: 200px;
    margin-right: 200px;}

    .footer {background:#000;
    height: 50px;
    border-top:#FFF solid 1px;
    margin-top:-70px
    }

    .footer-tx {
    height: 30px;
    text-align:center;}

    p {
    color:#000;
    font-size:18px;
    margin: 10px;
    padding: 10px;}

    p1 { color:#FFF;
    font-size:50px;}

    p2 { color:#FFF;
    font-size:20px;}
    </style>
    </head>
    <body>
    <div class="wpapper">
    <div class="head">
    <div class="head-tx">
    <p1>RETRO AUTO</p1>
    </div>
    </div>
    <div class="content-box">
    <p>ГАЗ-12</p>
    </div>
    <div class="content-box">
    <p>ГАЗ-12</p>
    </div>
    <div class="content-box">
    <p>ГАЗ-12</p>
    </div>
    </div>
    <div class="footer">
    <div class="footer-tx">
    <p2>Copyright</p2>
    </div>
    </div>
    </body>
    </html>

    UPD: Що за теги p1 і p2? Алсо, на майбутнє, скидуй код, а не скріни с кодом

    ВідповістиВидалити

Підписатися на: Дописати коментарі (Atom)