How to become an author
Search
Write a publication
Pull to refresh

Comments 134

Ничего, что контент у вас находится в самом конце страницы? Если в колонках будет куча ссылок, куча текстовых абзацев, баннеров, счетчиков, то поисковик долго будет сквозь них продираться, пока дойдёт до основного текста. Да и пользователи скринридеров вам огромное спасибо врядли скажут.
Total votes 7: ↑5 and ↓2+3
Контент можно со спокойной душой перенести и в начало страницы. Абсолютные блоки (в последнем примере строки 2-7) неважно в каком порядке идут, их вынесем за блок .container
Та же штука и с блоками стр.12-17 — их поставим после блока .content. На них стоит относительное позиционирование, а на .content нет.
Но за вопрос все-равно спасибо. Учту обязательно и переделаю.
Total votes 6: ↑5 and ↓1+4
Выложите переделанные? в этот топик или в другой?
This comment wasn’t rated yet0
div.clear можно убрать за счет использования .container:after {}
Total votes 3: ↑2 and ↓1+1
И, как мне кажется, лучше избегать использование одного класса для разных блоков (я про .column-l и т.д.). Вынесите общие свойства (ширина, фон и т.д.) в отдельный класс, который будет и у абсолютного блока, и у относительного, а для них дополнительно свои классы со специфичными параметрами.
Total votes 2: ↑2 and ↓0+2
Спасибо. Использовал одинаковые классы для того, чтобы не писать в 2-х местах ширину контейнера, а только в одном. Насчет .container:after {} — не использовал для общей наглядности и простоты. Сделаю с ним.
Total votes 1: ↑1 and ↓0+1
а разве будет работать в IE6-?
This comment wasn’t rated yet0
Таким методом можно очищать поток? А можете пожалуйста ссылочку дать где можно поподробнее об этом почитать.
This comment wasn’t rated yet0
UFO just landed and posted this here
Извините, но надо еще чтобы футер был «липнущим», и колонки по 100% высоты.
К тому же

padding-bottom: 10010px;
margin-bottom: -10000px;

Мне не очень нравится
Total votes 4: ↑4 and ↓0+4
UFO just landed and posted this here
Да. Я знаю. Вы думаете я так просто начал писать и пробовать эту штуку? Может, конечно, я и изобрел еще одного велосипеда, но от этого он, по крайней мере для меня, не менее удобный=)
Total votes 2: ↑2 and ↓0+2
UFO just landed and posted this here
Не используйте его.

Это абсолютно негодный способ. Я на нем обжегся, дело в том, что там используется враппер с overflow:hidden (чтобы спарятать padding). Так вот, разработчики браузеров, подгоняя их под тесты ACID, сделали так, что при переходе на якорь внутри дива с overflow:hidden прокручивается не страница, а содержимое дива! Слов моих нет, чтобы описать это безобразие. В результате, при переходе на якорь (типа /page.html#chapter5) имеем страницу, у которой видна только часть контента (начиная с якоря #chapter5), остальное скрыто.
Total votes 5: ↑5 and ↓0+5
UFO just landed and posted this here
Семантика тоже важна. Header, расположенный после колонок, совсем не тру. Да и колонки на абсолюте…
Не, это не вариант.

На днях постараюсь выложить свою версию, которую допиливал 2 года. Может кто-нибудь возьмет на заметку.
Total votes 3: ↑2 and ↓1+1
Вылаживайте. Может коллективными усилиями соберем на хабре действительно полезную библиотеку. Интересно.
Total votes 5: ↑2 and ↓3-1
UFO just landed and posted this here
Говорю же, семантике противоречит. Первый элемент на странице должен находиться вверху кода.
Total votes 4: ↑1 and ↓3-2
UFO just landed and posted this here
Как ни крути, в данном примере, контент вообще непонятно где :)
Ну, а по поводу шапки — а смысл что-то городить? При нормальной конструкции, она всегда будет вверху кода.
This comment wasn’t rated yet0
Взгляните, для примера, на верстку википедии.
This comment wasn’t rated yet0
Посоветуйте еще проверить валидацию гугла :)

Я верстаю коммерческие сайты, там семантика важна. А Вики это не нужно.
This comment wasn’t rated yet0
Действительно, для вики семантика не важна. Именно поэтому они заморочились за семантику и за верстку так, что при отсутствии стилевых таблиц юзабельность их страниц не падает.
Total votes 1: ↑1 and ↓0+1
Ну тут все же речь о коммерческих проектах…
This comment wasn’t rated yet0
Ну в коммерческих проектах ведь семантика соблюдается и для поисковых систем в том числе. Для этой же цели вики выдает основной контент в самом начале.
Total votes 3: ↑3 and ↓0+3
Вы предлагаете собрать шаблон, в котором шапка будет находиться под контентом?
This comment wasn’t rated yet0
Вообще я предлагал взглянуть на верстку вики, где так и сделано. И обратить внимание на причины «почему». Вот и все не более того.
Total votes 3: ↑3 and ↓0+3
именно такое прижимание футера использую во всех проектах, имхо самый простой, стабильный и понятный способ.
Total votes 3: ↑3 and ↓0+3
он то самый простой, но высота фиксированная, а это не всегда хорошо (
Total votes 1: ↑1 and ↓0+1
Минимальная высота фиксирована. Максимальная — в зависимости от контента. Посмотрите первые 4 ссылки в конце статьи
Total votes 1: ↑1 and ↓0+1
я имел ввиду — высота футера фиксирована, точнее она не задана явно, но ее таковой делает margin-top
This comment wasn’t rated yet0
за несколько лет разработки никогда не было необходимости сделать футер не фиксированный по высоте.
This comment wasn’t rated yet0
UFO just landed and posted this here
это фиксированные разделы.
они годами могут не меняться
Total votes 1: ↑0 and ↓1-1
могут и не меняться, но если будет resizable fonts — как будет выглядеть футер?
This comment wasn’t rated yet0
Сделать в em высоту футера и room под него, в чем проблема — но вопрос риторический
Total votes 2: ↑2 and ↓0+2
что-то мы не понимаем друг друга — какую задавать высоту футера в em, если в футере может быть 5, а может быть и 25 ссылок + resizable fonts? поэтому этот способ приемлем, но далеко не всегда.
This comment wasn’t rated yet0
все браузеры уже нормальны ресайзят все масштабно.
если контент автоматом генерится в футере — тады да, но я такого не встречал даже :)
Total votes 1: ↑0 and ↓1-1
а вот и не все ))))
Total votes 1: ↑1 and ↓0+1
и че? ради одного недобраузера все изворачивать наизнанку?
я вот не понимаю вас вообще. каждый второй топик орется — «Фтопку ИЕ6!!!!111», но при этом эти же люди тут же пытаются тыкать носом — «а как же ИЕ6?!!11»
тошно
Total votes 2: ↑0 and ↓2-2
если у нас разговор зашел в такое русло, то:
1) я никому не тыкал, не желаете поддерживать ИЕ6 — и не нужно
2) если вы хотите получить деньги за свою работу и клиент хочет поддержку ИЕ6+, то придется делать.
This comment wasn’t rated yet0
одно дело поддержка ie6, другое масштабируемость в ie6
Total votes 2: ↑2 and ↓0+2
Сферический footer в вакууме, мы тут обсуждаем вполне стандартные вещи, вашу задачу стандартной назвать язык не поворачивается :)

А ресайз, как уже заметили, давным-давно не шрифтами делается во всех браузерах
Total votes 1: ↑1 and ↓0+1
отвечу еще раз — не все. Некоторые клиенты все еще хотят, чтобы их сайт выглядел так же в «любимом» браузере как и во всех остальных.
This comment wasn’t rated yet0
UFO just landed and posted this here
У меня тоже, практически, такой же. Но за ненадобностью убрал z-index. Так и не понял, зачем он.

Вот мой код:

#footer {height:100px; margin-top:-100px; position:relative; width:100%;}

+ у врапера padding-bottom равный высоту футера+отступ.
This comment wasn’t rated yet0
z-index для того, чтобы футер перекрывал абсолютные блоки. Так как у абсолютов высота в 100% — они иногда «залезают» на футер
Total votes 1: ↑1 and ↓0+1
Вывод: Не использовать абсолютное позиционирование для каркаса сайта.
Total votes 1: ↑1 and ↓0+1
=) Было бы все так просто…
Total votes 1: ↑1 and ↓0+1
за новый вариант реализации — "+", но несколько смущает наличие пустых блоков, таких как — .column-l и .column-l, если макет фиксированной ширины, то можно все эти бг перенести, например, на .wrapper, еще как вариант реализация с пом. padding-bottom:9999px; margin-bottom:-9999px;
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
min-width: 800px; не работает во всеми нами любимом браузере :)
This comment wasn’t rated yet0
Не захотел портить код. Вариантов много — от:
* html .wrapper, * html .footer {
filter: expression(runtimeStyle.width = (documentElement.clientWidth||document.body.clientWidth)<800?'800px':'');
}

или

* html .wrapper, * html .footer {
width: expression((documentElement.clientWidth||document.body.clientWidth) < 800? "800px" : "auto");
}

И до растягивающих блоков, которые не дают схлопываться контейнерам.
Посмотрите http://cssing.org.ua/2005/09/02/min-width-for-ie/
Там более подробно описано.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
А что именно вас удивило, если не секрет?)
Total votes 2: ↑1 and ↓10
UFO just landed and posted this here
хаки для осла нужны всегда — закон жизни (-:
Total votes 1: ↑1 and ↓0+1
В жизни приведенные примеры с колонками с заданным одним цветом бекграунда встречаются очень редко, зачастую используется еще и фоновый рисунок. А если так, то почему бы не создавать тот самый «эффект колонок»?
This comment wasn’t rated yet0
В некоторых случаях и он оправдан. Но представьте, что на колонке у вас должен быть горизонтальный градиент. При изменении ширины колонки — надо будет менять изображение фона.
С «эффектом колонок» будет посложнее получить нужный результат.
Но от прложенного вами варианта не отказываюсь — так как сам его иногда использую.
Total votes 1: ↑1 and ↓0+1
Да, и для html, body
  min-height: 100% !important;
  min-height: auto;
лишнее.
Total votes 4: ↑4 and ↓0+4
С этим соглашусь. У меня от этих экспериментов немного паранойя началась. Перестраховался. Спасибо.
Total votes 1: ↑1 and ↓0+1
И после каждой правки колонок перерисовывать картинку?
Total votes 1: ↑1 and ↓0+1
Хорошо. Несколько замечаний.
Футер неплохо было бы во враппер вынести.
Хорошо, когда колонка и её подложка находятся вместе, т.к. всё это хозяйство может генерироваться админкой, например, и так было бы удобнее.
This comment wasn’t rated yet0
Футер не во враппере именно для прижимания книзу — код то смотрели? вообще зачем это?
а если все таки внести — надо будет еще миллион костылей чтобы его вниз прижать
Total votes 2: ↑2 and ↓0+2
а чего ж не смотрел-то? если, например, мне нужен враппер для того, чтобы скорректировать ширину макета и отцентрировать, то в вашем случае мне придётся всё то же самое делать и для футера.
This comment wasn’t rated yet0
ну давайте, запихните, и посмотрим как будете прижимать.
я хз мне не лень width:999px в двух местах поставить.
зато все будет совершенно четко и стабильно работать
This comment wasn’t rated yet0
а что мешает, напрмер, сделать враппер релятивным, а потом абсолютизировать понизу футер? Ведь как был враппер 100% по высоте, так и останется!
This comment wasn’t rated yet0
неприязнь к абсолютам, примененным к основному лэйауту, но это уже лично мое
Total votes 1: ↑1 and ↓0+1
Ну личное, так личное))
А вы не в курсе, это имеет значение с точки зрения производительности и т.п.? (релятивность)
This comment wasn’t rated yet0
Такой способ тоже существует и вполне заслуживает право на жизнь. Я привык к вышеуказанному способу как к самому проверенному и надежному.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
А можно поподробней? У меня вроде никогда не было проблем с этим в IE6
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
хм…
1. враппер получит hasLayout в моём варианте, т.к. релятивен
2. я достаточно проверяю в ie!
3. специально прибил футер на сайте, которым сейчас занимаюсь, вниз по моему способу и убедился, что в шестом IE всё в порядке
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
Ну, принцип, по которому я верстаю, позволяет мне использовать только «железные» конструкции, поэтому таких сюрпризов минимум.
Всем, кстати, советую)))
This comment wasn’t rated yet0
UFO just landed and posted this here
А что в этом плохого?
.wrapper, .footer{
width:800px;
margin-left:auto;
margin-right:auto;
}

Костыль для ие
* html body{
text-align:center; /* Только не забудьте его потом переопределить */
}
Total votes 1: ↑1 and ↓0+1
Да в общем, ничего, я не утверждал, что это плохо (максимум, expression два раза отработает), а просто подумал, как бы я это сделал.
This comment wasn’t rated yet0
.wrapper, .footer{
width:800px;
margin-left:auto;
margin-right:auto;
}

.wrapper, .footer{
width:800px;
margin:0 auto;
}

не обращайте внимания=)
This comment wasn’t rated yet0
margin:0 auto; можно указать только для .wrapper.
Для футера это будет
margin:-60px auto 0 auto;
Потому я и выбрал такую запись для наглядности
Total votes 1: ↑1 and ↓0+1
Идея неплоха, но, как обычно, нюансы выявляются при «натягивании» конкретного дизайна и контента.

Расцветка макета как в advice dog — психотропно
This comment wasn’t rated yet0
Согласен. Способ еще не обкатан. Со временем постараюсь выкинуть все лишнее и довести до универсальности. За рачцветку простите) Я больше над позиционированием думал)
This comment wasn’t rated yet0
В опере 9.64/10.10 второй вариант некорректно работает: первая колонка тянет страницу по высоте, а вторая колонка доходит только конца первого экрана :(
This comment wasn’t rated yet0
Извините автор… но ваш вариант не всегда подойдет… а если честно… то в крайне редких случаях =(
This comment wasn’t rated yet0
Пожалуйста, аргументируйте. До сих пор я и сам обходился без него прекрасно. Попробую применить в разработке среднего звена проекта.
Total votes 1: ↑1 and ↓0+1
зачем для div указывать display: block?
This comment wasn’t rated yet0
У меня почему-то иногда возникали проблеммы с ие5.5 и 6. Потому и поставил. Финальную версию буду оттачивать
Total votes 1: ↑1 and ↓0+1
А правая колонка должна стоять справа?
А то у меня вот так это выглядит
screenshot2.png - image uploaded to Picamatic

Хром 4.0.229.1
OpenSuse 11.1
This comment wasn’t rated yet0
Я пока-что не делал примера с расбросом колонок. Они по одну сторону у меня. Назвал просто так. Надо было первая/вторая назвать. Сделать, чтобы разносилось по разным углам также не предоставляет сложностей. А ссылка. которую вы привели почему-то недоступна
Total votes 1: ↑1 and ↓0+1
Да, каждый верстальщик должен сверстать свой Holy Grail… Я похожий макет «придумал» вот тут.

По теме отпишусь позже.
This comment wasn’t rated yet0
для .footer необходимо отдельно прописать min-width, т.к. он вынесен за .wrapper
Total votes 2: ↑2 and ↓0+2
Да. Вы правы. Недоглядел малость. Причесывать еще буду код и причесывать)
This comment wasn’t rated yet0
А по-хорошему указать min-width для корневого элемента, т.е. body.
Total votes 1: ↑1 and ↓0+1
без обид, но сразу видно, что фонарь. то что решение рабочее и может многим подойти и будет кроссбраузерное — это не вопрос. но когда идут три колонки, а потом хедер, то сразу становится ясно, что человек не знает, что такое семантика — то к чему сейчас стремится верстка и то к чему ведет нас хтмл5. поменяй вы хедеры и колонки местами и загляни я в просмотр хтмл страницы вашего сайта, я бы сказал, да этот человек что-то понимает, а так… и позишн абсолют. работайте.
This comment wasn’t rated yet0
Какие могут быть обиды)
Посмотрите, пожалуйста комент
В следующей версии контент будет идти сразу за хедером. Это не представляет особой проблемы. А насчет абсолютного позиционирования — я привел технический метод реализации проблемы.
Total votes 1: ↑1 and ↓0+1
По условиям задания, использовать можно только CSS. HTML изменять нельзя.
This comment wasn’t rated yet0
Ваш вариант еще немного сыроват. Попробуйте добавить много контента — увидиье. Футер остается на месте, а контент улезает под него. Это ФФ3.5.
Total votes 2: ↑2 and ↓0+2
Я это и имел ввиду под «до уровня использования не допилил».
This comment wasn’t rated yet0
Просто стало интересно. Никогда о нем не задумывался. В общем — остался даже довольным. Как по мне — намного меньше багов, чем в ие6. Хотя это чисто субъективное мнение.
Total votes 1: ↑1 and ↓0+1
MS не везет с цифрой 6.
IE 6 — самый глючный, Windows 6 (Vista) — такая же.
Total votes 2: ↑2 and ↓0+2
WinMobile 6 в продолжение темы)
This comment wasn’t rated yet0
У меня 6.1 — видимо, единичка помогает — не глючный %)
This comment wasn’t rated yet0
Код ужасный. На уровне free-lance ru. Смотреть страшно, а уж применить…

1) Почему у .container height = 1%? Вы сдурели там что ли? Это хак для IE 5.0? Или у вас контент составляет 1% от высоты страницы?
2) Почему все свалено в кучу, нормальные css-стили и хаки для хромоногих браузеров?
3) Почему нет min-width на HTML? Без него при уменьшении ширины окна интересные эффекты с фоном страницы. Почему нет max-width на wrapper?
4) для Html/Body/Wrapper стоит убрать margin colapsing (чтобы верхний маргин контента не вываливался наружу)
5) Зачем вы для .container пишете display:block? Скажите мне, скажите, в каком браузере div по умолчанию отображается не блоком???
6) Зачем в футере position: relative?
7) Эта проблема становится сегодня менее актуальной, но у вас все размеры блоков заданы в пикселах! при увеличении шрифта они не будут растягиваться, и он будет из них вываливаться. Я. например, для футера пишу по этой причине не height, а min-height — пусть футер уйдет за границу экрана, но текст из него не вываливается.

В общем стили абсолютно кривые. Вам определенно стоит почитать описание CSS на сайте w3c, тематические блоги, и т.д, а не выкладывать это на главную. Я *категорически* не советую брать этот код кому-то за основу.

> Глубоко копать не буду, так как думаю, что тут все предельно ясно.

Думаю, вы сами не понимаете, что к чему в этой каше. Просто подобрали опытным путем. Я когда-то тоже таким методом пользовался.

Для прилипающего футера достаточно height: 100% на html & body, и min-height: 100% на wrapper (+ padding). И все. Плюс, возможно, пара хаков для IE6 (он понимает height и width как min-height и min-width для блоков с hasLayout? который включается через zoom:1). Я советую всем выносить хаки для IE6/7 в отдельный подключаемый через conditional comments файл, все равно скоро эти убогие браузеры вымрут, нечего портить ради них основной файл стилей.

Ну а по поводу колонок — мне нравятся идеи с флоатами (смотрите на chikuyonok.ru ). Флоаты, хоть и старая технология, но проверенная временем. кроссбраузерная и влияет на поток, в отличие от абсолютного позиционирования.

Ну и еще добавлю, какие требования я люблю предъявлять к своей верстке (хоть и не всегда получается их выполнить, но это полезно в плане образования и развития):

1) Валидность, предпочитаю HTML 4.01 Strict (да и у убогого браузера с ним проблем меньше)
2) Поддержка ИЕ6, правда сейчас вместо написания всяких тяжелых expressions, behavoiurs и прочих яваскриптов предпочитаю просто упрощать вид страницы: вместо круглых уголков — квадратные, вместо png24 — png8, но зато все читаемо и не тормозит
3) Читабельный вид страницы без стилей: для этого приходится переставлять блоки в исходнике, чтобы сначала шел контент, а потом дополнительные блоки, хедер, меню, и футер.

С этим пунктом серьезная сложность: сколько оставить места перед контентом, если мы не знаем сколько займет хедер и меню (с учетом изменения размера шрифта?).

4) Читабельность страницы без рисунков: значит. всюду, должны быть прописаны правильные фоновые цвета, а блоки со скругленными уголкаим превращаются в блоки с квадратными уголками (о да, это было нелегко сделать :) )
5) Ну и максимум доступности при работе без яваскрипта — потому что люблю пользвоаться браузером без яваскрипта.
6) Вот минимум лишних блоков целью не ставлю, ибо перечисленное выше имхо важнее. Лучше всюду вставлять пустые ins, чем смотреть, как IE не поддерживает :after и :before :(
Total votes 4: ↑1 and ↓3-2
Для начала приведите свои разработки в студию.
Что-то много написано, да ничего хорошего. Вы спец? Докажите. Вы общаетесь с людьми, у которых не один десяток сделанных проектов. Качественно сделанных. Если ничего по сути не можете сказать, а просто хотите показаться великим — дело ваше. Ветку с вами развивать не намерен.
Кстати, в институте вас должны учить и культуре. Сходите. Послушайте.
Total votes 2: ↑1 and ↓10
> Вы общаетесь с людьми, у которых не один десяток сделанных проектов. Качественно сделанных.

Мы в этом топике не обсуждаем чьи-то проекты, а приведенный вами код. Только его. Я понятия не имею, сколько вы сделали проектов, но в любом случае количеством меряться глупо — «фабрику сайтов» вы все равно не обгоните.

Вы, например, сможете объяснить смысл каждой строчки в первом примере? Если нет, зачем вы этот код тут публикуете? По вашему, CSS пишется исключительно методом подбора, пока не заработает? Какой смысл по 3 раза переопределять height? Вот упомянутый ранее Сергей Чикуенок с своем блоге, например, объясняет почему он пишет так, а не иначе.

Здесь же много начинающих верстальщиков, стоит ли их изначально учить такому подходу?

И насчет культуры — ну извините конечно, если вас задел мой комментарий, но он весь про код, я не перехожу на личности :) И если мне кажется, что что-то криво или неправильно, я так и пишу. И я по-прежнему думаю, что абсолютное позиционирование там для колонок — изврат. Я сам с ним возился и мне не понравилось, что получилось в итоге.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
UFO just landed and posted this here
> Хак для IE6. По-хорошему, конечно, должен идти в паре с height: auto !important или в CC.

hasLayout включить что ли? Мне как-то больше zoom нравится, сразу видно, что хак :)

Ну и «должен идти в паре с heigt:auto» — а разве не лучше кинуть все эти мерзкие хаки в отдельный файл (ну или в конец общего файла, если вам неохота загружать 2 файла), чтобы основной код хотя бы нормально читался? Невозможно же воспринимать код. в котором height 3 раза указана, и всюду разная!

>> интересные эффекты с фоном страницы
> Лучше всего лечатся раздельным указанием фонов для html и body (имхо).

Я имею в виду, что фон сайта часто задается на элементе html или body, и если задать min-width для wrapper (а не для html), при узком окне html станет по ширине уже wrapper и справа просто белый фон :) Кстати, похожая проблема есть даже на сайте artlebedev — при увеличении шрифта внутренняя часть страницы становится шире body и страница вываливается вправо, а хедер и футер остаются узкими.

> Графические дизайнерские плюшки, в которые эти блоки чаще всего приходится вписывать — как правило, тоже :). А юзеры IE6, FF2 и Chr1 сами не ищут легких путей.

Вообще да, я упомянул, что сейчас это менее актуально, с приходом нормальных браузеров. К сожалению, сам CSS крайне несовершенен для верстки чего-то сложнее, чем страница простого текста, тем более с учетом разных размеров шрифтов.

Но все же лучше (где можно) пользоваться по возможности em'ми, так как например в Линуксе нет некоторых шрифтов, они заменяются на другие, с другой высотой или шириной, и попиксельная верстка может поплыть там :) Именно из-за таких проблем, и не удается нормально сделать хедер в конце HTML-кода, а потом с помощью А.П. перекинуть его вверх :(

А еще есть ИЕ7, у которого какой-то свой алгоритм зума (в котором ломается даже сайт microsoft, ололо, так что я даже не интересовался как он работает и не проверяю сайты в нем, вроде он что-то нехорошее делает с маргинами при зуме).
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
> но иногда требования включают абсурдное на мой взгляд условие «валидный CSS2.1», и приходится изгаляться…

Ну вот, я ж говорю, проще все мерзкие хаки в файлик ie.css засунуть, и не придется потом писать height по 3 раза :)

А по поводу em'ов — это еще что, я вот экспериментировал с image text replacement, когда поверх текста кладется картинка, с каким-нибудь нестандартным шрифтом, как размеры такой картинки рассчитывать с учетом возможности изменения размера шрифта, и с учетом линуксоидов — непонятно :( Плюс, карти нка должна быть непрозрачной (чтобы исходный текст не проглядывал), так что размеры с запасом не возьмешь. Придется ждать всеобщего распространения векторной графики, ибо пиксельная в данном случае имеет свои ограничения.
This comment wasn’t rated yet0
Простите но Вы что хотели большим количеством текста хотели прикрыть свою некомпетентность в области верстки?
Total votes 1: ↑0 and ↓1-1
UFO just landed and posted this here
Функционально решение практически ничем не отличается от фоновой картинки, бывало я как то сам из-за лени тянул абсолютно с позиционированные блоки слоями ниже. Этот способ не решает поставленной цели, представьте, что у вас одна колонка поделена на 3 части разных цветов и все 3 части равномерно тянутся по высоте. При этом каждая часть наполнена контентом. В таком случае у вас не получится тянуть абсолютно с позиционированный блок синхронно с контентом. Если не понятно могу нарисовать)
This comment wasn’t rated yet0
Мне непонятен вот этот момент:

html, body {
        min-height: 100% !important;
        min-height: auto;
        height: 100%;
        border: none;
      }

Я бы тут ограничился просто height: 100%; (и, на сколько мне известно, всё при этом работает). Зачем задавать min-height, а затем ещё и переопределять его?
This comment wasn’t rated yet0
У меня (ff3.5.2, 1280х800) во всех примерах если сделать окно браузера шириной 50%, к примеру, и скролить вправо — футер не дотягивается до правой границы страницы. Так и должно быть?
This comment wasn’t rated yet0
Если попытаться из этого сделать фиксированный макет, поставив wrapperу
   margin: 0 auto;
то ie 6 не будет центрировать div (из-за <?xml version=«1.0» encoding=«UTF-8»?> в начале страницы).
Если же убрать этот <?xml version=«1.0» encoding=«UTF-8»?>, то тот же 6-й ие перестает растягивать колонки. Есть ли выход?
This comment wasn’t rated yet0
Единственное решение, которое всегда спасало, это использование overflow: hidden и float для левого/правого блока и контента, абсолютное позиционирование футера и паддингом контейнера, min-height: 100% для #main и height: 100% для html. Гм… вроде все. Работает 100% с любыми вариантами. Респект верстальщику, что показал мне этот способ.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Your account

Sections

Information

Services

Support
© 2006–2024, Habr