Тривиальные задачи по вёрстке

[samlabs821]

Вот для чего был создан Хабр!

[Vilz]

надо же ^_^ спасибо

[jeje]

Ваши крики напоминают «This is Sparta»

[samlabs821]

This is Habrahabr

[cleg]

тогда уж…

— This is madness!
— This is Habraaaaaaaa!!!11!

[almalexa]

Одно предложение забыл.
— This is madness!
— Madness?...THIS IS HABRAAA!
И иллюстрация.
o  o
|\ //(  )

[Vasylko]

Да! абсолютно согласен. Я на хабре два дня, а уже успел много нового узнать. спасибо всем. И сам буду стараться когда то чем то (что буду уметь хорошо) поделиться.

[Devgru]

Мне кажется или в первом примере можно обойтись одним дивом, а отступы задавать во вложенных p или h*?

[Vilz]

конечно можно, главное не задавать вертикальные отступы для #wrap они вызовут скролл

[sergiirocks]

ну, что ж, попробуем использовать чужие наработки, как раз надо начинать верстку )

[Vilz]

буду рад помочь

[Vilz]

первое, что приходит в голову, это вычислять высоту блока джаваскриптом

а насчёт футера, да, согласен, вариант даже лучше
добавлю его в примеры

[KF_NEXUS]

Ну всё-таки мы говори об html-вёрстке, так что с js будет уже не так интересно :P
А вообще продолжайте в том же духе, побольше бы ТАКИХ топиков на хабре!

[Vilz]

первое — не значит единственное, конечно js лучше не перегружать страницу…

А топики обязательно будут, в следующем хочу описать пнг-фиксы, мин-макс ширины-высоты и позишн: фиксед для ие6

[TiGR]

Ой, на хабре уже этих пнгфиксов и позишн фиксед столько было, что просто жуть. Вы уверены, что скажите что-то оригинальное?

[Vilz]

Уверен, что вообще не скажу ничего оригинального, потому что всё везде было стоооолько раз
Зато это будет хорошей частью большого цикла, в одном месте и удобно доступно

[grinka]

Проблема в том, что при гуглении выдаётся пара десятков рецептов, из которых минимум две трети — с ошибками, недоработками и т.п. А вот такая квинтессенция проверенных «HowTo» — крайне полезна. Именно потому, что
— проверено
— в одном месте
— конкретно и по делу

[Vilz]

только вот при абсолютном позиционировании, в котором работает bottom, если контента будет больше чем 100% экрана, то footer зависнет на границе окна, и не будет уезжать вниз

[chestah]

не зависнет, если позиционировать относительно #wrap а не боди
но всё равно приведённый вариант предпочтительней

[andreysmind]

Я вот этим способом пользуюсь. Может будет полезен.
ryanfait.com/sticky-footer/

[Vilz]

он ровно такой же как у меня в upd, который предложил GreLI чуть выше по ветке комментария

[Vilz]

добавил в примеры

[Vilz]

о мои руки крюки в 2 часа ночи… fixed

[Dobrii]

Советую лечь спать, выспаться, а с утра уже все править ;)

[Dobrii]

Мечтаю о том, чтобы кто-то начал цикл статей о JS-программинге, ибо сам толком ничего не выучу.

[dimonline]

а что именно интересует?

[Dobrii]

Ну, от начала до конца =)
То есть статьи для тех, кто не рубит в программировании ни капли, но желание научиться есть )

[dimonline]

От начала и до конца бывает очень разное.

Я давно собираюсь, но никак не выберу время, чтобы начать писать про свою небольшую JS-библиотеку для анимации. В процессе ее написания я столкнулся с кучей разных трудностей, с которыми пришлось научиться справляться. Может быть на ее примере и получится такой цикл статей.

А пока — могу посоветовать очень толковую книжку — David Flanagan — JavaScript: The Definitive Guide, Fifth Edition.

[Dobrii]

Все бы хорошо, но с английским у меня покамест не очень хорошо, а русский электронный вариант я так и не смог найти.

[dimonline]

У меня только английский электронный вариант…

Но, вообще, на русском она издана

[Dobrii]

На англ и я нашел )

А русский вариант в Молдове покамест не встречал (

[sintez]

Еще на английском для начинающих очень хороший сайт w3schools.com Там все прямо по шагам от азов к более сложному.

[edelweard]

В свете статей «Изучаем Руби. n-я капля» фраза «кто не рубит в программировании ни капли» приобретает новый смысл ;)

[dimonline]

Давай (можно на «ты», мне так проще?..) я попробую задать вопрос по-другому!

Решение каких конкретно задач тебя интересует на JS?
С какими проблемами сталкивался, что показалось тебе сложным и непонятным?

Ответь на эти несложные вопросы, а я пока подумаю над тем, какие типичные задачи (по аналогии с этим топиком) возникают перед JS-программистом

[Dobrii]

Конечно можно на «ты», даже нужно =)

Ну, яваскрипт мне нужен для того чтобы писать какие-нибудь веб-приложения.
Также для решения каких-нибудь тривиальных задач в верстке +)
Просто надоело то, что не берусь за интересные проекты, только из-за того, что не умею кодить на js.
Вот и решил изучить яваскрипт =)

Покамест серьезных проблем на своем пути не встречал, наверное из-за того, что только начал учить.

[dimonline]

Видимо, интересует в первую очередь управление DOM'ом, AJAX и иже с ними…

По этому поводу, пожалуй, есть что интересного сказать)

[Dobrii]

Буду премного благодарен )

[Snowindy]

Интересно, это какой дальности должна быть задача изучения нового языка, чтобы позволять себе ждать статьи для чайников на хабре?

Компоненты успеха просты:
0. «Хочу знать!»
1. www.ozon.ru/context/detail/id/3881091/
2. 1000р на покупку книги
3. visualjquery.com/

[dimaka]

Спасибо. Как раз этого здесь не хватало, это будет хорошим «читшитом» :)

[skorney]

Статья и примеры очень хорошие!

но мне не понравилось:
1) в футере копирайт нужно писать так: &_copy; (без подчеркивания)
2) подход не тот… мы про верстку говорим? — тогда при чем тут jQuery?=)
Посудите сами — еще до начала работы вес вашей странички УЖЕ 72 кБ! (http://cgvault.ru/vilz/blank/ — Web Page, complete — и это без картинок), а вся страница www.google.com.ua/ весит 16 кБ! (с картинками).

Вобщем нечего со старта кучу всего подключать=)

[Vilz]

спасибо

1) он так и был написан на самом деле, его хабраредактор почему то не сьел
2) пока только про вёрстку…

jQuery приходится постоянно использовать, еще там висит мелкий скрипт, который тоже почти всегда нуженя, поэтому и подцепляю его сразу.

… ну лично мне тут проще стереть лишнее…

[klinifini]

с картинками 24 кБ :) — www.google.com.ua/intl/en_com/images/logo_plain.png не сохраняется браузером

[dshster]

height:100%; и min-height:100%;
конфликтуют друг с другом, я выношу первый только для IE6 как конструкцию:
* html height:100%;

Интересная особенность — в «нормальных» браузерах при установке height блоку его контент «проваливается» при переполнении, а в IE6 высота блока увеличивается в зависимости от контента. Поэтому для реализации эффекта увеличения блока при переполнении и фиксации определенной высоты применяю двойную конструкцию.

[dshster]

поправка: для ie6 конструкция выглядит так:

[dshster]

* html .wrap { height:100%; }

извиняюсь за невнимательность.

[Vilz]

height и min-height конфликтуют? с чего бы? 0_о

что бы контент не проваливался в нормальных браузерах пишем height:auto!important, а ниже
height:100%
Нормальные браузеры понимают !important как более высокий приоритет и используют его, а
ие6 в следствии своей безумности переписывает «нижним значением» «важное значение»…

кроме того * html .class {} не проходит валидацию, похорошему его надо выносить в отдельный цсс файл

[dshster]

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

height:auto !important;
height:100%;

конфликтуют… эх… суббота… мозг в отключке. pardon.

[Vilz]

а зачем отказываться? Кроме того, только ие6 воспринимает !important так неадекватно, везде помеченные этим условием свойства имеют более высокий приоритет, чем все остальные, и height:100% не имеет никакой силы.

Если настанет время, когда ие6 не станет, то в данной конструкции height:100% будет просто ничего не значащим мусором, при этом подключение отдельного css файла будет «весить больше» что в кБ что по скорости генерации страницы… Естественно, если таких «хаков» много, то лучше держать их в одном месте

[mester]

* html проходит валидацию — открой валидатор и посмотри

[Vilz]

надо же ^_^ ну это всё равно же хак

[Chizh]

В разделе про футер «мы сразу же от него избавляемся, отодвигая блок на верх на ШИРИНУ футера», высоту наверное?

[Vilz]

ы! ага… исправил

[seraph]

Возможно для осликов стоит использовать условные комментарии (conditional comments)? Они и валидацию пройти помогут, и не придётся по несколько раз объявлять параметры, чтобы IE всё правильно понял.

[Vilz]

всё зависит от количества хаков. если он один на весь сайт, то подключать его с помощью условных комментариев нет смысла, если он весь наполнен ими, то лучше их хранить в отдельном цсс файле

[Dobrii]

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

[seraph]

Использование комментариев поможет в будущем, если какая-нибудь версия ie начнёт с дуру работать, как остальные нормальные браузеры. Тогда подправить условие или хак будет быстрее, так как файле стилей хак придётся ещё поискать какое-то время.

[Vilz]

согласен ^_^

[mester]

1 нюанс — скоро выйдет финальный ie8
а [if IE] который есть на многих сайтах (if lte IE 7 мало где видел) заставит его поддерживать эти хаки, которые приведут к некорректному отображению

поэтому совет:

даже в этом файле в conditional comments следует писать дополнительно хаки (кстати они валидные и ими можно пользоваться даже в обычном css)
* html .class{для ie6}
*+html .class{для ie7}

или изменить if IE на if lte IE 7

но даже в 8ке присутствуют определенные баги при верстке (по крайней мере в бете 2)

+ для любителей стандартов — посмотрите на ваш сайт в браузере Amaya

[mester]

в режиме IE8 — не видит
в режиме IE7 — видит

[konfuze]

1 нюанс — скоро выйдет финальный ie8

В принципе, как решение этой проблемы, мета-заголовок X-UA-Compatible:
pepelsbey.net/2008/08/im-not-coward-but-hell/

[mester]

А зачем тогда выпускают 8ку?
чтобы она продолжала работать как IE7?

[konfuze]

Это как страховка, если всё же 8ка не оправдает надежд и будет вести себя сильно отличным образом от большой тройки Gecko / WebKit / Opera.

Но, конечно, использование проверки <= ie7 более верно, чем просто = ie.

[mester]

Это торможение прогресса.

Если вы воспользуетесь IE8 бета — то увидите — что там много чего пофиксено.

Я считаю что технологи могут сами участвовать в браузерных войнах:
массово отказавшись от поддержки ие6 — можно перекинуть кучу пользователей на другие браузеры

у простого пользователя не будет другого выбора — кроме как поменять его — поскольку большинство сайтов будет открываться с глюками

заметьте — ие6 падает относительно, а не абсолютно:
www.liveinternet.ru/stat/ru/browsers.html?period=month

[dimonline]

Неужели вы до сих пор так и не поняли, что основноая часть пользователей ie6 — это корпоративные служащие? И чаще всего у них просто нет возможности поменять браузер!

[mester]

и даже если это так — то что вы хотели этим сказать?

[dimonline]

отказавшись от поддержки ie6 вы откажетесь не от браузера, а от определенной категории клиентов!

[mester]

> массово отказавшись

массово отказавшись этого не будет

и деньги — это не самое главное в жизни

[mester]

а отказавшись от поддержки ие6, я сократю время на верстку в 2-3 раза и за счет этого времени смогу сделать ещё больше более полезных дел, которые возможно принесут новых клиентов

[mester]

А тот, кто понижает мне карму — не дооценивает возможностей, открываемых отказом от IE6:

кучи селекторов (включая нормальный :hover), атрибутов в css типа input[type=«text»], нормальных min-width & min-height, возможности сделать более 4 position:relative во вложенных блоках (кто сталкивался с этим багом — тот поймет), нормальной блочной модели, спокойное использование float-ов и много других

[dimonline]

Это всё хорошо до тех пор, пока сайт не является инструментом бизнеса. Свой сайт можно сделать как угодно и для кого угодно.

Карму не трогал. Огромные преимущества отказа прекрасно осознаю, но не всегда могу себе это позволить!

[seraph]

Насколько я знаю, существует рекомендация в XHTML весь контент класть не в body, а в некоторый контейнер внутри него. Подтверждения в стандартах этому пока не нашёл, но особо и не искал. Возможно — правда, возможно — миф.

[Azs]

Зер гут!

[z6Dabrata]

Что бы это все хорошо и правильно работало во всех браузерах, хорошо бы указать доктайп

