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

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


     10.12.2012    Все вопросы » Общие вопросы по вёрстке    4140

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


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


 CSS

12 комментариев

TheImDim
Юзер

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
PHP-developer

Sander - 10 декабря 2012 19:40 -

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

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

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

Telegram: @sandev
Skype: Sander8804

BR0kEN
Эксперт

BR0kEN - 10 декабря 2012 19:55 -

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

Sander
PHP-developer

Sander - 10 декабря 2012 20:12 -

width:65%;
width:33%;

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

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

Telegram: @sandev
Skype: Sander8804

ПафНутиЙ
Админ

ПафНутиЙ - 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; }

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

ПафНутиЙ
Админ

ПафНутиЙ - 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>

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

ПафНутиЙ
Админ

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

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

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

ПафНутиЙ
Админ

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

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

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

BR0kEN
Эксперт

BR0kEN - 10 декабря 2012 20:28 -

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

Sander
PHP-developer

Sander - 10 декабря 2012 23:12 -

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

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

Telegram: @sandev
Skype: Sander8804

german2802
Юзер

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

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

Sander
PHP-developer

Sander - 18 декабря 2012 17:31 -

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

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

Telegram: @sandev
Skype: Sander8804

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

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

наверх