Re[7]: div - Веб программирование

Есть такой вот

<!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?

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

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

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

Всё очень плохо. Надеюсь хватит такого ответа: .middle {overflow: auto;}

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

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

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

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

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

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

Здравствуйте, Аноним, Вы писали:

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

1. Слишком много кода, на такой простой макет) Какая стоит задача? Чтобы макет был не превышал 100% высоты браузера, с прижатым к низу футером?

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

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

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

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

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

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

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

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

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

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

Это пока адаптивность и кроссброузерность не требуется

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

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

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

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

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

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

Гы, ещё один ударенный.

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

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

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

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

A>Точно.

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

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

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

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

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

D>Гы, ещё один ударенный.

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

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

Ребят, оставайтесь на своих позициях, а я останусь на своих. Задачку шестилетней давности

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

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

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

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

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

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

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

A>Это пока адаптивность и кроссброузерность не требуется

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

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

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

Судя по вашим ответам, в веб-дизайне, Вы, простите меня конечно, но полный ноль! Застряли где-то там на уровне динозавров. Так что удачи!

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

Ну флоаты всё-таки достаточно адаптивные

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

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

А то некоторые ~~вступят в секту~~ начитаются статей и потом себе и коллегам своим жизнь портят

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

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

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

A>>Точно.

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

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

P>Судя по вашим ответам, в веб-дизайне, Вы, простите меня конечно, но полный ноль! Застряли где-то там на уровне динозавров. Так что удачи!

Да я бы рад к вам в секту, но ум-то, ум куда девать?!

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

P>Задачку шестилетней давности

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

Та задачка про HTML. Слив засчитан.

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

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

+1.

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

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

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

D>Я тут вообще не с тобой разговариваю. Ты сначала задачку реши, а потом рассказывай, что дивы могут, а что не могут, сопляк.

Я, кстати, наблюдаю прогресс — хотя бы в3ц-стандарты перестали упоминать в спорах про табличную вёрстку.

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

Моё решение первой задачи http://files.rsdn.ru/30591/easy.html
Пойдёт?

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

S>Моё решение первой задачи http://files.rsdn.ru/30591/easy.html
S>Пойдёт?

Вставь картинки, что ли, чтобы видно было, где они. Именно <img>, а не раскрашенные <div> или что ещё — поведение может отличаться. Но на вскидку — я не вижу, за счёт чего будет выполняться вот это условие: "все четыре промежутка должны быть одинаковыми". На нём погорели и в тот раз.

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

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

S>>Моё решение первой задачи http://files.rsdn.ru/30591/easy.html
S>>Пойдёт?

D>Вставь картинки, что ли, чтобы видно было, где они. Именно <img>, а не раскрашенные <div> или что ещё — поведение может отличаться. Но на вскидку — я не вижу, за счёт чего будет выполняться вот это условие: "все четыре промежутка должны быть одинаковыми". На нём погорели и в тот раз.

В Опере работает. Или никто не догадался justify попробовать тогда, или это justify допилили за эти годы

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

A>В Опере работает. Или никто не догадался justify попробовать тогда, или это justify допилили за эти годы

Картинки разного размера? Скинь что ли архивчик с html и картинками, а то лениво самому соображать.

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

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

S>>Моё решение первой задачи http://files.rsdn.ru/30591/easy.html
S>>Пойдёт?

D>Вставь картинки, что ли, чтобы видно было, где они. Именно <img>, а не раскрашенные <div> или что ещё — поведение может отличаться. Но на вскидку — я не вижу, за счёт чего будет выполняться вот это условие: "все четыре промежутка должны быть одинаковыми". На нём погорели и в тот раз.

1. Пример реализован на отлично, даже такой бредовый как этот.

2. Поведение будет такое же. тАК КАК В ЛЮБОМ СЛУЧАЕ display: inline-block;

Зачем вставлять именно картинку, если можно реализовать через background-image

3. Милый, сверни окошечко браузера и потяни за стрелочку, и ты увидишь как при уменьшении размера окна расстояние остается одинаковое. Правда при планшетном разрешении они летят вниз, но это уже отдельный разговор.

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

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

S>Моё решение первой задачи http://files.rsdn.ru/30591/easy.html
S>Пойдёт?

А вот в ИЕ9 — с картинками уже не работает

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

P>Зачем вставлять именно картинку, если можно реализовать через background-image

Вот когда напорешься, что <img> и background-image в некоторых ситуациях ведут себя по-разному, тогда и узнаешь.

P>3. Милый, сверни окошечко браузера и потяни за стрелочку, и ты увидишь как при уменьшении размера окна расстояние остается одинаковое. Правда при планшетном разрешении они летят вниз, но это уже отдельный разговор.

В ИЕ9 и ниже — не работает. В старших я не смотрел, может тоже не работает.

Для справки — в США доля ИЕ7,8,9 — 23%. Если бы ты для американского рынка писал сайты, ты бы это знал. Ой, ты ведь именно для этого рынка и пишешь

Я так понимаю, эти 23% списал так же как и меня, в динозавры?

P>Зачем вставлять именно картинку, если можно реализовать через background-image

Я правильно понимаю, что если тебе дать галерею картинок писать, то ты всё сделаешь через бэкграунд?

IMG тоже что ли в вашей секте считается "плохим тоном"???

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

P>>Зачем вставлять именно картинку, если можно реализовать через background-image

A>Я правильно понимаю, что если тебе дать галерею картинок писать, то ты всё сделаешь через бэкграунд?

A>IMG тоже что ли в вашей секте считается "плохим тоном"???

Ух ты, а кто тут у нас пишет галереи картинок как 10 лет назад????

С отрывом от движка и JS

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

P>>3. Милый, сверни окошечко браузера и потяни за стрелочку, и ты увидишь как при уменьшении размера окна расстояние остается одинаковое. Правда при планшетном разрешении они летят вниз, но это уже отдельный разговор.

A>В ИЕ9 и ниже — не работает. В старших я не смотрел, может тоже не работает.

A>Для справки — в США доля ИЕ7,8,9 — 23%. Если бы ты для американского рынка писал сайты, ты бы это знал. Ой, ты ведь именно для этого рынка и пишешь

Я так понимаю, эти 23% списал так же как и меня, в динозавры?

Ну во-первых, я про ИЕ вообще не заикалась! А во-вторых, статистику я знаю) Спасибо) А еще я знаю что 80% ТЗ состоит из требований использовать семантику HTML5, и ни какой табличной верстки

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

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

P>>Зачем вставлять именно картинку, если можно реализовать через background-image

D>Вот когда напорешься, что <img> и background-image в некоторых ситуациях ведут себя по-разному, тогда и узнаешь.

Да знаю я)) Согласна, тут прозвучала золотая мысль "нужно использовать по обстоятельству"

Но давайте как перенесем все это в реальный мир, где для реализации практически всех графических элементов сайта, будут использовать именно background-image

img же как отдельный элемент контента веб-страницы, нужно уже рассматривать непосредственно с плагинами js, php

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

P>Ух ты, а кто тут у нас пишет галереи картинок как 10 лет назад????

С отрывом от движка и JS

"С отрывом от движка"? Ух ты, а кто у нас не представляет себе, что может возникнуть потребность написать свою галерею, а не юзать чужое готовое?

"и JS"? А кто тут у нас заодно расписывается в неспособности сделать сложную вёрстку, не прибегая к JS? Фигли, у нас же сейчас не 10 лет назад, компы у юзеров мощные, можно всяким JS-говном их по делу и без дела грузить под завязку. (Особенно всякие JS-анимации радуют, особенно менюшек всяких. На десктопе, сплошь на C++ написанном, такого разврата хрен где увидишь. А в вебе — каждый норовит крутизну свою показать. Понарожают...)

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

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

S>>Моё решение первой задачи http://files.rsdn.ru/30591/easy.html
S>>Пойдёт?

D>Вставь картинки, что ли, чтобы видно было, где они. Именно <img>, а не раскрашенные <div> или что ещё — поведение может отличаться. Но на вскидку — я не вижу, за счёт чего будет выполняться вот это условие: "все четыре промежутка должны быть одинаковыми". На нём погорели и в тот раз.

Не отличается поведение img и div с inline-block http://files.rsdn.ru/30591/easy_img.html Можно, чтобы и в ie 6 и 7 работало и отступа снизу небыло и минимальное расстояние между картинками равно нулю. Задача сделана 1 к 1, плюс получаем адаптивность, в отличии от table.

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

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

A>>В Опере работает. Или никто не догадался justify попробовать тогда, или это justify допилили за эти годы

D>Картинки разного размера? Скинь что ли архивчик с html и картинками, а то лениво самому соображать.

<html lang="ru">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
.container {
    border: 1px solid black;
    text-align: justify;
}
.container:after {
    content: "";
    display: inline-block;
    width: 100%;
}
.container .padding {
    width: 0px;
    display: inline-block;
}
.img1, .img2, .img3 {
    display: inline-block;
    vertical-align: top;
}
.img1{
    background:red;

}
.img2{
    background:green;

}
.img3 {
    background:blue;

}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="padding"></div>
      <div class="img1">
        <img src="http://img.gazeta.ru/files3/969/5755969/188113766-pic150-150x100-40830.jpg">
      </div>
      <div class="img2">
        <img src="http://img.gazeta.ru/files3/977/5756977/RTX15GJS-pic330-330x220-69609.jpg">
      </div>
      <div class="img3">
        <img src="http://img.gazeta.ru/files3/81/5757081/TASS_5426285-pic148-148x98-26648.jpg">
      </div>
      <div class="padding"></div>
    </div>
  </body>
</html>

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

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

Этот форум сделан на фреймах. И офигительно удобен!

P> и ни какой табличной верстки

Ну сектанты заказывают сайты другим сектантам.

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

S>Не отличается поведение img и div с inline-block http://files.rsdn.ru/30591/easy_img.html Можно, чтобы и в ie 6 и 7 работало и отступа снизу небыло и минимальное расстояние между картинками равно нулю. Задача сделана 1 к 1, плюс получаем адаптивность, в отличии от table.

Допустим, чёрт с ним с IE7, будем считать, что зачёт.

Что в данном случае понимается под адаптивностью? Что картинки, не поместившиеся в ширину экрана, перенесутся на следующую строку? Это может не соответствовать задумке.

А вообще, лично меня всё равно не убедило.

Во-первых, использование сугубо текстового стиля для layout-а здесь выглядит как чистый хак, а во-вторых, показательна фраза avpavlov'а: "Или никто не догадался justify попробовать тогда, или это justify допилили за эти годы". Оно примерно так всегда и происходит: чтобы сделать на дивах что-то нетривиальное, приходится пробовать и пробовать то да сё. Продираясь через глюки и несовместимости браузеров.

D>Оно примерно так всегда и происходит: чтобы сделать на дивах что-то нетривиальное, приходится пробовать и пробовать то да сё. Продираясь через глюки и несовместимости браузеров.

только хотел это написать

Здравствуйте, Senyai,

Короче, с тебя теперь решение второй (моей) задачи (div.header фиксированной высоты, div.footer фиксированной высоты, всё что между ними — div.content, если суммарная высота страницы < window.clientHeight, растянуть content, чтобы подвал был прижат к низу). Если смогёшь коротенько (и желательно без float-ов), благодарность моя не будет знать границ.

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

D>Короче, с тебя теперь решение второй (моей) задачи (div.header фиксированной высоты, div.footer фиксированной высоты, всё что между ними — div.content, если суммарная высота страницы < window.clientHeight, растянуть content, чтобы подвал был прижат к низу). Если смогёшь коротенько (и желательно без float-ов), благодарность моя не будет знать границ.

Если я правильно понял http://files.rsdn.ru/30591/easy_footer.html

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

P>Здравствуйте, Аноним, Вы писали:

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

P>1. Слишком много кода, на такой простой макет) Какая стоит задача? Чтобы макет был не превышал 100% высоты браузера, с прижатым к низу футером?

СМотрите. Надо получить такой макет.
при этом у всех элементов фиксированный размеры (ширина, высота), КРОМЕ высоты LeftContentDiv.
Соотвественно Footer должен быть прибит сразу после LeftContentDiv

                                              Header 
                       ______________________________________________
                        |      RightContentDiv1
                        |________________________
                        |      RightContentDiv2
                        LeftContentDiv  |________________________
                        |      RightContentDiv3
                        ____________________|_________________________

                         Footer

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

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

S>Всё очень плохо. Надеюсь хватит такого ответа: .middle {overflow: auto;}

не помогло. Смотрите что мне надо здесь

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

P>Здравствуйте, Аноним, Вы писали:

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

P>1. Слишком много кода, на такой простой макет) Какая стоит задача? Чтобы макет был не превышал 100% высоты браузера, с прижатым к низу футером?

Сделал.
вот код

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
html, body{
    height: 100%;
    margin: 0;
}
.wrapper {
    min-height: 100%;
    position: relative;
}
.page {
    padding-bottom: 100px;

}
.footer {
    position: absolute;
    bottom: 0px;
    height: 100px;
    background: yellow;
    width: 100%;
}
.header {
    background: aliceblue; /* Senyai's favorite color */
    padding: 10px;
}
.content {
    padding: 20px;
    width: 70%;
     float: left;
}
.rightContentMainDiv {         
      width: 20%;    
      position: relative;
      background: green;     
      height: 500px;
    }
.rightContentDiv1 {
      width: 100%;
      height: 150px;
      margin-top: 0px;            
      position: absolute;        
    }
.rightContentDiv2 {
      width: 100%;
      height: 150px;
      margin-top: 150px;
      position: absolute;     
    }
.rightContentDiv3 {
      width: 100%;
      height: 150px;
      margin-top: 300px;
      position: absolute;     
    }
.clearfix {
      clear: both;
      }
    </style> 
</head>
<body>
<div class="wrapper">
    <div class="page">
        <div class="header">Header</div>
        <div class="contentContainer clearfix">
            <div class="content">            
                             Solution
                Place the image element (as shown in Figure 4-44) inside a div element with the
                class attribute set to imgholder:
            </div>
            <div class="rightContentMainDiv">
                <div class="rightContentDiv1">
                   rightContentDiv1
                </div>
               <div class="rightContentDiv2">
                  rightContentDiv2
                </div>
                <div class="rightContentDiv3">
                  rightContentDiv3
                </div>
            </div>
          </div>
    </div>
    <div class="footer clearfix">
      Footer
    </div>
</div>
</body>
</html>

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

S>Если я правильно понял http://files.rsdn.ru/30591/easy_footer.html

Блин, точно, сам же делал на работе буквально месяц назад, только не с padding-bottom, а margin-bottom. Однако дядя тормоз. Спасибо!

D>только не с padding-bottom, а margin-bottom
(т.к. там на content надо было скроллбар сажать: overflow:scroll)

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

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

S>Всё очень плохо. Надеюсь хватит такого ответа: .middle {overflow: auto;}

Сделал. ваше решние использовал отсюда здесь

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

S>Если я правильно понял
А можете мне почти такой же сделать?

Хочется, чтобы подвал рос при необходимости. Так же, как на таблицах вел себя при сужении страницы. Т.е. если минимальная высота содержимого подвала меньше 100px, то весь подвал 100px. Иначе его высота совпадает с высотой содержимого. В вашем примере на дивах лишнее содержимое вываливается вниз. Мне хотя бы решение для ff и chrome, IE не нужен.

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

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

