Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Вопрос по float:left + clear:both и двухколоночной верстке

Вопрос по float:left + clear:both и двухколоночной верстке


     10.12.2012    Общие вопросы по вёрстке    2220

вопрос
Много разглагольствовать не буду, предлагаю сразу обратить внимание на скрины:


Ответил: ПафНутиЙ


 CSS

Комментарии пользователей (12)

TheImDim
18

327 | 291

TheImDim - 10 декабря 2012 19:27 - Юзер

Не совсем понятно что тебе нужно, если тебе нужно чтобы новости в одном блоке выводились, а меню в другом как например на этом сайте, то просто делаешь так:


#wrapper{width:900px;padding:10px;margin:20px auto;background:#f3f5f7;border:1px solid #ccc; float:left}
#content{ {float:left;}


и поменяй местами блоки #content и #wrapper, а то как-то по китайски

Sander
1126

1638 | 1204

Sander - 10 декабря 2012 19:40 - Эксперт

Стиль clear:both опускает блок первой новости до нижней полосы правого блока.
и поменяй местами блоки #content и #wrapper, а то как-то по китайски
наверно имел ввиду #content и #side ?

BR0kEN, в твоем варианте исключается резиновость контента...

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

BR0kEN
163

235 | 275

BR0kEN - 10 декабря 2012 19:55 - Эксперт

Sander, исправил код.

Sander
1126

1638 | 1204

Sander - 10 декабря 2012 20:12 - Эксперт

width:65%;
width:33%;

>_>
Я ж не "на глаз" разбиваю колонки.
Ширина правой фиксированная, 300px. Правая занимает все оставшееся место, автоматически.

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 10 декабря 2012 20:25 - Админ

CSS:
* {
    margin: 0;
    padding: 0;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 150px;
    background: #FFE680;
}


/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#content {
    padding: 0 320px 0 0;
}

.story{padding:0 10px 10px;margin-bottom:20px;background:#f0f0f0;border:1px solid #e0e0e0;}
.story h1{font-size:16px;padding:10px 0;font-weight:bold;}
.story img {
    float: left;
    padding: 0 10px 10px 0;
    overflow: hidden;
    width:200px;
    height:120px;
}


/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
    float: left;
    margin-right: -3px;
    width: 300px;
    margin-left: -300px;
    position: relative;
    background: #FFACAA;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
    height: 100px;
    background: #BFF08E;
}

.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Каков вопрос - таков и ответ. Просто помните об этом.

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 10 декабря 2012 20:25 - Админ

HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />

</head>

<body>

<div id="wrapper">

    <header id="header">
        <strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
    </header><!-- #header-->

    <section id="middle">

        <div id="container">
            <div id="content">
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quasi reiciendis amet odio esse laborum tempora corporis cupiditate maiores aliquam qui sequi earum veritatis iusto unde. Ipsa aut velit omnis possimus eum dolores eius ea doloremque dicta natus voluptate nulla ratione earum id nihil consectetur sunt rem. Corrupti alias impedit quisquam facere molestias voluptatibus sit ipsum aspernatur libero fugit error dicta nam numquam assumenda aut sunt delectus nisi aperiam quaerat pariatur nobis adipisci quia est odio ullam deserunt architecto maxime sequi recusandae optio temporibus soluta consequatur iste nostrum eligendi tempora enim dolor. Quis et recusandae pariatur commodi placeat rerum aperiam quaerat dolore impedit necessitatibus voluptatum veritatis porro tempore facilis dolores cumque deserunt ipsa incidunt accusantium assumenda tenetur explicabo optio asperiores excepturi temporibus praesentium veniam soluta itaque reiciendis quos obcaecati odit minima error! Placeat neque eos maiores blanditiis nesciunt quod perspiciatis distinctio accusantium necessitatibus at facilis dolores voluptates omnis alias reiciendis.</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
            </div><!-- #content-->
        </div><!-- #container-->

        <aside id="sideRight">
            <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
        </aside><!-- #sideRight -->

    </section><!-- #middle-->

    <footer id="footer">
        <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
    </footer><!-- #footer -->

</div><!-- #wrapper -->

</body>
</html>

Каков вопрос - таков и ответ. Просто помните об этом.

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 10 декабря 2012 20:27 - Админ

http://csstemplater.com/ - на будущее )) с этим сервисом на раздва получаешь готовую основу для вёрстки.

Каков вопрос - таков и ответ. Просто помните об этом.

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 10 декабря 2012 20:27 - Админ

figure зачем? без caption этот тег не несёт ровным счётом никакой пользы.

Каков вопрос - таков и ответ. Просто помните об этом.

BR0kEN
163

235 | 275

BR0kEN - 10 декабря 2012 20:28 - Эксперт

На всякий случай отредактировал еще раз.

Sander
1126

1638 | 1204

Sander - 10 декабря 2012 23:12 - Эксперт

Все, всем огромное спасибо.
Сделал по этому варианту, только без тегов header, section и т.п.

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

german2802
6 | 5

german2802 - 18 декабря 2012 16:38 - Юзер

Извените но куда этот код вставлять? что бы такое добавление новостей было?

Sander
1126

1638 | 1204

Sander - 18 декабря 2012 17:31 - Эксперт

Вы походу темой ошиблись

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы