Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 77
Здорово, спасибо!
Здесь нет хаков. Всё стандартизованно. За это я и люблю relative+div верстку ;)
Я думаю, что это произойдёт, когда 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 то наша работа не ценилась бы так высоко, ведь каждый школьник мог бы верстать сайты.
Не понимаю, к чему этот ажжиотаж насчет css последнее время? Как грибов после дождя. Из пустого в порожнее переливается. Засрали всю главную своими бесполезными попытками на'ccs'ить покруче да понавороченее. Вы кроме как играться дома со скаченым софтом пробовали все эти хинты на работе применять? Что-то я мало уверен :)
Вы видимо не знакомы со стандартами.
Смешно. Мне самому, как и ряду фирмы/студий, где я работал и работаю, знакомы стандарты поболее, чем юный, амбициозный и копипастливый контингент на этом сайте. А на вопрос таки никто не ответил. Впрочем и не нужно. И так всё ясно.
Вон из интернета.
l2k, один вопрос — вы до этого додумались и решили написать пост или это решение, которым вы уже давно пользуетесь и оно не имеет острых углов? спасибо.
С float'ами у меня возникало намного больше проблем, чем этим подходом.
Вообще, всё что я здесь описал, входит в стандарт CSS2.
Само-собою, касаемо CSS, имеются свои подводные камни, такие как IE6 ;). Но я их решал, без особых трудностей.
Вообще, всё что я здесь описал, входит в стандарт CSS2.
Само-собою, касаемо CSS, имеются свои подводные камни, такие как IE6 ;). Но я их решал, без особых трудностей.
если добавить контента то не очень красиво выходит…
на matthewjamestaylor есть пример лучшей, из того что я видел, 3-х колоночной DIV-ной верстки
на matthewjamestaylor есть пример лучшей, из того что я видел, 3-х колоночной DIV-ной верстки
Правильно сказал electron height: 200px я использовал для примера.
Eсли вам необходимо установить другую высоту колонки, используйте соответственно auto или другие подходящие вам значения.
Отличие matthewjamestaylor от того, что я расматриваю в этой статье в том, что там колонки используют % от длины окна браузера, а у меня они не растягиваются. Первое сделать намного проще, а для второго — приходится искать разные методы решения.
Eсли вам необходимо установить другую высоту колонки, используйте соответственно auto или другие подходящие вам значения.
Отличие matthewjamestaylor от того, что я расматриваю в этой статье в том, что там колонки используют % от длины окна браузера, а у меня они не растягиваются. Первое сделать намного проще, а для второго — приходится искать разные методы решения.
В вашем случае, лучше поискать другой способ :).
Данный способ будет работать, только в случае, если центральная часть будет иметь больше текста, чем остальные колонки.
Как вариант, в вашем случае, можно использовать таблицы с константными значениями длинны колонок.
Мой вариант больше подходит для реализации различных видов меню, выпадающих подсказок и других таких вещей, которые используют резиновую ширину. Вы правы, сам пример я выбрал не совсем удачный :), но хотелось что-нибудь простое.
Данный способ будет работать, только в случае, если центральная часть будет иметь больше текста, чем остальные колонки.
Как вариант, в вашем случае, можно использовать таблицы с константными значениями длинны колонок.
Мой вариант больше подходит для реализации различных видов меню, выпадающих подсказок и других таких вещей, которые используют резиновую ширину. Вы правы, сам пример я выбрал не совсем удачный :), но хотелось что-нибудь простое.
Если я вас правильно понял, то это не решит проблему если left и right колонки будут ниже, чем центральная часть (залазя на footer).
То, что вы предлагаете — можно решить, добавив всего лишь один div в конец (пример). Я думаю, что это будет красивее.
То, что вы предлагаете — можно решить, добавив всего лишь один div в конец (пример). Я думаю, что это будет красивее.
А можете привести удачный пример? Метод явно не универсальный даже для различных видом меню и я никак не могу придумать, где бы его применить (в реальном проекте с кучей ограничений, допустим)…
Спасибо, я видел этот сайт и читал Молли. Но речь идет исключительно о вашем примере. В чем его польза, кроме того что «сначала отбить паддингами место под колонки, а потом засунуть туда абсолютно спозиционированный блок»? Или целью статьи было познакомить новичков с еще одним способом, который в реальной практике практически бесполезен?
А колонки чтоб были одинаковой высоты и без использования графики. И чтобы верстка не ломалась при использовании JS или при переходе по ссылкам-якорям.
Я бы тоже очень хотел найти пуленепробиваемый вариант идеального макета, но это мечты… пока что мечты… ;)
Я бы тоже очень хотел найти пуленепробиваемый вариант идеального макета, но это мечты… пока что мечты… ;)
6 ошибок при html-валидации. :)
а вообще, очень любопытно! признаться, не знал о подобном решении, обязательно пороюсь и буду применять!
спасибо.
а вообще, очень любопытно! признаться, не знал о подобном решении, обязательно пороюсь и буду применять!
спасибо.
По-моему, не очень красиво, когда в коде сначала идет правая колонка, а потом левая. Более естественно следование друг за другом элементов, которые визуально расположены по ходу чтения, слева направо.
Располагайте, как хотите.
причём тут 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 тут используется только для левого и правого блока.
width:auto + position:relative тоже ведут себя, как и static.
А я что написал?
Просто, ИМХО логичней было бы назвать статью «разметка с помощью absolute». Тогда бы после некоторого гугления вы бы поняли, что идея не нова, все достоинства и недостатки известны. Финт с height:0; тоже непонятно зачем?
Добавьте пожалуйста тэг CSS к статье.
статья неправильно учит тому, что давно известно. её нужно немножко сжечь,
а то скоро на хабре появятся мануалы «как с помощью css задать размер шрифта и интерлиньяж» и «как с помощью проприентарного css-свойства zoom задать hasLayout».
зачем
зачем
зачем
что за глупость с
а то скоро на хабре появятся мануалы «как с помощью css задать размер шрифта и интерлиньяж» и «как с помощью проприентарного css-свойства zoom задать hasLayout».
зачем
div#main? у вас есть body.зачем
position: relative для каждого блока?зачем
#rightbar и и #sidebar2 в нём, одного блока хватит.что за глупость с
height: 0?Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Безразмерная разметка с помощью relative (без float)