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

Здравствуйте, 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>Аргументируйте?)

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

	От:	Аноним
	Дата:	18.11.13 04:52
	Оценка:

	От:	Аноним
	Дата:	18.11.13 05:00
	Оценка:

	От:	Аноним
	Дата:	18.11.13 05:51
	Оценка:

От:	dimgel	https://github.com/dimgel
Дата:	18.11.13 05:58
Оценка:

От:	dimgel	https://github.com/dimgel
Дата:	18.11.13 06:02
Оценка:

От:	Senyai	http://www.arseniy.net
Дата:	19.11.13 19:24
Оценка:	9 (1)

	От:	maxkar
	Дата:	20.11.13 14:35
	Оценка:

	От:	avpavlov
	Дата:	21.11.13 09:05
	Оценка:

	От:	proxy25
	Дата:	21.11.13 12:22
	Оценка:

	От:	proxy25
	Дата:	21.11.13 12:24
	Оценка: