Комментарии 101
http://dimonline.studenthost.ru/heighter… - IE7, у футера нет тени.
Ну прям америку открыли! :) Хотя, для новичка полезно будет.
Ох, я тоже намучался с этой же проблемой :) Приходилось таблицами делать. Спасибо за решение!
Недавно делал что-то подобное. Получилось в итоге вот что: http://gruzzilkin.110mb.com/layout/
Там по левому краю косяк =(
А можно поподробнее? Через какой браузер смотрите, какая ОС? В чем, по вашему мнению, заключается косяк и где и в какой ситуации он проявился? Буду очень признателен. Просто тестировал под Windows в FF3, IE5.5-7, Opera 9-9.5 и Safari3. Только в FF2 не смотрел...
Ап. Поставил FF2, посмотрел. Косяк :) Вылечился легко, теперь вроде бы все везде одинаково. Если кто-нибудь сидит под *nix или Mac и видит косяк, отпишитесь пожалуйста.
я вот косяк все-таки вижу под виндой (FF3, IE7, Opera 9.5, Safari)
здесь скриншот
здесь скриншот
В избранное, ибо пригодится.
Простите, но про что тогда писать? Про "необыденную" табличную верстку?
Ну так если мы пишем не о том, чем надо, то покажите о чем надо писать! Напишите, как вы решили проблему мирового масштаба в процессе разаработки своей домашней странички...
Я столкнулся с проблемой, не нашел ее готового решения, придумал это решение (оно не такое уж и очевидное) и рассказал об этом всем.
Я столкнулся с проблемой, не нашел ее готового решения, придумал это решение (оно не такое уж и очевидное) и рассказал об этом всем.
Странно, но у меня в 9.5 все отлично. Может у Вас там картинки отключены?
Принимайте поздравления в связи с комментарием-чемпионом! :)
1m get :)
поднял вам карму
Коммент про Убунту и пиво скинут с пьедестала :)
А может проще таблицей? ))) То есть, дивам - дивово, и тому подобное )
Это смотря в какой ситуации. Если важна скорость и итоговый результат, то естественно проще сделать таблицей. Но бывают заказчики, которые в ТЗ строго указывают "только divная верстка, без использования таблиц", "минимальное число изображений", "гибкий макет" и дальше в том же духе. Приходится выкручиваться и извращаться...
Оскомину набило "только divная верстка". Мода, блин.
Можно делать быстро за копейки таблицами.
А можно качественно, с толком, с чувством, с расстановкой div'ами...
А можно качественно, с толком, с чувством, с расстановкой div'ами...
Требовать валидности верстки глупо. А вот делать валидную верстку - круто)
Это как минимум гарантия того, что во всех браузерах, которые соответствуют стандартам, все будет отображаться одинаково правильно!
Это как минимум гарантия того, что во всех браузерах, которые соответствуют стандартам, все будет отображаться одинаково правильно!
Что, во всех двух? :D На самом деле солидарен с вашим мнением по поводу валидности. Да и по поводу блочной вёрстки - пока что её использование весьма затруднено из-за необходимости хаков и несоответствий в различных движках - непрозрачно.
Как раз именно это я и имел в виду
Таблицей-то, конечно, проще, но есть одна проблема - таблица отображается только тогда, когда загрузится целиком! А значит, пока не подгрузится вся страница, вы будете видеть пустое окно
На самом деле, что в таблице, что в div-ах на большинстве средних корпосайтов (это я привёл пример того, чем часто занимаюсь, проекты-то разные бывают...) содержится пара картинок килобайт по 30 и строк 200 текста - разницы не заметите что в таблицах, что в слоях. А идея зачётная. Хотя, таблицами и код понимабельнее (кому-как, отступы рулят) и безопаснее, т.к. иногда бывает так, что если улетит один [/div] геморроя не оберёшься...
По поводу геморроя согласен. И по поводу "понимабельности" тоже.
Но все же нетабличные данные лучше размещать не в таблицах... Почему лучше? По определению)
Кстати, Вы не в курсе, таблицы на SEO как-нибуль влияют?
Но все же нетабличные данные лучше размещать не в таблицах... Почему лучше? По определению)
Кстати, Вы не в курсе, таблицы на SEO как-нибуль влияют?
Никак они на seo не влияют, если их не вложено по 500 штук в одну, и то, таким образом только разбор замедлится, в-основном-то, ищутся параграфы, ссылки, списки и изображения с альтернативным текстом и титулами, если я правильно помню, ни один робот не учитывает внутри чего это лежит, вроде какой-то поисковик хотел искать именно табличные данные внутри страницы - типа оформленные отчёты, счета и прочие, но забили по причине того, что табличных сайтов - большинство, разбор нетривиален, а практическая выгода невелика. Но это давно было...
нетабличные данные лучше размещать не в таблицах ??? По определению?? - где написано это определение и кем ? Изначально таблицы делались для данных, потом приспособили для верстки. Изначально интернет был военной сетью, а сегодня ...
Так, вроде бы, философия соблюдена. Есть на странице табличные данные? Нету. Так что все дивово сверстано дивами.
да, вполне полезно. Давно что-то небыло статей на такие темы.
Когда-то решал подобную проблему тем, что сперва клал дивы с фоном для тени, а потом клал контент-блоки. Не друг в друга, а по коду и с абсолютом.
1) А нельзя было одну версию сделать, в которой в зависомости от размера окна происходит либо одно, либо другое (как онон в жизни бывает), а то так приходится либо масштаб либо размер шрифтов уменьшать.
2) В Опере 9.5 футер резко подпрыгивает вверх, когда уменьшаеш окно из позиции, когда ширина равна 100% до позиции, когда расширяется контентом.
2) В Опере 9.5 футер резко подпрыгивает вверх, когда уменьшаеш окно из позиции, когда ширина равна 100% до позиции, когда расширяется контентом.
В жизни сайта, который я делаю происходит именно так, как реализовано у меня =)
Есть разные страницы, на одних много информации, а на других мало. Но нужно, чтобы все они выглядели хорошо при различных разрешениях.
Опера 9.5 вообще какая-то "волшебная". Но за косяк спасибо, попробуем чтонть и с этим сделать)
Есть разные страницы, на одних много информации, а на других мало. Но нужно, чтобы все они выглядели хорошо при различных разрешениях.
Опера 9.5 вообще какая-то "волшебная". Но за косяк спасибо, попробуем чтонть и с этим сделать)
Возможно будет полезной техника описанная на сайте A List Apart. Там, правда, речь шла о двух колонках, поэтому случай здесь — упрощенный вариант того, что у них, ведь второй колонки нет. Если статья по ссылке толковая, но требует перевода, я готов взяться. :)
все равно — сложно.
тени по бокам можно реализовать кучей способов, но вот яутер прижимается очень просто —
CSS:
html {height:100%}
body {
margin:0; padding:0;
height:auto !important;
height:100%;
min-height:100%;
position:relative
}
#footer {
position:absolute;
bottom:0;
height:55px;
width:100%
}
#content {padding-bottom:60px}
HTML (strict.dtd):
тени по бокам можно реализовать кучей способов, но вот яутер прижимается очень просто —
CSS:
html {height:100%}
body {
margin:0; padding:0;
height:auto !important;
height:100%;
min-height:100%;
position:relative
}
#footer {
position:absolute;
bottom:0;
height:55px;
width:100%
}
#content {padding-bottom:60px}
HTML (strict.dtd):
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
только надо еще, чтобы тени были вокруг футера...
угу... прижимается, а потом, когда контента больше, чем один экран, футер остается висеть на своем месте
Значит у вас ошибка в коде.
Вот быстрый простой пример.
Вот быстрый простой пример.
дерзай!
А вас не смущает, что вы решаете противоположную задачу?)))
Прежде чем говорить о семантике разберитесь с кросс-броузерностью и масштабируемостью ;)
WinXP, FF2.0.0.16 (1280х1024) - при увеличении шрифта +1 и более под верхним меню появляются артефакты
WinXP, IE6 (1280х1024) - На уровне слов Frequently Asked Questions - макет рвет на части (особо заметно при увеличении шрифта)
WinXP, Opera 9.50 (1280х1024) - Внизу общего блока нестыковка фона
По мне уж лучше 6 дивов, но железобетонный вывод, чем кривое отображение при семантичной верстке. Да и кто вообще сказал, что дивы не семантично?
WinXP, FF2.0.0.16 (1280х1024) - при увеличении шрифта +1 и более под верхним меню появляются артефакты
WinXP, IE6 (1280х1024) - На уровне слов Frequently Asked Questions - макет рвет на части (особо заметно при увеличении шрифта)
WinXP, Opera 9.50 (1280х1024) - Внизу общего блока нестыковка фона
По мне уж лучше 6 дивов, но железобетонный вывод, чем кривое отображение при семантичной верстке. Да и кто вообще сказал, что дивы не семантично?
>>>Спасибо за ваше время, потраченное на тестирование
Пожалуйста, хотя делов-то в трех популярных агентах открыть...
>>>такие слова говорят об том что вы плохо представляете задачи, которые решает HTML
Скорее о том, что имея немалый опыт разработки, понимаю, что кроссброузерность при нынешнем положении на рынке броузеров, всё ж важнее семантичности кода.
Может я и не знаю зачем нужен HTML :), зато хорошо представляю что такое ТЗ, соответствие верстки макету и правильное отображение в разных агентах.
>>>Это не проблема семантической верстки, как таковой.
Да, это проблема академического подхода и недостатка опыта.
>>>Уж поверьте мне, шесть вложенных дивов, это не семантично.
Кто сказал? Вашего слова, к сожалению мало...
Пожалуйста, хотя делов-то в трех популярных агентах открыть...
>>>такие слова говорят об том что вы плохо представляете задачи, которые решает HTML
Скорее о том, что имея немалый опыт разработки, понимаю, что кроссброузерность при нынешнем положении на рынке броузеров, всё ж важнее семантичности кода.
Может я и не знаю зачем нужен HTML :), зато хорошо представляю что такое ТЗ, соответствие верстки макету и правильное отображение в разных агентах.
>>>Это не проблема семантической верстки, как таковой.
Да, это проблема академического подхода и недостатка опыта.
>>>Уж поверьте мне, шесть вложенных дивов, это не семантично.
Кто сказал? Вашего слова, к сожалению мало...
>>>Еще раз- это проект в котором заказчиком (мной) было выдвинуто такое требование.
Могли бы выдвинуть еще одно требование, вообще без div, да и от CSS можно было бы отказаться (впрочем как и от графики). На семантику не повлияет, а кроссброузерность всё равно побоку пустили :(
Если бы Ваши теоретические изыскания были бы кроссброузерными, я бы первый поставил ссылку на ваш комментарий, а так это еще одна иллюстрация на тему невозможности верстать более-менее сложные макеты семантично (еще раз повторюсь, при нынешней ситуации с поддержкой броузерами спеков)
Не поймите меня превратно, я не против семантики, я против утверждений, что 6 div's это зло. Может быть и зло, но всё зло (включая табличную разметку) от необходимости кроссброузерной поддержки. Ваш пример этому подтверждение.
Если бы вы привели рабочий пример решения проблемы поднятой топикстартером
используя один-два дива. а так...
Здравый смысл должен править миром :)
Могли бы выдвинуть еще одно требование, вообще без div, да и от CSS можно было бы отказаться (впрочем как и от графики). На семантику не повлияет, а кроссброузерность всё равно побоку пустили :(
Если бы Ваши теоретические изыскания были бы кроссброузерными, я бы первый поставил ссылку на ваш комментарий, а так это еще одна иллюстрация на тему невозможности верстать более-менее сложные макеты семантично (еще раз повторюсь, при нынешней ситуации с поддержкой броузерами спеков)
Не поймите меня превратно, я не против семантики, я против утверждений, что 6 div's это зло. Может быть и зло, но всё зло (включая табличную разметку) от необходимости кроссброузерной поддержки. Ваш пример этому подтверждение.
Если бы вы привели рабочий пример решения проблемы поднятой топикстартером
используя один-два дива. а так...
Здравый смысл должен править миром :)
ужас(
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Два в одном