[seraph]

Доктайп в примере есть, можете проверить по ссылке. Видимо, для большей наглядности и в примере он не приведён.

[seraph]

Мда, надо всё-таки иногда тыкать в предпросмотр )
В примере по ссылке доктайп объявлен, в примере на этой странице он отсутствует. Я про это.

[Vilz]

доктайп — это аксиома же… в примере он есть, да

[konfuze]

А почему у вас в примере с, например, футером class="wrap", но id="footer"? Я бы написал id="wrap" (такой враппер у нас один, как ни крути), но нужно придерживаться хотя бы одного стиля.

Ещё у вас в примере пустого шаблона не закрыты тэги <link />.

Я в пустом шаблоне создаю под-папку img/content, куда складываю все «рыбные» изображения (вставленные дизайнером в макет для примера, но которые не относятся непосредственно к общему шаблону).
Человек, который будет ставить вёрстку на движок скажет вам спасибо.

[Vilz]

хм… я не помню почему так сделал, но у меня явно был какой-то хитрый план, а вообще-то вы правы, враппер один.

На счёт link — косяк, да. исправлю когда до файлов доберусь, сегодня

про контент тоже отличная идея, спасибо

[ImEugene]

Я так же поступаю: все «нужные» изображения, относящиеся к дизайну в папке i/ храню, а рыбные в img/ (правда, «спасибо» не кому говорить, т.к. сам на движок ставлю =)). А ещё, есть набор весёлых рыбных картинок, которые в каждом проекте использую, чтобы во время вёрстки настроение поднимать самому себе.

[Panya]

Просто автор не написал, про то как центрировать блок, если IE находится в Quirks Mode. В Quirks Mode в IE text-align:center; действует не только на строчные элементы, но и на блочные. Поэтому решение будет таковым:

body {
  text-align:center;
}

.wrap {
  text-align:left;
}

Но, конечно, лучше всего перевести IE в режим соответствия стандартам (путем указания правильного доктайпа), а решение с text-align оставить для старых IE (5.5, 5) или убрать в отдельный файл стилей и подключать его только для IE < 6 с помощью CC.

[Rooc]

спасибо!

[kobzon]

Спасибо за статью. Все очень толково написано. Побольше бы подобных статей.

[dima_smol]

Спасибо, возьму на заметку

[Panya]

В примере с центрированием блока, попап, на самом деле, будет не по центру из-за того, что в отрицательных маржинах вы не учли padding и border.

[Vilz]

согласен, ну это специально сделано, для наглядности…

[Vilz]

полезен, когда в дизайне например, два бэкграунда, один общий фоновый, другой контентный, раз несколько на такое натыкался…

[1602]

В первом примере в CSS не хватает html, body{margin:0}, поэтому появляется скролл в Опере (в остальных не проверял). В целом же — отличная подборка. Спасибо.

[Vilz]

margin:0 для html и body и другие обнуления обычно прописаны в reset.css

[invisiblekid]

то, что доктор прописал.
спасибо огромное!

[kostitsyn]

Интересно, но в целом очевидно (:
Буду ждать статей с тонкостями, может что-то новое узнаю (:
спасибо.

[AzeriFire]

Спасибо большое.Интересно. Но я всегда использовал float вместо position. Мне кажется с флоатом больше кроссбраузерный CSS получается.

[Vilz]

вообще float сделан не для позиционирования блоков, а для обтекания, я стараюсь избегать его без надобности, уж очень он нестабилен особенно в ие6

[kr1z]

Давно уже хотел научится дивами верстать, все времени и сил не нахожу.
Думаю начну с этой статьи.

[takeit]

Спасибо! Только начинаю изучать верстку. Премного благодарен :)

[indigo]

Спасибо за статью — мне как раз очень не хватает знаний по решению верстальных задач. Продолжайте в том же духе!

[xalexx]

В примере с подвалом внизу страницы можно не использовать лишний блок, в данном случае empty_inner, а просто задать нижние внутренние отступы у тех блоков в контентной части которые будут последними.

[Andrey_Gordeev]

А часто у Вас в контентной части висит один и тот же блок на всех страницах? )

[xalexx]

Ну обычно структура выглядит как-то так:
<wrap>
<div id=«header»></div>

<content>
<sidebar>
<wrap>

[xalexx]

Простите, случайно запостил предыдущий коммент.

<div id=«wrap»>
<div id=«header»></div>
<div id=«content»></div>
<div id=«sidebar»></div>
</div>
<div id=«footer»></div>

По крайней мере в случаях когда известно какие блоки будут последними, можно лишний не использовать.

[Andrey_Gordeev]

Ну в общем я, конечно, согласен… если такой блок есть, однозначно, лучше избавиться от несимантичного empty_inner'а. Но это уже дело смекалки.

[Andrey_Gordeev]

Для «прижатого» футера сам долго пользовался этим способом, решение довольно распространенное но, в числе прочих недостатков имеет вот такую багу… в Опере и ИЕ при растягивании окна по вертикали футер остается на месте. В Опере без JS пока никак не лечится, а вот для ИЕ проблема решается.

boagworld.com/technology/fixed_footers_without_javascri/

[Vilz]

странно, вроде бы всё тянется куда надо, или я не уловил проблемы

[Andrey_Gordeev]

Если попытаться растянуть окно браузера по вертикали потянув за нижнюю границу окна, футер остается на месте как будто он позиционирован абсолютно. Такая бага есть только в ИЕ и в Опере. Кстати, если растягивать окно за нижний-правый угол (т.е. по вертикали и горизонтали одновременно) ошибка уже не наблюдается.

[Vilz]

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

[ennui]

Плюс за топик, побольше таких. Буду рад прочитать продолжение.
В итоге может получиться хороший cookbook для вёрстки.

[chestah]

по поводу центрирования — проскакивал с полгода назад способ с использованием двух флоат-блоков вокруг основного
это, кажется, единственный способ без экспрешенов и нехороших отрицательных марджинов

только вот ссылка не сохранилась и гуглом не найти

[DENgerous]

Футер снизу уплывает если в ФФ поменять размер шрифта. Появляется скролл вертикальный.

[rasuvaeff]

Автору спасибо, хочу попробовать начать верстать, поэтому ваши уроки весьма в тему. Спасибо.

[xtremespb]

Спасибо за отличный пост! Занимаюсь версткой, и сравнительно не так давно перешел с табличной. Очень сложно найти подобные качественные примеры в одном месте.

[GMile]

А я надеялся увидеть небольшую подборку задач без решения… (или со скрытым за линком решением)

[malferov]

Спасибо, переверстал одну из главных, за которыми наблюдаю ;-)

[Octane]

Мне кажется статьи для habrahabr.ru должны быть проработаны до мелочей :-)

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

height:20px;
  margin-top:-21px;

  line-height: 20px;
  vertical-align:middle;

  border-top: 1px solid #e8e9e8;  
  width:100%;
  text-align:right;
  font-size:10px;

можно бы было сгруппировать:

width: 100%;
height: 20px;
margin-top: -21px;
font-size: 10px;
line-height: 20px;
text-align: right;
vertical-align: middle;
border-top: 1px solid #e8e9e8;

И форматирование кода хромает, то есть пробел между значением свойства и двоеточием, то все слитно. Вы же научить чему-то людей хотите, так преподносите материал соответственно уровню преподавателя :-)

Что за название «contentdiv»? В остальные имена классов тоже названия тегов, к которым они привязаны, добавлять?
А «empty_inner» зачем так называть, если я туда что-нибудь добавлю потом, это уже не empty будет и придется переименовывать класс? Да и без пустых блоков можно обойтись…

А вот еще:

/*украшательства*/  
  border-left:1px solid #69b401;
  border-right:1px solid #69b401; 

субъективно конечно, но я бы сделал так:

border-width: 0 1px;
border-style: solid;
border-color: #69b401;

В общем, однозначно продолжать писать подобные статьи нужно, даже не важно, что такого материала везде полно, но чтобы он не стал еще одним обычным примером, а был грамотным и профессиональным материалом для изучения, стоит преподносить его в соответствующем виде.

[Panya]

субъективно конечно, но я бы сделал так:

border-width: 0 1px;
border-style: solid;
border-color: #69b401;

=) А я бы так:

border:solid #69b401;
border-width:0 1px;

[Panya]

Проверил в IE5-7 везде работает как надо.

[Panya]

Да, есть такое. Это особенность тем оформления windows xp. Заключается в том, что бордеры у input сбрасываются только путем указания border:0 (обнуления ширины бордера). В случаях сбрасывания через border:none; рамка у элементов форм почему-то не сбрасывается. При этом, если переключить тему оформления на классическую, все работает нормально. Как в Висте не знаю, я вовремя свичнулся на macos.

[Vilz]

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

[trybeee]

Спасибо большое! Ждем продолжения…

[dohlik]

А зачем указывать line-height в футере? Для вертикального выравнивания?
А если в футере будет несколько строк?

[Vilz]

^_^ очевидно же, не указывать line-height

[dohlik]

lol
Либо сразу это оговорите, либо вообще уберите. Если это тривиальные задачки, представьте, сколько народу могут на это напороться

[Vilz]

хорошо, через несколько часов буду приводить в порядок статью — уберу

[avz]

Как сделать чтобы contentdiv тоже был на всю высоту?

[volk13]

Не хочу показаться занудой, но в пустой html файл я бы еще добавил строку
/>

[volk13]

Habr съел код: meta name=«keywords» content=""

[Vilz]

учитывая, что я всегда верстаю «на движок» то от шапки нужен только доктайп и подключение скриптов. СЕО идёт отдельным пунктом

[4ars]

вы не подскажете как решить такую задачу

<header> (fix px)
<content> (100%)
<footer> (fix px)

логично было бы предположить если в footer используется margin-top с минусом
то в header использовать margin-bottom c минусом
либо в content margin:0 auto (-(header)px + -(footer)px);
но это оказывается не верным решением

[Vilz]

чуть ниже ответил

[Vilz]

а почему её просто не поставить в контентой части в самом верху 0_о

<div class='wrap'>
<div class='header'></div>
</div>
<div class='footer'></div>

не выдумывайте лишних сложностей

[4ars]

да с header внутри это конечно понятно и сразу что приходит на ум

интересно как поступить именно в ситуации когда header нужно вынести наверх

вообщем если решу опишу здесь решение

[Vilz]

хм… ну надо более конкретно задавать вопросы, я же не вижу вашего дизайна, а на пальцах такие не очевидные вещи сложно распознать даже телепату…

[4ars]

собственно дизайна никакого нет
я просто пытаюсь узнать как сделать такое:


теоретический так:
<div style=«height: 100px; background-color: blue;»>1 header</div>

<div style=«height: 100%; margin:0 auto -200px; background-color: red;»>2 content</div>

<div style=«height: 100px; background-color: green;»>3 footer</div>

но тогда центральный див уходит вниз

[Vilz]

попробую вечером поковыряться, но вообще-то я так и не вижу никакого смысла выносить шапку из wrap, он же не футер, что бы привесить его сверху не надо изгаляться…

кстати можно его position:absolute; top:0px; left:0px; прибить жестко вне wrap, а контент паддингом ниже отодвинуть

[tema_sun]

Сначала часа полтора поломал голову, как же это долбаный центральный блок сделать по центру во всех браузерах. Потом нашел эту статья.
Огромное человеческое спасибо вам!:)

[kr1z]

Автор, когда там продолжение будет? заждались

[Vilz]

ближайшее время я думаю >.< мерзкий аврал на работе

[MaEcTPo]

Я не знаю что не так, но даже на вашем примере, когда футер попробывать увеличить до 200пх например, и соответственно добавить ему margin-top: -201px то он налезет на контент сверху.
Пробовал в ФФ2 и опера 9.24, но думаю в остальных не будет отличаться.

[Vilz]

а высоту распорки ".empty_inner" кто будет менять?

[MaEcTPo]

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

[Vilz]

ну… =) сложно понять какие из очевидных для меня вещей для остальных совсем не очевидны =) но я старался

[installero]

Спасибо!

[installero]

>У этого решения есть один значительный минус. левая верхняя точка у нас получается по середине блока, а от неё ведется позиционирование. Поэтому, когда размеры браузера превышают размеры блока, то он прячется верхней и левой частью за границу экрана без прокрутки.

.popup {
position:absolute;
...
}

Заменить на position:fixed

[MaEcTPo]

У меня возникла какая-то непонятная бага. А именно, когда футер прижимается к низу, то в фаерфоксах он находится за дивом с id wrap и нажать на ссылки не получается, ФФ их отказывается видеть напрочь. IE6+, Opera 9.24+ — все нормально, бажит только ФФ2, ФФ3.5. С чем это может быть связано?
P.S. z-index я конечно же пробовал, футеру — 9999, остальным, которые могут его перекрывать — 1, 0, -1. Ничего не помогает.

Буду очень благодарен за помощь.