S>>Если я правильно понял
M>А можете мне почти такой же сделать?

Хочется, чтобы подвал рос при необходимости. Так же, как на таблицах вел себя при сужении страницы. Т.е. если минимальная высота содержимого подвала меньше 100px, то весь подвал 100px. Иначе его высота совпадает с высотой содержимого. В вашем примере на дивах лишнее содержимое вываливается вниз. Мне хотя бы решение для ff и chrome, IE не нужен.

Могу предложить такое решение http://files.rsdn.ru/30591/easy_dynamic_footer.html. В ie работаеть не будет.

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

S>Могу предложить такое решение http://files.rsdn.ru/30591/easy_dynamic_footer.html.
Спасибо, круто!

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

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

Немного примеров "Современного, кроссброузерного и адаптивного дизайна" из рук сектантов, которые ~~"права купили, а ездить не купили"~~ про прогрессивные методы статью прочитали, но ни хрена в ней не поняли.

http://onf.ru/2013/11/07/onf-otzy-vaet-zakonoproekt-o-zoloty-h-parashyutah/

Три картинки подряд: Хром, ИЕ и Опера. Ни один броузер с отрисовкой не справился. Хром и ИЕ не смогли определить, что сайт не вписывает в ширину экрана и не отрисовали горизонтальный скролбар. Опера определила, но из-за флоатов отправила контент далеко вниз.

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

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

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

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

A>Немного примеров "Современного, кроссброузерного и адаптивного дизайна" из рук сектантов, которые ~~"права купили, а ездить не купили"~~ про прогрессивные методы статью прочитали, но ни хрена в ней не поняли.

A>http://onf.ru/2013/11/07/onf-otzy-vaet-zakonoproekt-o-zoloty-h-parashyutah/

A>Три картинки подряд: Хром, ИЕ и Опера. Ни один броузер с отрисовкой не справился. Хром и ИЕ не смогли определить, что сайт не вписывает в ширину экрана и не отрисовали горизонтальный скролбар. Опера определила, но из-за флоатов отправила контент далеко вниз.

A>На таблицах это сверстала бы даже обезьяна. Но сектантам религия не позволяет использовать простые решения

A>

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

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

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

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

A>Немного примеров "Современного, кроссброузерного и адаптивного дизайна" из рук сектантов, которые ~~"права купили, а ездить не купили"~~ про прогрессивные методы статью прочитали, но ни хрена в ней не поняли.

A>http://onf.ru/2013/11/07/onf-otzy-vaet-zakonoproekt-o-zoloty-h-parashyutah/

A>Три картинки подряд: Хром, ИЕ и Опера. Ни один броузер с отрисовкой не справился. Хром и ИЕ не смогли определить, что сайт не вписывает в ширину экрана и не отрисовали горизонтальный скролбар. Опера определила, но из-за флоатов отправила контент далеко вниз.

A>На таблицах это сверстала бы даже обезьяна. Но сектантам религия не позволяет использовать простые решения

A>

Кстати, о рукожопасти, свидетельствует даже разный шрифт на страницах.

P>Кстати, о рукожопасти, свидетельствует даже разный шрифт на страницах.

Шрифты — забота дизайнера, а не верстальщика

P>Ну и что, теперь? Будем верстать как обезьяны??? Если у данных программистов руки из ж.пы растут, это еще ничего не значит.

Технология должна облегчать труд, а не усложнять. Разве это не очевидно?

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

P>>Ну и что, теперь? Будем верстать как обезьяны??? Если у данных программистов руки из ж.пы растут, это еще ничего не значит.

A>Технология должна облегчать труд, а не усложнять. Разве это не очевидно?

1. Вы правы, шрифты — забота дизайнера. Вот только подключает их верстальщик, и если в разных браузерах шрифты воспроизводиться по разному, значит подключены они не правильно, а это уже забота именно верстальщика.

2.Да должна, но Вы тут нас сектой назвали, а сами то?!

+ Технологии развиваются, люди (особенно в том сегменте, где работаю я) требуют чтобы веб-страница адаптировалась под мобильные устройства и т.д. Именно адаптировалась, а не растягивалась. Кстати, вот Вам ссылочка для размышлений: http://toster.ru/q/41644

P>2.Да должна, но Вы тут нас сектой назвали, а сами то?!

+ Технологии развиваются, люди (особенно в том сегменте, где работаю я) требуют чтобы веб-страница адаптировалась под мобильные устройства и т.д. Именно адаптировалась, а не растягивалась. Кстати, вот Вам ссылочка для размышлений: http://toster.ru/q/41644

— нельзя перегруппировать блоки для узких страниц

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

Более того, мне намного больше нравится как работает автоматическое переразмещение контента в Опера Мини (или режим Fit to Width в Опера Декстоп), чем потуги заметной части верстальщиков. При этом Оперы умеют и таблицы перевёрстывать.

или в версии для печати только с помощью CSS

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

Какое это имеет отношение к сравнению 2х вёрсток? Это конкретный случай, который стоит сделать на ДИВах

— у ячеек width работает как min-width, при этом алгоритмы ратяжения ячеек не документированы и ведут себя непредсказуемо, из-за этого они могут непредсказуемо растягиваться, и хуже того, при динамической замене контента они не всегда сжимаются обратно и остаются дыры. Одно длинное слово или картинка может растянуть всю страницу.

Дивы не решают эту проблему автоматически.

— фиксированное, абсолютное и относительное позиционирование неюзабельно в таблицах

Вот это моё любимое место, всегда почему-то идёт в компании "нельзя перегруппировать блоки для язких экранов". А в абсолютные позиции прибивать — это, конечно, облегчает перегруппировку

— ячейки не получится перетаскивать drag-n-drop

Дивы не решают эту проблему автоматически.

— трудно манипулировать DOM (надо хитро вставлять и убирать дополнительные элменеты)

Чепуха

— верстка получается замусоренная кучей лишних тегов, которые тяжело читать и в которых тяжело разобраться. Это не HTML, а лапша. Особенно тяжело, когда таблицы вложены друг в друга и раскиданы по куче шаблонов.

ЛОЛ

— нельзя поместить контент в коде первым, а меню в шапке — вторым (некоторые сеошники считают, что это улучшает индексацию)

Это вообще моя 2я главная претензия к ДИВам, контент во время загрузки скачет по странице и мешает начать работу

— верстка таблицами всегда была костылем (и это несемантично), с поддержкой CSS2 (появилась более 10 лет назад) таблицы стали не нужны. 10 лет назад они уже стали ненужными.

Глупость

PS

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

A>

A>или в версии для печати только с помощью CSS

При печати хорошим стилем является скрывать лишний контент, а не двигать. Скрытие прекрасно работает и для таблиц.

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

A>Обращаю твоё внимание, что сектантами я вас называю за упёртость в отрицании табличной вёрстки. Несектанты считают, что оба способа вёрстки являются инструментами из арсенала верстальщика, и должны выбираться исходя из простоты и удобства в данном конкретном случае.

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

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

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

Ну в этом я с Вами, допустим согласна, часто сталкиваюсь с необходимостью переделывать чью-то работу)

A>Более того, мне намного больше нравится как работает автоматическое переразмещение контента в Опера Мини (или режим Fit to Width в Опера Декстоп), чем потуги заметной части верстальщиков. При этом Оперы умеют и таблицы перевёрстывать.

Угу

А другие браузеры?

A>Вот это моё любимое место, всегда почему-то идёт в компании "нельзя перегруппировать блоки для язких экранов". А в абсолютные позиции прибивать — это, конечно, облегчает перегруппировку.

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

A>Дивы не решают эту проблему автоматически.

А таблицы не решают ее вообще

A>

A> — верстка получается замусоренная кучей лишних тегов, которые тяжело читать и в которых тяжело разобраться. Это не HTML, а лапша. Особенно тяжело, когда таблицы вложены друг в друга и раскиданы по куче шаблонов.

A>ЛОЛ

Аргументируйте?)

A>

A> — нельзя поместить контент в коде первым, а меню в шапке — вторым (некоторые сеошники считают, что это улучшает индексацию)

A>Это вообще моя 2я главная претензия к ДИВам, контент во время загрузки скачет по странице и мешает начать работу

Примеры в студию.

A>

A> — верстка таблицами всегда была костылем (и это несемантично), с поддержкой CSS2 (появилась более 10 лет назад) таблицы стали не нужны. 10 лет назад они уже стали ненужными.

A>Глупость

Аргументируйте?)

A>>Дивы не решают эту проблему автоматически.
P>А таблицы не решают ее вообще

Таблицы решают её ровно с теми же трудозатратами.

A>>

A>> — верстка получается замусоренная кучей лишних тегов, которые тяжело читать и в которых тяжело разобраться. Это не HTML, а лапша. Особенно тяжело, когда таблицы вложены друг в друга и раскиданы по куче шаблонов.

A>>ЛОЛ

P>Аргументируйте?)

http://htmlbook.ru/content/?id=100

Правое меню, пример как дивы помогают избежать "лапши"

<div id="sidebar">
  <div id="views-top-block" class="block">
    <h2 class="block_title">Популярные материалы</h2>
    <div class="block_content ">
      <div class="view view-top view-id-top view-display-id-block view-dom-id-394f43b50b790850c7424c699a1b8ef3">
        <div class="view-content">
          <div class="item-list">
            <ul>
              <li class="">
                <div class="views-field views-field-title">
                  <span class="field-content">
                    <a href="/samhtml">Самоучитель HTML4</a>
                  </span>
                </div>
              </li>

A>>

A>> — нельзя поместить контент в коде первым, а меню в шапке — вторым (некоторые сеошники считают, что это улучшает индексацию)

A>>Это вообще моя 2я главная претензия к ДИВам, контент во время загрузки скачет по странице и мешает начать работу

P>Примеры в студию.

Пример прямо в его фразе.

A>>

A>> — верстка таблицами всегда была костылем (и это несемантично), с поддержкой CSS2 (появилась более 10 лет назад) таблицы стали не нужны. 10 лет назад они уже стали ненужными.

A>>Глупость

P>Аргументируйте?)

Ну т.е. глупость почему-то аргументировать не надо, а вот возражения должны быть аргументированы?

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

Хорошо, давайте проведем эксперимент

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

P>Хорошо, давайте проведем эксперимент

Запасусь-ка я попкорном на всякий случай, вдруг правда до эксперимента дойдёт. Правда, я тут кое-кому уже предлагал провести эксперимент. Но эта кое-кто ограничилась пустым трёпом, а эксперимент провёл Senyai, получив плюс в карму. За счёт трепла.

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

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

P>>Хорошо, давайте проведем эксперимент

D>Запасусь-ка я попкорном на всякий случай, вдруг правда до эксперимента дойдёт. Правда, я тут кое-кому уже предлагал провести эксперимент. Но эта кое-кто ограничилась пустым трёпом, а эксперимент провёл Senyai, получив плюс в карму. За счёт трепла.

Смотри не подавись, случайно.

	От:	Аноним
	Дата:	17.11.13 14:45
	Оценка:

	От:	avpavlov
	Дата:	17.11.13 15:37
	Оценка:	3 (1) +1

От:	Senyai	http://www.arseniy.net
Дата:	17.11.13 16:01
Оценка:

	От:	proxy25
	Дата:	17.11.13 16:16
	Оценка:	-2

	От:	avpavlov
	Дата:	17.11.13 16:32
	Оценка:

От:	dimgel	https://github.com/dimgel
Дата:	17.11.13 17:12
Оценка: