Pull to refresh

Comments 101

Теперь все верно, вроде.
Это я просто "довыбрасывался" лишних стилей
Да, теперь тень есть, но появилась какая-то анти-линия высотой в пиксель :)
Я исправил величину margin-bottom и теперь там нет этой "анти-линии". Просто это уже зависит от контента. В сайте, который я делал у main и footer нет заливки, поэтому таких артефактов не возникало
Ну прям америку открыли! :) Хотя, для новичка полезно будет.
Я долго искал готовое решение в инете и так его и не нашел
UFO just landed and posted this here
Сложность в том, что хочется футер к низу экрана прижать, если контента мало.
UFO just landed and posted this here
Это не другое дело. Именно в этом и состояла задача - объединить две вещи: 100%-ную высоту и тени.
Ох, я тоже намучался с этой же проблемой :) Приходилось таблицами делать. Спасибо за решение!
ну вот, хоть кто-то понял, что за проблема)
пользуйтесь на здоровье!
Недавно делал что-то подобное. Получилось в итоге вот что: http://gruzzilkin.110mb.com/layout/
А можно поподробнее? Через какой браузер смотрите, какая ОС? В чем, по вашему мнению, заключается косяк и где и в какой ситуации он проявился? Буду очень признателен. Просто тестировал под Windows в FF3, IE5.5-7, Opera 9-9.5 и Safari3. Только в FF2 не смотрел...
Ап. Поставил FF2, посмотрел. Косяк :) Вылечился легко, теперь вроде бы все везде одинаково. Если кто-нибудь сидит под *nix или Mac и видит косяк, отпишитесь пожалуйста.
Спасибо. Последний вопрос. Windows Vista?
Кхм, хосподи, простите. А разрешение экрана случаем не 1600х1200? :) Тогда это не косяк, просто картинка с углами не рассчитана на ширину окна просмотра больше 1580px.
Сделайте картинку шириной в 3000px и будет вам счастье.
а что если человек сидит с 2x30" Apple Cinema Display?
А если серьезно - как-то криво делать здоровые картинки... Хотя, если работать на результат, то почему бы и нет.
UFO just landed and posted this here
Простите, но про что тогда писать? Про "необыденную" табличную верстку?
UFO just landed and posted this here
Ну так если мы пишем не о том, чем надо, то покажите о чем надо писать! Напишите, как вы решили проблему мирового масштаба в процессе разаработки своей домашней странички...

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

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

[/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 для обеих частей вашей тени и обойтись вообще без доп.контейнеров, либо (если возникнут проблемы) один дополнительный контейнер.
UFO just landed and posted this here
Согласен, такой баг существует. Но, думаю, его можно исправить бордером или фоном. Критичным его не считаю.
угу... прижимается, а потом, когда контента больше, чем один экран, футер остается висеть на своем месте
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
А вас не смущает, что вы решаете противоположную задачу?)))
UFO just landed and posted this here
Лично ваше "готовое решение" подглючивает в ie6, поэтому и не поставил плюсик
UFO just landed and posted this here
Прежде чем говорить о семантике разберитесь с кросс-броузерностью и масштабируемостью ;)
WinXP, FF2.0.0.16 (1280х1024) - при увеличении шрифта +1 и более под верхним меню появляются артефакты
WinXP, IE6 (1280х1024) - На уровне слов Frequently Asked Questions - макет рвет на части (особо заметно при увеличении шрифта)
WinXP, Opera 9.50 (1280х1024) - Внизу общего блока нестыковка фона
По мне уж лучше 6 дивов, но железобетонный вывод, чем кривое отображение при семантичной верстке. Да и кто вообще сказал, что дивы не семантично?
UFO just landed and posted this here
>>>Спасибо за ваше время, потраченное на тестирование
Пожалуйста, хотя делов-то в трех популярных агентах открыть...

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

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

>>>Уж поверьте мне, шесть вложенных дивов, это не семантично.
Кто сказал? Вашего слова, к сожалению мало...
UFO just landed and posted this here
UFO just landed and posted this here
>>>Еще раз- это проект в котором заказчиком (мной) было выдвинуто такое требование.

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

Не поймите меня превратно, я не против семантики, я против утверждений, что 6 div's это зло. Может быть и зло, но всё зло (включая табличную разметку) от необходимости кроссброузерной поддержки. Ваш пример этому подтверждение.
Если бы вы привели рабочий пример решения проблемы поднятой топикстартером
используя один-два дива. а так...
Здравый смысл должен править миром :)
UFO just landed and posted this here
в каментах больше полезных решений если честно. и букф не так много
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
о! спасибо за липнущий к низу футер )
зы: не очень давно верстаю, по этому сам бы не додумался наверное
Sign up to leave a comment.

Articles