Как стать автором
Обновить

Комментарии 101

Теперь все верно, вроде.
Это я просто "довыбрасывался" лишних стилей
Да, теперь тень есть, но появилась какая-то анти-линия высотой в пиксель :)
Я исправил величину margin-bottom и теперь там нет этой "анти-линии". Просто это уже зависит от контента. В сайте, который я делал у main и footer нет заливки, поэтому таких артефактов не возникало
Ну прям америку открыли! :) Хотя, для новичка полезно будет.
Я долго искал готовое решение в инете и так его и не нашел
НЛО прилетело и опубликовало эту надпись здесь
Сложность в том, что хочется футер к низу экрана прижать, если контента мало.
НЛО прилетело и опубликовало эту надпись здесь
Это не другое дело. Именно в этом и состояла задача - объединить две вещи: 100%-ную высоту и тени.
Ох, я тоже намучался с этой же проблемой :) Приходилось таблицами делать. Спасибо за решение!
ну вот, хоть кто-то понял, что за проблема)
пользуйтесь на здоровье!
Недавно делал что-то подобное. Получилось в итоге вот что: 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)
здесь скриншот
Спасибо. Последний вопрос. Windows Vista?
да
Кхм, хосподи, простите. А разрешение экрана случаем не 1600х1200? :) Тогда это не косяк, просто картинка с углами не рассчитана на ширину окна просмотра больше 1580px.
1680x1050 =)
а вот это опрометчиво ;)
Сделайте картинку шириной в 3000px и будет вам счастье.
а что если человек сидит с 2x30" Apple Cinema Display?
А если серьезно - как-то криво делать здоровые картинки... Хотя, если работать на результат, то почему бы и нет.
В избранное, ибо пригодится.
НЛО прилетело и опубликовало эту надпись здесь
Простите, но про что тогда писать? Про "необыденную" табличную верстку?
НЛО прилетело и опубликовало эту надпись здесь
Ну так если мы пишем не о том, чем надо, то покажите о чем надо писать! Напишите, как вы решили проблему мирового масштаба в процессе разаработки своей домашней странички...

Я столкнулся с проблемой, не нашел ее готового решения, придумал это решение (оно не такое уж и очевидное) и рассказал об этом всем.
Странно, но у меня в 9.5 все отлично. Может у Вас там картинки отключены?
Принимайте поздравления в связи с комментарием-чемпионом! :)
спасибо)))
1m get :)
поднял вам карму
НЛО прилетело и опубликовало эту надпись здесь
Вряд ли карма может быть больше числа зарегистрированных пользователей
Больше может. Когда плюсуешь карму, она поднимается более, чем на 1, видимо это от чего-то зависит.
НЛО прилетело и опубликовало эту надпись здесь
А может проще таблицей? ))) То есть, дивам - дивово, и тому подобное )
Это смотря в какой ситуации. Если важна скорость и итоговый результат, то естественно проще сделать таблицей. Но бывают заказчики, которые в ТЗ строго указывают "только divная верстка, без использования таблиц", "минимальное число изображений", "гибкий макет" и дальше в том же духе. Приходится выкручиваться и извращаться...
Оскомину набило "только divная верстка". Мода, блин.
Можно делать быстро за копейки таблицами.
А можно качественно, с толком, с чувством, с расстановкой div'ами...
НЛО прилетело и опубликовало эту надпись здесь
Требовать валидности верстки глупо. А вот делать валидную верстку - круто)
Это как минимум гарантия того, что во всех браузерах, которые соответствуют стандартам, все будет отображаться одинаково правильно!
Что, во всех двух? :D На самом деле солидарен с вашим мнением по поводу валидности. Да и по поводу блочной вёрстки - пока что её использование весьма затруднено из-за необходимости хаков и несоответствий в различных движках - непрозрачно.
Вы очень правильно сказали, дивы ведут себя по-разному в браузерах. Я до сих пор не видел решения для стопроцентной ширины, например. Такой, как с таблицами получается.
Я тоже не видел решения той задачи, которая передо мной стояла. Именно поэтому я сел, решил и предоставил здесь решение на всеобщее обозрение. Кто мешает Вам сделать то же самое с вашей проблемой?
Как раз именно это я и имел в виду
Таблицей-то, конечно, проще, но есть одна проблема - таблица отображается только тогда, когда загрузится целиком! А значит, пока не подгрузится вся страница, вы будете видеть пустое окно
На самом деле, что в таблице, что в div-ах на большинстве средних корпосайтов (это я привёл пример того, чем часто занимаюсь, проекты-то разные бывают...) содержится пара картинок килобайт по 30 и строк 200 текста - разницы не заметите что в таблицах, что в слоях. А идея зачётная. Хотя, таблицами и код понимабельнее (кому-как, отступы рулят) и безопаснее, т.к. иногда бывает так, что если улетит один [/div] геморроя не оберёшься...
По поводу геморроя согласен. И по поводу "понимабельности" тоже.
Но все же нетабличные данные лучше размещать не в таблицах... Почему лучше? По определению)

Кстати, Вы не в курсе, таблицы на SEO как-нибуль влияют?
Никак они на seo не влияют, если их не вложено по 500 штук в одну, и то, таким образом только разбор замедлится, в-основном-то, ищутся параграфы, ссылки, списки и изображения с альтернативным текстом и титулами, если я правильно помню, ни один робот не учитывает внутри чего это лежит, вроде какой-то поисковик хотел искать именно табличные данные внутри страницы - типа оформленные отчёты, счета и прочие, но забили по причине того, что табличных сайтов - большинство, разбор нетривиален, а практическая выгода невелика. Но это давно было...
нетабличные данные лучше размещать не в таблицах ??? По определению?? - где написано это определение и кем ? Изначально таблицы делались для данных, потом приспособили для верстки. Изначально интернет был военной сетью, а сегодня ...
НЛО прилетело и опубликовало эту надпись здесь
Это вы кому-нибудь другому скажите :)
Как минимум, "на глазок" есть отличия между

[/td][/tr][/table]
или [/div][/div][/div] ?

И это не говоря о том, что [td][tr][table] - логически разные сущности
Так, вроде бы, философия соблюдена. Есть на странице табличные данные? Нету. Так что все дивово сверстано дивами.
да, вполне полезно. Давно что-то небыло статей на такие темы.
Когда-то решал подобную проблему тем, что сперва клал дивы с фоном для тени, а потом клал контент-блоки. Не друг в друга, а по коду и с абсолютом.
Если честно, я не очень понял, что Вы имеете ввиду. Можете написать код или кинуть ссылку на сайт, где это реализовано? Было бы интересно посмотреть
Эм. Проекта того уже нет и кода тоже.
Примерно суть такая, что я дважды на странице юзал блочный код.
Но в первой разметке я применял цсс, чтобы растягивать сверху-вниз фон, а другую вставлял с чуть другим цсс, чтобы расположить шапку-контент-подвал. Сорри, если не ясно объясняю. (((
1) А нельзя было одну версию сделать, в которой в зависомости от размера окна происходит либо одно, либо другое (как онон в жизни бывает), а то так приходится либо масштаб либо размер шрифтов уменьшать.
2) В Опере 9.5 футер резко подпрыгивает вверх, когда уменьшаеш окно из позиции, когда ширина равна 100% до позиции, когда расширяется контентом.
В жизни сайта, который я делаю происходит именно так, как реализовано у меня =)
Есть разные страницы, на одних много информации, а на других мало. Но нужно, чтобы все они выглядели хорошо при различных разрешениях.

Опера 9.5 вообще какая-то "волшебная". Но за косяк спасибо, попробуем чтонть и с этим сделать)
Возможно будет полезной техника описанная на сайте A List Apart. Там, правда, речь шла о двух колонках, поэтому случай здесь — упрощенный вариант того, что у них, ведь второй колонки нет. Если статья по ссылке толковая, но требует перевода, я готов взяться. :)
На самом сайте у меня как раз две колнки, просто здесь я не стал их делать, чтобы не перегружать макет.
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):




<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
только надо еще, чтобы тени были вокруг футера...
тени — тривиальная задача.
в вашем примере края одинаковой ширины, это еще больше упрощает задачу с отбрасыванием тени, можно прописать Background для HTML и BODY для обеих частей вашей тени и обойтись вообще без доп.контейнеров, либо (если возникнут проблемы) один дополнительный контейнер.
НЛО прилетело и опубликовало эту надпись здесь
Согласен, такой баг существует. Но, думаю, его можно исправить бордером или фоном. Критичным его не считаю.
угу... прижимается, а потом, когда контента больше, чем один экран, футер остается висеть на своем месте
Значит у вас ошибка в коде.
Вот быстрый простой пример.
НЛО прилетело и опубликовало эту надпись здесь
дерзай!
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
А вас не смущает, что вы решаете противоположную задачу?)))
НЛО прилетело и опубликовало эту надпись здесь
Лично ваше "готовое решение" подглючивает в ie6, поэтому и не поставил плюсик
НЛО прилетело и опубликовало эту надпись здесь
Прежде чем говорить о семантике разберитесь с кросс-броузерностью и масштабируемостью ;)
WinXP, FF2.0.0.16 (1280х1024) - при увеличении шрифта +1 и более под верхним меню появляются артефакты
WinXP, IE6 (1280х1024) - На уровне слов Frequently Asked Questions - макет рвет на части (особо заметно при увеличении шрифта)
WinXP, Opera 9.50 (1280х1024) - Внизу общего блока нестыковка фона
По мне уж лучше 6 дивов, но железобетонный вывод, чем кривое отображение при семантичной верстке. Да и кто вообще сказал, что дивы не семантично?
НЛО прилетело и опубликовало эту надпись здесь
>>>Спасибо за ваше время, потраченное на тестирование
Пожалуйста, хотя делов-то в трех популярных агентах открыть...

>>>такие слова говорят об том что вы плохо представляете задачи, которые решает HTML
Скорее о том, что имея немалый опыт разработки, понимаю, что кроссброузерность при нынешнем положении на рынке броузеров, всё ж важнее семантичности кода.
Может я и не знаю зачем нужен HTML :), зато хорошо представляю что такое ТЗ, соответствие верстки макету и правильное отображение в разных агентах.

>>>Это не проблема семантической верстки, как таковой.
Да, это проблема академического подхода и недостатка опыта.

>>>Уж поверьте мне, шесть вложенных дивов, это не семантично.
Кто сказал? Вашего слова, к сожалению мало...
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
>>>Еще раз- это проект в котором заказчиком (мной) было выдвинуто такое требование.

Могли бы выдвинуть еще одно требование, вообще без div, да и от CSS можно было бы отказаться (впрочем как и от графики). На семантику не повлияет, а кроссброузерность всё равно побоку пустили :(
Если бы Ваши теоретические изыскания были бы кроссброузерными, я бы первый поставил ссылку на ваш комментарий, а так это еще одна иллюстрация на тему невозможности верстать более-менее сложные макеты семантично (еще раз повторюсь, при нынешней ситуации с поддержкой броузерами спеков)

Не поймите меня превратно, я не против семантики, я против утверждений, что 6 div's это зло. Может быть и зло, но всё зло (включая табличную разметку) от необходимости кроссброузерной поддержки. Ваш пример этому подтверждение.
Если бы вы привели рабочий пример решения проблемы поднятой топикстартером
используя один-два дива. а так...
Здравый смысл должен править миром :)
НЛО прилетело и опубликовало эту надпись здесь
в каментах больше полезных решений если честно. и букф не так много
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
о! спасибо за липнущий к низу футер )
зы: не очень давно верстаю, по этому сам бы не додумался наверное
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории