div
От: Аноним  
Дата: 17.11.13 14:45
Оценка:
Есть такой вот 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Cookbook</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <style type="text/css">
        <!--

        .wrapper {
            width: 1100px;
            margin: 0 auto;
            min-height: 100%;
            height: auto !important;
            height: 100%;
        }


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


            /* Middle
            -----------------------------------------------------------------------------*/
        .middle {
            width: 100%;
            padding: 0 0 100px;
            position: relative;
            height: auto !important;
            height: 100%;
        }
        .middle:after {
            display: table;
            clear: both;
            content: '';
        }
        .container {
            width: 100%;
            float: left;
            overflow: hidden;
        }
        .content {
            padding: 0 0 0 1120px;
        }


            /* Left Sidebar
            -----------------------------------------------------------------------------*/
        .left-sidebar {
            float: left;
            width: 700px;
            margin-left: -100%;
            position: relative;
            background: #B5E3FF;
        }


            /* Right Sidebar
            -----------------------------------------------------------------------------*/
        .right-sidebar {
            float: left;
            width: 400px;
            margin-left: -100%;
            margin-top: 0px;
            left: 700px;
            position: relative;
            background: #FFACAA;
        }

        .right-sidebar2 {
            float: left;
            width: 400px;
            margin-left: -100%;
            margin-top: 120px;
            left: 700px;
            position: relative;
            background: #FFACAA;
        }

        .right-sidebar3 {
            float: left;
            width: 400px;
            margin-left: -100%;
            margin-top: 240px;
            left: 700px;
            position: relative;
            background: #FFACAA;
        }
            /* Footer
            -----------------------------------------------------------------------------*/
        .footer {
            width: 1100px;
            margin: -100px auto 0;
            height: 100px;
            background: #BFF08E;
            position: relative;
        }
            /**/
        -->
    </style>


</head>
<body>
    <div class="wrapper">
        <div class="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.
        </div><!-- .header-->
        <div class="middle">
            <div class="container">
                <div class="content">
                    <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
                </div><!-- .content-->
            </div><!-- .container-->

            <div class="left-sidebar">
                <strong>Left 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.
            </div><!-- .left-sidebar -->

            <div class="right-sidebar">
                <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.
            </div><!-- .right-sidebar -->
            <div class="right-sidebar2">
                <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.
            </div><!-- .right-sidebar -->
            <div class="right-sidebar3">
                <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.
            </div><!-- .right-sidebar -->
        </div><!-- .middle-->
    </div><!-- .wrapper -->

    <div class="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.
    </div><!-- .footer -->
</body>
</html>



вопрос. как сделать, чтобы footer динамически вставал сразу за middle?
Re: div
От: avpavlov  
Дата: 17.11.13 15:37
Оценка: 3 (1) +1
А>вопрос. как сделать, чтобы footer динамически вставал сразу за middle?

Таблицей сверстай
Re: div
От: Senyai Россия http://www.arseniy.net
Дата: 17.11.13 16:01
Оценка:
Здравствуйте, Аноним, Вы писали:
А>вопрос. как сделать, чтобы footer динамически вставал сразу за middle?

Всё очень плохо. Надеюсь хватит такого ответа: .middle {overflow: auto;}
Не бойтесь совершенства. Вам его не достичь. © Сальвадор Дали
Re[2]: div
От: proxy25  
Дата: 17.11.13 16:16
Оценка: -2
Здравствуйте, avpavlov, Вы писали:

А>>вопрос. как сделать, чтобы footer динамически вставал сразу за middle?

A>Таблицей сверстай


ПФФФФФФФФ вы бы еще фреймами посоветовали
Re[3]: div
От: avpavlov  
Дата: 17.11.13 16:32
Оценка:
P>ПФФФФФФФФ вы бы еще фреймами посоветовали

Фрэймами ещё хуже чем ДИВами. А ты статеек в интернете перечитал.
Re: div
От: proxy25  
Дата: 17.11.13 16:40
Оценка:
Здравствуйте, Аноним, Вы писали:

А>вопрос. как сделать, чтобы footer динамически вставал сразу за middle?


1. Слишком много кода, на такой простой макет) Какая стоит задача? Чтобы макет был не превышал 100% высоты браузера, с прижатым к низу футером?
Re[4]: div
От: proxy25  
Дата: 17.11.13 16:44
Оценка: -1 :)))
Здравствуйте, avpavlov, Вы писали:


P>>ПФФФФФФФФ вы бы еще фреймами посоветовали

A>Фрэймами ещё хуже чем ДИВами. А ты статеек в интернете перечитал.

