Блчный элемент выпал из footer

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Анжелика, 30 мар 2016.

  1. Анжелика

    Анжелика

    Регистрация:
    30 мар 2016
    Сообщения:
    9
    Симпатии:
    0
    Всем привет! Первый раз на форуме, не судите строго. Делаю первые нерешительные шаги в верстке и столкнулась со следующей проблемой. При верстке макета, aside спозиционировала абсолютно, так как он расположен от верхней границы wrepper, в результате чего footer ушел под боковую колонку. Спозиционировала абсолютно footer, проблема устранилась, но появилась другая: копирайт выходит за пределы footer, хотя является элементом подвала. Что делать?
     
  2. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    54
    Симпатии:
    3
    Привет, для начала сбросте ссылку или код).
     
  3. Анжелика

    Анжелика

    Регистрация:
    30 мар 2016
    Сообщения:
    9
    Симпатии:
    0
    Привет! Как то так, наверное. Не нашла как html файл прикрепить(
    Код:
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8">
            <title>Заголовок страницы</title>
            <html lang="ru">
            <link href="css/style.css" rel="stylesheet">
            <script src="#"></script>
        </head>
        <body>
        <div class="wrepper">
           <header class="logo">
              <a href="#"><img src="images/logo.png" alt="лого"></a>
           </header>
           <main>
              <div class="arrow"><img src="images/arrow.png"></div>
              <section class="services">
                <h1><span>I</span> Services</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Maecenas in magna mollis lectus lacinia mollis. </p>
              </section>
                <section class="both clearfix">
                 <div class="foto">
                    <img src="images/icon_foto.png" alt="">
                    <h1>PHOTOGRAPHY BUNDLE</h1>
                    <p class="left">The Professional Bundle For <br/>Your Business</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </p>
                 </div>
                 <div class="truck">
                 <img src="images/icon_truck.png" alt="">
                    <h1>Wedding BUNDLE</h1>
                    <p class="left">The Professional Bundle For<br/>Your Wedding</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
                 </div>
                 <div class="develop">
                    <img src="images/icon_dewelop.png" alt="">
                    <h1>Development BUNDLE</h1>
                    <p class="left">The Bundle With All The <br/>Goodies For Your Website</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
                 </div>
                 <div class="social">
                    <img src="images/icon_social.png" alt="">
                    <h1>Social Media BUNDLE</h1>
                    <p class="left">Help Deck Out Your Social<br/>Media Profiles</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </p>
                 </div>
                 </section>
                 <section class="test">
                    <h1><span>I</span> Testimonials</h1>
                    <img src="images/quotes.png">
                    <p>Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit vitae pulvinar lorem egestas. Sed lectus nulla, bibendum at vulputate sit amet, tincidunt volutpat lorem. Mae trenas in magna mollis lectus lacinia mollis. Donec sit amet volutpat lorem. Du tristique porta aliquam. Curabitur sagittis tincidunt erat, quis hendrerit nibh iaculis vitae. Pellentesque ultric nisl quis odio posuere facilisis. In ut felis erat, ac laoreet orci donec sed nulla at sit amet.</p>
                 </section>
             
           </main>
           <aside class="tape">
                 <img src="images/equally.png">
                 <img src="images/foto_1.png">
                 <img src="images/foto_2.png">
                 <img src="images/foto_3.png">
                 <img src="images/foto_4.png">
                 <img src="images/foto_5.png">
                 <img src="images/foto_6.png">
                 <img src="images/foto_7.png">
           </aside>
           <footer class="page-footer">
                 <img src="images/line_footer.png" alt="">
                 <img src="images/triangle.png" alt="">
                 <div class="menu">
                    <ul>
                       <li><a href="#">HOME</a></li>
                       <li><a href="#">ABOUT</a></li>
                       <li class="active"><a href="#">Services</a></li>
                       <li><a href="#">Portfolio</a></li>
                       <li><a href="#">Contact</a></li>
                    </ul>
                 </div>
                 <div class="copyright">Copyright Folio 2012. All Rights Reserved.</div>
           </footer>
        <div>
        </body>
    </html>
    --- Добавлено, 31 мар 2016 ---
    Код:
    @import url(reset.css);
    
    body {
        font: 12px 'Myriad Pro', Arial, sans-serif;
        color: #474747;
    }
    span {
        color: #86b11e;
        font-weight: bold;
        font-size: 26px;
       
    }
    .wrepper{
        position: relative;
        width: 1200px;
        height:1020px;
        background-image: url(../images/bg.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    /*Header*/
    .logo {
        width: 220px;
        height: 148px;
        display: block;
        margin-left: 128px;
    }
    /*Main*/
    main {
        position: relative;
        width: 700px;
        height: 735px;
        box-sizing: border-box;
        padding: 38px;
        margin-top: 90px;
        margin-left: 128px;
        background: #ebebe1;
        opacity: 0.9;
    }
    .arrow {
        position: absolute;
        top: -32px;
        left: 657px;
    }
    h1 {
        font-size: 24px;
        margin-bottom: 28px;
        color: #464646;
    }
    .services p {
        text-align: justify;
    }
    .both:after {
        content:'';
        clear: both;
        display: table;
    }
    .foto, .develop {
        float: left;
        width: 270px;
        height: 125px;
        margin-top: 42px;
    }
    .foto img, .truck img, .develop img, .social img {
        display: inline-block;
        float: left;
    }
    .foto h1, .truck h1, .develop h1, .social h1 {
        display: inline-block;
        padding: 3px 0px 6px 10px;
        margin-bottom: 0;
        font-size: 15px;
        font-weight: 600;
        color: #474747;
    }
    .foto  .left, .truck .left, .develop .left, .social .left {
        display: inline-block;
        padding-left: 10px;
        margin-bottom: 15px;
        color: #aeaeae;
    }
    .foto p, .truck p, .develop p, .social p {
        color: #474747;
    }
    .truck, .social {
        float: right;
        width: 270px;
        height: 125px;
        margin-top: 42px;
    }
    .test {
        width: 610px;
        min-height: 152px;
        margin-top: 50px;
    }
    .test img {
        float: left;
        margin-right: 10px;
        margin-bottom: 60px;
    }
    .test p {
        display: block;
        text-align: justify;
    }
    .tape {
        position: absolute;
        background: #f6f6f5;
        top: 0;
        right: 127px;
    }
    .tape img{
        display: block;
        margin: 15px;
       
    }
    .tape img:first-child {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    /*Footer*/
    .page-footer {
        position: absolute;
        width: 100%;
        height: 54px;
        padding: 0;
        background: #fbfafa;
    }
    .page-footer img {
        display: block;
        margin-top: -5px;
    }
    .page-footer img:nth-last-of-type(1) {
        display: block;
        margin-left: 310px;
    }
    .menu {
        display: block;
    }
    .menu ul {
        display: inline-block;
        margin-left: 143px;
        text-align: centet;
        line-height: 54px;
    }
    .menu li{
        display: inline-block;
        margin-right: 12px;
    }
    .menu a {
        text-decoration: none;
        font-size: 18px;
        color: #4c4c4c;
    }
    .active a, .active:hover{
        color: #86b11e;
    }
    .copyright {
        float: right;
        margin-right: 146px;
    }
    
     
  4. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    54
    Симпатии:
    3
    У вас
    <div class="wrepper"> не закрыт, возможно по-этому косяк
     
  5. Анжелика

    Анжелика

    Регистрация:
    30 мар 2016
    Сообщения:
    9
    Симпатии:
    0
    Закрыла. Проблема осталась(
     
  6. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    Я вообще не понимаю как это должно выглядеть.
    Скиньте фотку макета штоль.
     
  7. Анжелика

    Анжелика

    Регистрация:
    30 мар 2016
    Сообщения:
    9
    Симпатии:
    0
    https://drive.google.com/open?id=0BxBr6fY136ZkR1FzajJKbHF1YnM
    --- Добавлено, 1 апр 2016 ---
    Сообразила! В футере список меню сделан отдельным блоком, он и занимал все пространство. Спасибо за помощь!!!!!
     
    Последнее редактирование: 1 апр 2016
  8. terer

    terer

    Регистрация:
    1 апр 2016
    Сообщения:
    5
    Симпатии:
    0
    вообще когда блоку задаешь абсолютное позиционирование, он не занимает пространства и все блоки смешаются на вверх
    это так на будущее.
     
  9. Анжелика

    Анжелика

    Регистрация:
    30 мар 2016
    Сообщения:
    9
    Симпатии:
    0
    Да, это понятно. Внутри абсолютно спозиционированного блока был список и блок с копирайтом. Изначально я обкрнула список в блок nav, этот блок и занимал все пространство
    --- Добавлено, 1 апр 2016 ---
    А еще подскажите! Есть у меня два img, расположенные друг под другом. Нужно чтобы одна накладывалась на др. Я так понимаю, в html эти img должны располагаться: та картинка что сверху на сайте, снизу в коде? Или не верно понимаю?
     
  10. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    вот тут разбирали что-то похожее http://wmasteru.ru/threads/рамка.20974/