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

Анжелика · 30 мар 2016

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

Perat · 31 мар 2016

Привет, для начала сбросте ссылку или код).

Анжелика · 31 мар 2016

Привет! Как то так, наверное. Не нашла как 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;
}

Perat · 31 мар 2016

У вас
<div class="wrepper"> не закрыт, возможно по-этому косяк

Анжелика · 1 апр 2016

Perat сказал(а): ↑

У вас
<div class="wrepper"> не закрыт, возможно по-этому косяк
Нажмите, чтобы раскрыть...

Закрыла. Проблема осталась(

iga · 1 апр 2016

Я вообще не понимаю как это должно выглядеть.
Скиньте фотку макета штоль.

Анжелика · 1 апр 2016

iga сказал(а): ↑

Я вообще не понимаю как это должно выглядеть.
Скиньте фотку макета штоль.
Нажмите, чтобы раскрыть...

https://drive.google.com/open?id=0BxBr6fY136ZkR1FzajJKbHF1YnM

--- Добавлено, 1 апр 2016 ---

Анжелика сказал(а): ↑

Закрыла. Проблема осталась(
Нажмите, чтобы раскрыть...

Сообразила! В футере список меню сделан отдельным блоком, он и занимал все пространство. Спасибо за помощь!!!!!

terer · 1 апр 2016

вообще когда блоку задаешь абсолютное позиционирование, он не занимает пространства и все блоки смешаются на вверх
это так на будущее.

Анжелика · 1 апр 2016

terer сказал(а): ↑

вообще когда блоку задаешь абсолютное позиционирование, он не занимает пространства и все блоки смешаются на вверх
это так на будущее.
Нажмите, чтобы раскрыть...

Да, это понятно. Внутри абсолютно спозиционированного блока был список и блок с копирайтом. Изначально я обкрнула список в блок nav, этот блок и занимал все пространство

--- Добавлено, 1 апр 2016 ---

terer сказал(а): ↑

вообще когда блоку задаешь абсолютное позиционирование, он не занимает пространства и все блоки смешаются на вверх
это так на будущее.
Нажмите, чтобы раскрыть...

А еще подскажите! Есть у меня два img, расположенные друг под другом. Нужно чтобы одна накладывалась на др. Я так понимаю, в html эти img должны располагаться: та картинка что сверху на сайте, снизу в коде? Или не верно понимаю?

iga · 1 апр 2016

Анжелика сказал(а): ↑

Нужно чтобы одна накладывалась на др.
Нажмите, чтобы раскрыть...

вот тут разбирали что-то похожее http://wmasteru.ru/threads/рамка.20974/