Блочная верстка это один из самых прогрессивных методов сайтостроении. Табличная верстка уже давно считается плохим тоном. Это Вам говорит человек, который третий год работает Американский рынок.

Блочная верстка это: Современный, менее нагруженный, кросбраузерный, адаптивный дизайн.
Re[5]: div
От: avpavlov  
Дата: 17.11.13 17:11
Оценка: 1 (1) +1
P>адаптивный дизайн.

Точно. Только вот когда его используют там, где блоки нужно прибить к месту однозначным способом, адаптивный дизайн не нужен.

P>кросбраузерный

Я думал таблицы достаточно кроссброузерные. Разубеди меня.

P>менее нагруженный,

Это пока адаптивность и кроссброузерность не требуется А как только да, так сразу на сцене появляется пачка дивов, завязанных узлом.

P>Блочная верстка это один из самых прогрессивных методов сайтостроении. Табличная верстка уже давно считается плохим тоном. .... Современный

Ну вот только сектантские мантры и остались.
Re[5]: div
От: dimgel Россия https://github.com/dimgel
Дата: 17.11.13 17:12
Оценка:
Здравствуйте, proxy25, Вы писали:

P>Блочная верстка это один из самых прогрессивных методов сайтостроении. Табличная верстка уже давно считается плохим тоном. Это Вам говорит человек, который третий год работает Американский рынок.

P>Блочная верстка это: Современный, менее нагруженный, кросбраузерный, адаптивный дизайн.

Гы, ещё один ударенный. Третий год работает Американский рынок!!! На колени, ламеры!

Реши-ка на дивах вот эту
Автор: SchweinDeBurg
Дата: 20.07.07
 шестилетней давности задачку для начала. (Там в ответах моё решение на таблицах и 1-2 некорректных решения на дивах от ребят с опытом в разы поболее твоего.) Или хотя бы вот этот
Автор: dimgel
Дата: 24.04.11
 мой тривиальный примерчик на дивах перепиши. Кроссбраузерно и без скриптов, естественно.
Re[6]: div
От: dimgel Россия https://github.com/dimgel
Дата: 17.11.13 17:21
Оценка:
Здравствуйте, avpavlov, Вы писали:

P>>адаптивный дизайн.

A>Точно.

Я наверное отстал от жизни. Мне всегда казалось, что адаптивные как раз таблицы, которые могут автоматически вычислять относительную ширину колонок в зависимости от объёма контента. Не то чтобы конкретно эта фича была полезна в реальной жизни при вёрстке макета, а не собственно табличных данных (хотя пару фокусов со сложным многослойным фоном в шапке я с её помощью однажды забабахал — без скриптов), но у дивов её как раз нет.
Re[6]: div
От: proxy25  
Дата: 17.11.13 17:27
Оценка:
Здравствуйте, dimgel, Вы писали:

D>Здравствуйте, proxy25, Вы писали:

P>>Блочная верстка это один из самых прогрессивных методов сайтостроении. Табличная верстка уже давно считается плохим тоном. Это Вам говорит человек, который третий год работает Американский рынок.

P>>Блочная верстка это: Современный, менее нагруженный, кросбраузерный, адаптивный дизайн.

D>Гы, ещё один ударенный. Третий год работает Американский рынок!!! На колени, ламеры!

D>Реши-ка на дивах вот эту
Автор: SchweinDeBurg
Дата: 20.07.07
 шестилетней давности задачку для начала. (Там в ответах моё решение на таблицах и 1-2 некорректных решения на дивах от ребят с опытом в разы поболее твоего.) Или хотя бы вот этот
Автор: dimgel
Дата: 24.04.11
 мой тривиальный примерчик на дивах перепиши. Кроссбраузерно и без скриптов, естественно.


Ребят, оставайтесь на своих позициях, а я останусь на своих. Задачку шестилетней давности Может быть дашь мне задачку, когда и html не существовало???
Re[6]: div
От: proxy25  
Дата: 17.11.13 17:28
Оценка: :))
Здравствуйте, avpavlov, Вы писали:


P>>адаптивный дизайн.

A>Точно. Только вот когда его используют там, где блоки нужно прибить к месту однозначным способом, адаптивный дизайн не нужен.

P>>кросбраузерный

A>Я думал таблицы достаточно кроссброузерные. Разубеди меня.

P>>менее нагруженный,

A>Это пока адаптивность и кроссброузерность не требуется А как только да, так сразу на сцене появляется пачка дивов, завязанных узлом.

P>>Блочная верстка это один из самых прогрессивных методов сайтостроении. Табличная верстка уже давно считается плохим тоном. .... Современный

A>Ну вот только сектантские мантры и остались.

Судя по вашим ответам, в веб-дизайне, Вы, простите меня конечно, но полный ноль! Застряли где-то там на уровне динозавров. Так что удачи!
Re[7]: div
От: avpavlov  
Дата: 17.11.13 17:29
Оценка:
D>Я наверное отстал от жизни. Мне всегда казалось, что адаптивные как раз таблицы, которые могут автоматически вычислять относительную ширину колонок в зависимости от объёма контента. Не то чтобы конкретно эта фича была полезна в реальной жизни при вёрстке макета, а не собственно табличных данных (хотя пару фокусов со сложным многослойным фоном в шапке я с её помощью однажды забабахал — без скриптов), но у дивов её как раз нет.

Ну флоаты всё-таки достаточно адаптивные . Ещё если число колонок под ширину автоматом выстраивать, то таблицы мешаются.

Смысл-то не в том чтобы верстать дивами или таблицами, а в том, чтобы и дивами, и таблицами, в зависимости от задачи. Ну и флексбоксы потихоньку начинают распространяться.

А то некоторые вступят в секту начитаются статей и потом себе и коллегам своим жизнь портят
Re[7]: div
От: proxy25  
Дата: 17.11.13 17:32
Оценка:
Здравствуйте, dimgel, Вы писали:

D>Здравствуйте, avpavlov, Вы писали:

P>>>адаптивный дизайн.

A>>Точно.

D>Я наверное отстал от жизни. Мне всегда казалось, что адаптивные как раз таблицы, которые могут автоматически вычислять относительную ширину колонок в зависимости от объёма контента. Не то чтобы конкретно эта фича была полезна в реальной жизни при вёрстке макета, а не собственно табличных данных (хотя пару фокусов со сложным многослойным фоном в шапке я с её помощью однажды забабахал — без скриптов), но у дивов её как раз нет.

О Боги, скажи мне, что этого не могут дивы. Для справки, это называется "резиновый дизайн". Адаптивны и резиновый не одно и тоже, умник.
Re[7]: div
От: avpavlov  
Дата: 17.11.13 17:34
Оценка: +1 :))
P>Судя по вашим ответам, в веб-дизайне, Вы, простите меня конечно, но полный ноль! Застряли где-то там на уровне динозавров. Так что удачи!

Да я бы рад к вам в секту, но ум-то, ум куда девать?!
Re[7]: div
От: dimgel Россия https://github.com/dimgel
Дата: 17.11.13 17:35
Оценка:
Здравствуйте, proxy25, Вы писали:

P>Задачку шестилетней давности Может быть дашь мне задачку, когда и html не существовало???

Та задачка про HTML. Слив засчитан.
Re[8]: div
От: dimgel Россия https://github.com/dimgel
Дата: 17.11.13 17:35
Оценка:
Здравствуйте, avpavlov, Вы писали:

A>Смысл-то не в том чтобы верстать дивами или таблицами, а в том, чтобы и дивами, и таблицами, в зависимости от задачи.

+1.
Re[8]: div
От: dimgel Россия https://github.com/dimgel
Дата: 17.11.13 17:38
Оценка:
Здравствуйте, proxy25, Вы писали:

P>О Боги, скажи мне, что этого не могут дивы. Для справки, это называется "резиновый дизайн". Адаптивны и резиновый не одно и тоже, умник.

Я тут вообще не с тобой разговариваю. Ты сначала задачку реши, а потом рассказывай, что дивы могут, а что не могут, сопляк.
Re[9]: div
От: avpavlov  
Дата: 17.11.13 17:41
Оценка:
D>Я тут вообще не с тобой разговариваю. Ты сначала задачку реши, а потом рассказывай, что дивы могут, а что не могут, сопляк.

Я, кстати, наблюдаю прогресс — хотя бы в3ц-стандарты перестали упоминать в спорах про табличную вёрстку.
Re[6]: div
От: Senyai Россия http://www.arseniy.net
Дата: 17.11.13 18:13
Оценка:
D>Реши-ка на дивах вот эту
Автор: SchweinDeBurg
Дата: 20.07.07
 шестилетней давности задачку для начала. (Там в ответах моё решение на таблицах и 1-2 некорректных решения на дивах от ребят с опытом в разы поболее твоего.) Или хотя бы вот этот
Автор: dimgel
Дата: 24.04.11
 мой тривиальный примерчик на дивах перепиши. Кроссбраузерно и без скриптов, естественно.

Моё решение первой задачи http://files.rsdn.ru/30591/easy.html
Пойдёт?
Не бойтесь совершенства. Вам его не достичь. © Сальвадор Дали
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.