Comments 77
Здорово, спасибо!
UFO just landed and posted this here
Здесь нет хаков. Всё стандартизованно. За это я и люблю relative+div верстку ;)
UFO just landed and posted this here
Я думаю, что это произойдёт, когда Windows 7 покорит большенство поклонников XP/Vista ;). Скорее всего лет через 5-10.
Если использовать, то можно обойтись и без хаков.
Да и css'ы будут валидными.
Да и css'ы будут валидными.
хабр обрезал условные коментарии.
Условные комментарии не очень спасают. Например, чтобы сделать нормальный min-width, max-width в ie6 все равно придется юзать невалидный css (в частности expression, без него я не знаю хорошего способа реализовать эти свойства). Поэтому даже если вынести стили для ИЕ в отдельный стилевой файл — он будет невалидным :)
Тогда, когда Windows перестанет быть монополией.
IMHO Майкрософту невыгодно иметь браузер, поддерживающий все стандарты, ведь тогда у рядового пользователя не останется поводов пользоваться IE и не пробовать другие, сейчас же попытка чайника попробовать Oper'у приводит к фразе «Ах, мой любимый порносайт расползся, дурацкий браузер эта опера», и ему никто уже не объяснит, что это не опера виновата, а разработчик сайта, который верстал под IE, без оглядки на стандарты, ибо 90% его аудитории — IE.
IMHO Майкрософту невыгодно иметь браузер, поддерживающий все стандарты, ведь тогда у рядового пользователя не останется поводов пользоваться IE и не пробовать другие, сейчас же попытка чайника попробовать Oper'у приводит к фразе «Ах, мой любимый порносайт расползся, дурацкий браузер эта опера», и ему никто уже не объяснит, что это не опера виновата, а разработчик сайта, который верстал под IE, без оглядки на стандарты, ибо 90% его аудитории — IE.
Вы говорите о тенденциях 3-5 летней давности. В то время действительно IE 6 был наиболее «правильным».
Сейчас уже всё давно изменилось — IE6+IE7 занимает не более 60%.
Микрософту плевать, чем пользуется пользователь — у них браузер поставляется бесплатно (IE7 update), а оплата ведется за Windows.
Вот для продвижения Windows, как раз выгодно иметь браузер, поддерживающий все стандарты — больше плюсов для ОС. По этому сейчас тестируется IE8. И именно в случае поддержки всех стандартов, пользователи будут им пользоваться.
Сейчас уже всё давно изменилось — IE6+IE7 занимает не более 60%.
Микрософту плевать, чем пользуется пользователь — у них браузер поставляется бесплатно (IE7 update), а оплата ведется за Windows.
Вот для продвижения Windows, как раз выгодно иметь браузер, поддерживающий все стандарты — больше плюсов для ОС. По этому сейчас тестируется IE8. И именно в случае поддержки всех стандартов, пользователи будут им пользоваться.
о чем вы говорите? пользователи IE понятия не имеют, что такое браузер — они сразу с ярлычка открывают интернет.
Походу никогда.
Вот когда изобретут новую версию инета — какой-нить трехмерный со звуком, а не плоский беззвучный html, то тогда возможно.
Я думаю сейчас большинство ограничений у MS в том, что уже сделано куча сайтов на говностандарте и вдруг волевым решением перевести все на STRICT не в их стиле.
Вот когда изобретут новую версию инета — какой-нить трехмерный со звуком, а не плоский беззвучный html, то тогда возможно.
Я думаю сейчас большинство ограничений у MS в том, что уже сделано куча сайтов на говностандарте и вдруг волевым решением перевести все на STRICT не в их стиле.
Грустные и скучные времена настанут тогда для верстальщиков, т.к. тогда будут рулить только дизайнеры и программеры :)
А вот мне кажется что ИЕ6 нам, верстальщикам, даже в чем то наруку. Ведь если бы не было ИЕ6 то наша работа не ценилась бы так высоко, ведь каждый школьник мог бы верстать сайты.
UFO just landed and posted this here
Не понимаю, к чему этот ажжиотаж насчет css последнее время? Как грибов после дождя. Из пустого в порожнее переливается. Засрали всю главную своими бесполезными попытками на'ccs'ить покруче да понавороченее. Вы кроме как играться дома со скаченым софтом пробовали все эти хинты на работе применять? Что-то я мало уверен :)
Вы видимо не знакомы со стандартами.
Смешно. Мне самому, как и ряду фирмы/студий, где я работал и работаю, знакомы стандарты поболее, чем юный, амбициозный и копипастливый контингент на этом сайте. А на вопрос таки никто не ответил. Впрочем и не нужно. И так всё ясно.
Вон из интернета.
l2k, один вопрос — вы до этого додумались и решили написать пост или это решение, которым вы уже давно пользуетесь и оно не имеет острых углов? спасибо.
С float'ами у меня возникало намного больше проблем, чем этим подходом.
Вообще, всё что я здесь описал, входит в стандарт CSS2.
Само-собою, касаемо CSS, имеются свои подводные камни, такие как IE6 ;). Но я их решал, без особых трудностей.
Вообще, всё что я здесь описал, входит в стандарт CSS2.
Само-собою, касаемо CSS, имеются свои подводные камни, такие как IE6 ;). Но я их решал, без особых трудностей.
если добавить контента то не очень красиво выходит…
на matthewjamestaylor есть пример лучшей, из того что я видел, 3-х колоночной DIV-ной верстки
на matthewjamestaylor есть пример лучшей, из того что я видел, 3-х колоночной DIV-ной верстки
UFO just landed and posted this here
Правильно сказал electron height: 200px я использовал для примера.
Eсли вам необходимо установить другую высоту колонки, используйте соответственно auto или другие подходящие вам значения.
Отличие matthewjamestaylor от того, что я расматриваю в этой статье в том, что там колонки используют % от длины окна браузера, а у меня они не растягиваются. Первое сделать намного проще, а для второго — приходится искать разные методы решения.
Eсли вам необходимо установить другую высоту колонки, используйте соответственно auto или другие подходящие вам значения.
Отличие matthewjamestaylor от того, что я расматриваю в этой статье в том, что там колонки используют % от длины окна браузера, а у меня они не растягиваются. Первое сделать намного проще, а для второго — приходится искать разные методы решения.
UFO just landed and posted this here
В вашем случае, лучше поискать другой способ :).
Данный способ будет работать, только в случае, если центральная часть будет иметь больше текста, чем остальные колонки.
Как вариант, в вашем случае, можно использовать таблицы с константными значениями длинны колонок.
Мой вариант больше подходит для реализации различных видов меню, выпадающих подсказок и других таких вещей, которые используют резиновую ширину. Вы правы, сам пример я выбрал не совсем удачный :), но хотелось что-нибудь простое.
Данный способ будет работать, только в случае, если центральная часть будет иметь больше текста, чем остальные колонки.
Как вариант, в вашем случае, можно использовать таблицы с константными значениями длинны колонок.
Мой вариант больше подходит для реализации различных видов меню, выпадающих подсказок и других таких вещей, которые используют резиновую ширину. Вы правы, сам пример я выбрал не совсем удачный :), но хотелось что-нибудь простое.
UFO just landed and posted this here
Если я вас правильно понял, то это не решит проблему если left и right колонки будут ниже, чем центральная часть (залазя на footer).
То, что вы предлагаете — можно решить, добавив всего лишь один div в конец (пример). Я думаю, что это будет красивее.
То, что вы предлагаете — можно решить, добавив всего лишь один div в конец (пример). Я думаю, что это будет красивее.
А можете привести удачный пример? Метод явно не универсальный даже для различных видом меню и я никак не могу придумать, где бы его применить (в реальном проекте с кучей ограничений, допустим)…
Спасибо, я видел этот сайт и читал Молли. Но речь идет исключительно о вашем примере. В чем его польза, кроме того что «сначала отбить паддингами место под колонки, а потом засунуть туда абсолютно спозиционированный блок»? Или целью статьи было познакомить новичков с еще одним способом, который в реальной практике практически бесполезен?
А колонки чтоб были одинаковой высоты и без использования графики. И чтобы верстка не ломалась при использовании JS или при переходе по ссылкам-якорям.
Я бы тоже очень хотел найти пуленепробиваемый вариант идеального макета, но это мечты… пока что мечты… ;)
Я бы тоже очень хотел найти пуленепробиваемый вариант идеального макета, но это мечты… пока что мечты… ;)
6 ошибок при html-валидации. :)
а вообще, очень любопытно! признаться, не знал о подобном решении, обязательно пороюсь и буду применять!
спасибо.
а вообще, очень любопытно! признаться, не знал о подобном решении, обязательно пороюсь и буду применять!
спасибо.
По-моему, не очень красиво, когда в коде сначала идет правая колонка, а потом левая. Более естественно следование друг за другом элементов, которые визуально расположены по ходу чтения, слева направо.
Располагайте, как хотите.
UFO just landed and posted this here
причём тут position:relative?
любители абсолютного позиционирования не хотят замечать, что при низких разрешениях их замечательный такой макет с произвольным расположением блоков превращается в какашку — сайдбары наползают на контент а в особо экстремальных случаях и вообще друг на друга. флоаты, хотябы выстраиваются по вертикали, чтобы не налезать на соседей…
любители абсолютного позиционирования не хотят замечать, что при низких разрешениях их замечательный такой макет с произвольным расположением блоков превращается в какашку — сайдбары наползают на контент а в особо экстремальных случаях и вообще друг на друга. флоаты, хотябы выстраиваются по вертикали, чтобы не налезать на соседей…
Хорошее и правильное замечание.
Этот способ, как и float, необходимо использовать с умом, в зависимости от задачи.
position:relative — это метод позиционирования, который так работает с шириной.
Этот способ, как и float, необходимо использовать с умом, в зависимости от задачи.
position:relative — это метод позиционирования, который так работает с шириной.
а position:static — не кошерен?
1) Иногда необходимо использовать left и top позициониторвание.
2) Внутренние элементы absolute не позиционируются в static элементах.
По этому пользоваться static особого смысла нет. :)
2) Внутренние элементы absolute не позиционируются в static элементах.
По этому пользоваться static особого смысла нет. :)
Один я не понимаю, почему автор называет эту разметку «разметка c помощью relative»?
Потому, что использую relative позиционирование.
Да, но основную же роль играют блоки с абсолютным позиционированием. А вот это ваше:
Результат действия вовсе не того, что вы дали блоку position:relative; Так ведут себя любые блочные элементы с width:auto; (по умолчанию) и position:static; (тоже по умолчанию, а position:relative; без указания координат смещения это, по сути, если не учитывать stacking level, и есть position:static);
При этом, блок обладает неизменными padding+border и резиновым width, таким, что width_px+padding_px+border_px = 100%.
Результат действия вовсе не того, что вы дали блоку position:relative; Так ведут себя любые блочные элементы с width:auto; (по умолчанию) и position:static; (тоже по умолчанию, а position:relative; без указания координат смещения это, по сути, если не учитывать stacking level, и есть position:static);
width:auto + position:relative тоже ведут себя, как и static.
position:absolute тут используется только для левого и правого блока.
position:absolute тут используется только для левого и правого блока.
Добавьте пожалуйста тэг CSS к статье.
статья неправильно учит тому, что давно известно. её нужно немножко сжечь,
а то скоро на хабре появятся мануалы «как с помощью css задать размер шрифта и интерлиньяж» и «как с помощью проприентарного css-свойства zoom задать hasLayout».
зачем
зачем
зачем
что за глупость с
а то скоро на хабре появятся мануалы «как с помощью css задать размер шрифта и интерлиньяж» и «как с помощью проприентарного css-свойства zoom задать hasLayout».
зачем
div#main? у вас есть body.зачем
position: relative для каждого блока?зачем
#rightbar и и #sidebar2 в нём, одного блока хватит.что за глупость с
height: 0?Sign up to leave a comment.
Безразмерная разметка с помощью relative (без float)