0

Здравствуйте!

Есть задание: сверстать страничку по макету. Вроде бы всё получается, но с sidebar'ом что-то не так. На пикчах оригинал, и что сверстал я на данный момент. Вопрос такой: как переместить sidebar вверх, почему не перемещается? Стоит же вроде float: right;.

Оригинал: http://i64.fastpic.ru/big/2014/0930/26/ac521fc469ea21650795f447130cb126.png

Что у меня: http://i64.fastpic.ru/big/2014/0930/82/23272f7dfa9f5e690a48301bce146582.jpg

<!DOCTYPE html> <html>
    <head>
        <title>clear breeze</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>clear breeze</h1>
                <p><em>template design by zzz templates</em></p>
            </div>
            <div id="page">
                <div id="menu">
                    <ul>
                        <li><a href="http://ya.ru">Home</a></li>
                        <li><a href="http://ya.ru">Blog</a></li>
                        <li><a href="http://ya.ru">About</a></li>
                        <li><a href="http://ya.ru">Contact</a></li>

                    </ul>
                </div>
                <div id="banner"></div>
                <div class="content">
                    <h2 class="title">Welcome to Clear Breeze</h2>
                    <p class="meta">Sunday, April 26, 2009 7:27 AM Posted by 
                    <u>Someone</u></p>
                    <p class="text">Sed Iacus. Donec lectus. Nullam pretius nibh 
                        ut tupris. Nam bibendum. In nulla tortor, elementum vel, 
                        tempor at, varius non, purus. Mauris vitae nisl nec 
                        consectetuer. Donec ipsum. Proin imperdiet est. 
                        Phasellus <a href="http://ya.ru">dapibus semper uma</a>. 
                        Pellentesque ornare, orci in consectetuer hendrerit, 
                        urna elit eleifrend nunc, ut consectetuer nisl felis ac 
                        diam. Etiam non felis. Donec ut ante. In id eros.</p>
                    <p class="links"><a href="http://ya.ru">View Full Story</a></p>
                    <p class="links"><a href="http://ya.ru">View Comments</a></p>
                </div>
                <div class="content">
                    <h2 class="title">Lorem Ipsum Sed Aliquam</h2>
                    <p class="meta">Sunday, April 26, 2009 7:27 AM Posted by 
                    <u>Someone</u></p>
                    <p class="text">Sed Iacus. Donec lectus. Nullam pretius nibh 
                        ut tupris. Nam bibendum. In nulla tortor, elementum vel, 
                        tempor at, varius non, purus. Mauris vitae nisl nec 
                        consectetuer. Donec ipsum. Proin imperdiet est. 
                        Phasellus <a href="http://ya.ru">dapibus semper uma</a>. 
                        Pellentesque ornare, orci in consectetuer hendrerit, 
                        urna elit eleifrend nunc, ut consectetuer nisl felis ac 
                        diam. Etiam non felis. Donec ut ante. In id eros.</p>
                    <p class="links"><a href="http://ya.ru">View Full Story</a></p>
                    <p class="links"><a href="http://ya.ru">View Comments</a></p>
                </div>
                <div class="content">
                    <h2 class="title">Lorem Ipsum Sed Aliquam</h2>
                    <p class="meta">Sunday, April 26, 2009 7:27 AM Posted by 
                    <u>Someone</u></p>
                    <p class="text">Mauris vitae nisl nec metus placerat 
                        consectetuer. Donec ipsum. Proin imperdiet est. Sed 
                        Iacus. Donec lectus. Nullam pretium nibh ut turpis. Nam 
                        bibendum. In nulla tortor, elementum vel, tempor at, 
                        varius non, purus. Mauris vitae nisl nec metus placerat 
                        consectetuer. Donec ipsum. Proin imperdiet est. 
                        Phasellus<a href="http://ya.ru">dapibus semper uma</a>. 
                        Pellentesque ornare, orci in consectetuer hendrerit, 
                        urna elit eleifrend nunc, ut consectetuer nisl felis ac 
                        diam.</p>
                    <p class="links"><a href="http://ya.ru">View Full Story</a></p>
                    <p class="links"><a href="http://ya.ru">View Comments</a></p>
                </div>
                <div id="sidebar">1111qqqqqqq
                    <div id="sidebar_top">qqqqq</div>
                    <div id="sidebar_cen"></div>
                </div>

            </div>
            <div id="footer"></div>
        </div>
    </body>
 </html>

    body{
    background-image: url(images/img01.jpg);
    background-position: top left;
    background-repeat: repeat-x;
    font-family: Arial;
    margin: 0;
    padding: 0;
}

#header{
    width: 940px;
    height: 128px;
    margin: 0 auto;
    padding: 40px 0px 0px 40px;
}

#header h1, #header p{
    margin: 0px;
    font-weight: normal;
    color: #FFFFFF;
}

#header h1{
    padding-top: 15px;
    font-size: 48px;
}

#header p {
    margin-top: -4px;
    font-size: 13px;
    color: #FFA25D;
}

#menu {
    float: left;
    width: 730px;
    height: 59px;
    padding: 0px 0px 0px 0px;
    background: url(images/img02.jpg) no-repeat left top;
}

#page{
    width: 980px;
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
}

#banner{
    float: left;
    background: url(images/img03.jpg) no-repeat bottom left;
    width: 730px; 
    height: 313px;
}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 40px;
    list-style: none;
}

#menu li {
    float: left;
    height: 31px;
    padding: 28px 24px 0px 24px;
    background: url(images/img09.jpg) no-repeat right 28px;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #FF9EA2;
}

#menu a{
    text-decoration: none;
    color: #FF9EA2;
}

#sidebar{
    float: right;
    width: 250px;
    margin: 0;
    padding: 0;
}

#sidebar_top{
    float: right;
    width: 250px;
    font-family: Arial;
    font-size: 12px;
    //margin-top: -59px;
    background: url(images/img05.jpg) no-repeat left;

    padding: 200px 0px 170px 0px;
}
#sidebar_cen{
    float: right;
    width: 250px;
    font-family: Arial;
    font-size: 12px;
    padding: 0px 0px 200px 0px;
    background: url(images/img06.jpg) repeat-y left top;
}

#sidebar_bot{
    float: right;
    width: 250px;
    font-family: Arial;
    font-size: 12px;

    background: url(images/img07.jpg) norepeat left ;
}

.content{
    width: 730px;
    height: 60px;
    float: left;
    margin-bottom: 240px;
    margin-top: 8px;
    background: url(images/img04.jpg) no-repeat left top;
}

.title{
    height: 44px;
    padding: 0px 30px 10px 40px;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 30px;
    color: #A7D100;
    font-weight: normal;
}

.meta{
    height: 32px;
    margin-left: 2px;
    margin-top: -40px;
    padding: 0px 30px 2px 40px;
    font-family: Arial;
    font-weight: normal;
    font-style: italic;
    font-size: 11px;
    color: #C7A302;
}

.text{
    font-family: Arial;
    font-size: 12px;
    color: #8A8A8A;
    line-height: 240%;
    text-align: justify;
    padding: 0px 30px 10px 40px;
}

.text a{
    color: #961A06;
}

.links{
    display: block;
    width: 120px;
    height: 18px;
    margin: 0px; 
    padding: 3px 0px 0px 40px;
    background: url(images/img06.gif) no-repeat left top;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: none;
    font-weight: bold;
    color: #961A06;
}

.links a{
    text-decoration: none;
    color: #961A06;
}

2 ответа 2

2

Оберни все div class="content"> в один большой div и размести sidebar на одном уровне с ним.

3
  • Спасибо, помогло. Только еще проблема нарисовалась: у меня в #sidebar_top прописано - padding: 200px 0px 170px 0px;. Почему, если поставить все на ноль, то sidebar вообще весь пропадает?
    – compl
    30 сен 2014 в 16:17
  • Видимо потому, что блоки, высота которых равна 0, не могут отображаться в браузере. Вставь код в jsfiddle.net, так на словах сложно код обсуждать.
    – Get
    30 сен 2014 в 16:38
  • @Get, да, спасибо. :) Добавил высоту.
    – compl
    30 сен 2014 в 17:01
1

http://jsfiddle.net/ua7vxxLc/

вот посмотрите это http://htmlbook.ru/layout

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.