Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 74
Хорошо, попробуем. Но у меня просьба, можно сказать для себя. Если вы div закрываете, напишите рядом что-то типа А то сходу и не поймёшь, что где закрывается.
чорт. хабрапарсер всё скушал:
<./div><.!-- #main -->
<./div><.!-- #main -->
ну это-то здесь причем, делайте у себя в коде что хотите. исходники очищены от всего лишнего, чтобы дать наглядное и схематичное представление
Я думал, комментирование исходников — есть хорошая привычка. Но, раз вы так говорите, то я приму как есть. Вам виднее, что делать с вашим кодом ;-)
Просто табуляция в пробел не даёт такой наглядности, как табуляция в четыре.
Просто табуляция в пробел не даёт такой наглядности, как табуляция в четыре.
view-source:http://smileg.akmedia.ru/html/teplo/
Даже когда подвал находится внутри обертки, пустой не обязателен
Честно говоря, этот способ не сильно отличается от тех, что в топе гугла.
У всех них один большой недостаток — фиксированная высота.
Прибить футер к низу можно вложив его во wrap, дать position: absolute; bottom: 0px; height: 150px;
И main сказать margin-bottom: 150px;
И в хроме без лишних clear: both всё работает.
У всех них один большой недостаток — фиксированная высота.
Прибить футер к низу можно вложив его во wrap, дать position: absolute; bottom: 0px; height: 150px;
И main сказать margin-bottom: 150px;
И в хроме без лишних clear: both всё работает.
а для чего, кстати, делать футер резиновым по высоте? у меня вообще версий нет… сколько сайтов пересмотрел — везде фикс
Кстати, вроде бы при таком варианте в IE6 если не задать
clear:both для подвала, он не отображается.
я верю Вам на слово, что Вы нормально распорядитесь своими знаниями и навыками, но личной мой опыт переверстки чужих версток говорит о том, что большинство людей абсолютно позиционирующих блоки на странице — просто извращенцы, предлагаю не пропагандировать такой метод, дабы их ряды не пополнялись ;)
не, конечно, пока такие люди есть — у меня есть работа, которая стоит дороже обычной верстки, но все же я за то, чтобы в нашей стране научились верстать…
не, конечно, пока такие люди есть — у меня есть работа, которая стоит дороже обычной верстки, но все же я за то, чтобы в нашей стране научились верстать…
Возможно. Я не позиционирую себя как верстальщик.
Буду рад услышать недостатки position:absolute в данном случае.
Буду рад услышать недостатки position:absolute в данном случае.
ну дело в том, что верстка блоков абсолютами — это все равно что демонизм и поклонение сотоне.
как правило в таком макете открыв html код не можешь сразу понять что к чему, как это все работает, сетки они для того и придумывались, чтобы упорядочить расположение блоков, если верстка хорошая, то лично мне достаточно взглянуть только на её html-код и я уже в подробностях представляю себе всю сетку сайта, а если сверстать абсолютами, то футер в коде может спокойно идти между центральной и левой колонкой, а колонки вообще распологаться в обратном порядке и т.д. вообще хаос, к тому же как показывает опыт абсолютные верстки пишутся одними id'шками вместо вложенности и наследования классов, что также ухудшает читаемость и самый главный минус: абсолютами никогда не сделаешь действительно кроссбраузерную предсказуемую растяжку… вообще такой метод можно критиковать ещё очень долго, он ещё увеличивает css-код примерно в 1.5 раза и ещё много чего.
Хотя грамотный верстальщик даже абсолютами сделает все аккуратно и понятно, но я не встречал грамотных верстальщиков использующих абсолют
как правило в таком макете открыв html код не можешь сразу понять что к чему, как это все работает, сетки они для того и придумывались, чтобы упорядочить расположение блоков, если верстка хорошая, то лично мне достаточно взглянуть только на её html-код и я уже в подробностях представляю себе всю сетку сайта, а если сверстать абсолютами, то футер в коде может спокойно идти между центральной и левой колонкой, а колонки вообще распологаться в обратном порядке и т.д. вообще хаос, к тому же как показывает опыт абсолютные верстки пишутся одними id'шками вместо вложенности и наследования классов, что также ухудшает читаемость и самый главный минус: абсолютами никогда не сделаешь действительно кроссбраузерную предсказуемую растяжку… вообще такой метод можно критиковать ещё очень долго, он ещё увеличивает css-код примерно в 1.5 раза и ещё много чего.
Хотя грамотный верстальщик даже абсолютами сделает все аккуратно и понятно, но я не встречал грамотных верстальщиков использующих абсолют
absolute это всего-лишь инструмент и весьма удобный когда нужно распологать блоки соответсвенно логике — «это всегда должно быть здесь а не обтекать (float) предыдущий элемент»
расположение блоков в html (логика) может несоответсвовать расположению визуально (презентация) в целях SEO + удобства мобильного сёрфинга.
я вот ужасаюсь когда float-left, float-left, float-left — как кирпичами стенку строят, по аналогии с td-td-td
расположение блоков в html (логика) может несоответсвовать расположению визуально (презентация) в целях SEO + удобства мобильного сёрфинга.
я вот ужасаюсь когда float-left, float-left, float-left — как кирпичами стенку строят, по аналогии с td-td-td
на малых экранах абсолютно-позиционированный футер начнёт есть даже небольшой контент.
Ага, баян неизвестно сколько летней давности, находится в Гугле на первой странице, смысл то его переводить?
p.s. Вы правда думаете, имеет смысл ориентироваться на IE 5.5 for Mac?
p.s. Вы правда думаете, имеет смысл ориентироваться на IE 5.5 for Mac?
что значит «смысл то его переводить»? вы знаете об этом методе? хорошо, а но другие-то нет.
есть люди, которые об этом не слышали.
которым ну вот просто не приходилось решать такую задачу, как прибитый футер средствами CSS. зайти на хабр, вбить желанное в поиск, получить кроссбраузернейшее решение (на сайте есть полный список), подробно описанное на русском, и еще вдовесок с десяток потенциально полезных комментов и уточнений — это ли не то, ради чего создавался хабр? У топик на данный момент на пятнадцать плюсов всего один минус — о чем это да говорит, задумайтесь
есть люди, которые об этом не слышали.
которым ну вот просто не приходилось решать такую задачу, как прибитый футер средствами CSS. зайти на хабр, вбить желанное в поиск, получить кроссбраузернейшее решение (на сайте есть полный список), подробно описанное на русском, и еще вдовесок с десяток потенциально полезных комментов и уточнений — это ли не то, ради чего создавался хабр? У топик на данный момент на пятнадцать плюсов всего один минус — о чем это да говорит, задумайтесь
HTML и CSS — интернациональные языки, перевода не требуют ;)
успешно пользуюсь уже давным-давно одним и тем же широко известным методом с абсолютным позиционированием «футера» относительно body. не стал бы давать ссылку, да вот не все знают, что этот метод в чистом его виде имеет проблему в IE при наличии динамического содержимого на странице. поэтому ссылка www.webcocktail.ru/coding/positioning-footer-at-the-bottom/ на статью с описанием проблемы и её решением.
#footer {position: relative;
margin-top: -150px; /* отрицательное значение высоты футера */
height: 150px;
clear:both;} *зануда-mode=on*
По-моему «высота футера» — это атрибут «height», а «margin-top» это верхний отступ или что-то вроде того ;)
это не перевод «margin-top», а разъяснение того, какое ему нужно задать значение
Ясно. Я просто неверно истолковал комментарий к той строчке.
Если честно, то без разъяснения было бы понятнее, а так оно просто запутывает и может быть понято двояко. Вот как, к примеру, понял его я: «вот у нас строчка „margin-top: -150px“, в ней задаётся высота футера со значением -150». Что не совсем так, о чём и был мой предыдущий комментарий.
Если было бы что-то вроде «отступ равен высоте со знаком „-“» или «высота футера, помноженая на -1» или хотя бы «height * -1» — было бы слегка понятнее.
P.S.: я знаю, что это прямой перевод с оригинала, я просто высказываю своё личное мнение и своё личное восприятие. Минусуйте дальше.
Если честно, то без разъяснения было бы понятнее, а так оно просто запутывает и может быть понято двояко. Вот как, к примеру, понял его я: «вот у нас строчка „margin-top: -150px“, в ней задаётся высота футера со значением -150». Что не совсем так, о чём и был мой предыдущий комментарий.
Если было бы что-то вроде «отступ равен высоте со знаком „-“» или «высота футера, помноженая на -1» или хотя бы «height * -1» — было бы слегка понятнее.
P.S.: я знаю, что это прямой перевод с оригинала, я просто высказываю своё личное мнение и своё личное восприятие. Минусуйте дальше.
Метод совсем не новый, это понятно. Не указан один важный недостаток, в IE6 при таком методе, при ресайзе окна, может появляться отступ в 1px снизу.
csstool.ru вам в помощь. у них вроде подобная методика используется.
Да и вообще ресурс маст юз для верстальщика
(сам кроме как пользователь к ресурсу отношения не имею)
Да и вообще ресурс маст юз для верстальщика
(сам кроме как пользователь к ресурсу отношения не имею)
Лично я стараюсь избегать фиксированного позиционирования и высоты блоков при верстке.
А с футером, если он есть, обычно вообще сплошной геморрой =(
За метод спасибо. Правда, подобный веловипед я уже изобретал :)
А с футером, если он есть, обычно вообще сплошной геморрой =(
За метод спасибо. Правда, подобный веловипед я уже изобретал :)
Насмешили, молодцы:
/* Hides from IE-mac \*/
чем position: absolute для футера не устраивает? никаких clearfix хаков не нужно.
ну вот Вы думаете что пишете? ведь прочтут и так и будут делать. в px шрифт вообще задавать нельзя (когда уже эту возможность уберут из стандарта?), в pt только в крайних случаях. и это не тот случай.
вместо задания шрифта в абсолютных величинах, лучше задать высоту футера в относительных, наприер в ex;
Устанавливая размер шрифтов в относительных величинах, помните, что пользователи могут увеличивать их. В некоторых элементах, хотя бы даже в футере, это может испортить настройки высоты и получится разрыв, если тексту не хватает места. Используйте абсолютные величины (pt или px), или просто сделайте футер побольше.
ну вот Вы думаете что пишете? ведь прочтут и так и будут делать. в px шрифт вообще задавать нельзя (когда уже эту возможность уберут из стандарта?), в pt только в крайних случаях. и это не тот случай.
вместо задания шрифта в абсолютных величинах, лучше задать высоту футера в относительных, наприер в ex;
причем тут я? я перевел статью. все вопросы по поводу уместности использования величин направляйте, пожалуйста, к автору, ссылка на него указана
полностью согласен на счет px, но здесь не прокатят относительные величины для высоты футера, т.к. отрицательный отступ сверху должен быть равен высоте футера, может в нормальных браузерах это и прокатет (что тоже не факт) но осел точно умрет на месте ;)
Буквально 2 недели назад делал именно эту нарезку для ASP.
Для прилипающего футера типичная ASP конструкция … content… — не работает…
Пришлось сам футер выносить из формы…
Для прилипающего футера типичная ASP конструкция … content… — не работает…
Пришлось сам футер выносить из формы…
Используйте абсолютные величины (pt или px)
Вы уверены, что pt уместно использовать в вебе???
идеологически нет, но это лучше чем px и тем более лучше писать css в строку :) чем бы дитя не тешилось лишь бы не гранатой ;)
Пожалуйста, поясните.
Как мне представляется, pt — это хуже, чем em, в плане прогнозируемости результата… Речь о том, что, как правило, страница представляет жесткий или не очень, но пиксельный каркас, в который заливаются плавающие тексты. Поэтому px — это самый надежный способ обезопасить себя от некоторых моментов, таких как вылезание подписи из подложки фиксированного размера.
Как мне представляется, pt — это хуже, чем em, в плане прогнозируемости результата… Речь о том, что, как правило, страница представляет жесткий или не очень, но пиксельный каркас, в который заливаются плавающие тексты. Поэтому px — это самый надежный способ обезопасить себя от некоторых моментов, таких как вылезание подписи из подложки фиксированного размера.
это хуже чем em, но начнем с того, что нормальный браузер сориентируется в любой ситуации адекватно, а выползание надписи за границы зоны не такой уж и страшный грех (ну кроме тех случаев когда цвет шрифта близок к цвету бэкграунда окружения).
Но если вести идеологическую войну, стучать тапком по-столу и кричать что так правильно, а так нет, то px использовать для шрифтов принципиально неправильно, это единица измерения растровых изображений, а шрифт имеет свойства увеличиваться, которое заложенно в самой сути шрифта :)
Для шрифтов я пользуюсь исключительно em, но меня не напугаешь pt или px в графе font-size или line-height ;)
Но если вести идеологическую войну, стучать тапком по-столу и кричать что так правильно, а так нет, то px использовать для шрифтов принципиально неправильно, это единица измерения растровых изображений, а шрифт имеет свойства увеличиваться, которое заложенно в самой сути шрифта :)
Для шрифтов я пользуюсь исключительно em, но меня не напугаешь pt или px в графе font-size или line-height ;)
а line-height чем не угодил-то? ))))) вот его в пикселах-то задавать на мой взгляд можно (т.к. используется не только для корректирования вида текста). ну лан…
em, конечно, правильно (хотя % могут даже красивее выглядеть, дело вкуса), но и в пикселах не вижу ничего криминального. Есть задачи, которые решать em'ами — тоже изврат))))
em, конечно, правильно (хотя % могут даже красивее выглядеть, дело вкуса), но и в пикселах не вижу ничего криминального. Есть задачи, которые решать em'ами — тоже изврат))))
да извращенцы кругом и рядом, сам постоянно сталкиваюсь с задачи переверстки чужих извратов и честно говоря такие проблемы и проблемами не являются, недавно был резиновый сайт (1000px-1400px) в котором все на странице позиционировалось на странице при помощи position: absolute, position: relative; но зато, бля, все дивами написано, хотелось плюнуть в лицо этому человеку :)
Лучше верстать портал таблицами и не пользоваться при этом colspan, rowspan, но без садизма =)
Лучше верстать портал таблицами и не пользоваться при этом colspan, rowspan, но без садизма =)
вот его в пикселах-то задавать на мой взгляд можнокак же можно? а если шрифт у пользователя получится больше заданного line-height?
em, конечно, правильно (хотя % могут даже красивее выглядеть, дело вкуса)а есть какая-то разница между 1.1em и 101%?
Есть задачи, которые решать em'ами — тоже изврат))))если эти задачи связаны с текстом — прошу примеры.
* 110%
1. если интерльньяж используется для смещения надписи, и это кореллирует с некоторым пиксельно-постоянным элементом
2. конечно)) 110%. если серьезно, то целые мне кажется лучше выглядят, чем float
3. если нужно обозначить относительно точно очень крупный шрифт. em (если рассчитывать его от defaul_font_size) может привести к сильному разбросу
2. конечно)) 110%. если серьезно, то целые мне кажется лучше выглядят, чем float
3. если нужно обозначить относительно точно очень крупный шрифт. em (если рассчитывать его от defaul_font_size) может привести к сильному разбросу
Ой ли? Если уж быть точным pt — типографская мера и уместна она лишь в одном случае — для установки размеров шрифтов через css при подготовке html-документа для печати. Не надо путать лист формата A4 c окном браузера.
Буквально пару дней назад ровно также прижимал футер…
Если взглянете на мои верстки последнего года не найдете ни одной сделаной по-другому =)
на самом деле
position: relative;
clear:both;
совершенно излишни ;) я никогда так не писал, работает во всех браузерах отлично, а самое главное исходя из спецификаций оно так и должно работать, так что это метод на много-много лет вперед
и ещё чуть-чуть:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
помоему код не достаточно прочитать и сразу все становится понятно
я предпочитаю писать
html, body {height: 100%;}
#wrap {_height: 100%; min-height: 100%;}
эффект точно такой же, только несмотря на кашунственный хак для ie6 код как-то сразу становится понятнее и последовательнее
на самом деле
position: relative;
clear:both;
совершенно излишни ;) я никогда так не писал, работает во всех браузерах отлично, а самое главное исходя из спецификаций оно так и должно работать, так что это метод на много-много лет вперед
и ещё чуть-чуть:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
помоему код не достаточно прочитать и сразу все становится понятно
я предпочитаю писать
html, body {height: 100%;}
#wrap {_height: 100%; min-height: 100%;}
эффект точно такой же, только несмотря на кашунственный хак для ie6 код как-то сразу становится понятнее и последовательнее
>> Вместо полей снаружи (margins) лучше использовать отступы внутри (padding)
Прошу прощения, первый коммент ушёл случайно.
>> Вместо полей снаружи (margins) лучше использовать отступы внутри (padding)
И вместо одного лишнего div'а получим по одному дополнительному div'у везде, где нужно сделать border+margin?
>> Вместо полей снаружи (margins) лучше использовать отступы внутри (padding)
И вместо одного лишнего div'а получим по одному дополнительному div'у везде, где нужно сделать border+margin?
а я чета не совсем туда коммент впихнул =)
не, на самом деле мы получаем точно такой же один дополнительный див, но в нашем случае он не пустой, он служит оберткой для всего кроме футера, я обычно называю его class=«not_footer» и сразу становится ясно че он делает и зачем призван на страницу, так малость логичнее и семантичнее ;)
не, на самом деле мы получаем точно такой же один дополнительный див, но в нашем случае он не пустой, он служит оберткой для всего кроме футера, я обычно называю его class=«not_footer» и сразу становится ясно че он делает и зачем призван на страницу, так малость логичнее и семантичнее ;)
Гмм… Ну так автор говорит, что если указать внутри контейнера margin футер может уплыть вниз на величину этого margin'а и предлагает заменить его padding'ом. Лично я не знаю способов нарисовать border по краю блока с внешним отступом не используя margin или дополнительный контейнер (а-ля .outer { padding: 10px } .outer > .inner { border: 1px solid red })
а я знаю, сделать это верхним бордером футера :) футер-то как раз познимится на эти 150px ;)
:)))
во-первых, это будет граница ниже отступа, а нужно границу выше отступа
во-вторых, если нужны границы у 3 колонок, между которыми по 10рх отступ — тогда как? нет, можно, конечно, добавить div'ы с бордерами, но это опять-таки лишние элементы. то есть, «кто чего боится, то с тем и случится» :)
зы: способ, конечно, хорош и применим в некоторых условиях… но применять нужно с опаской :) «вдруг завтра заказчик захочет бордер» :)
во-первых, это будет граница ниже отступа, а нужно границу выше отступа
во-вторых, если нужны границы у 3 колонок, между которыми по 10рх отступ — тогда как? нет, можно, конечно, добавить div'ы с бордерами, но это опять-таки лишние элементы. то есть, «кто чего боится, то с тем и случится» :)
зы: способ, конечно, хорош и применим в некоторых условиях… но применять нужно с опаской :) «вдруг завтра заказчик захочет бордер» :)
не, подождите, помоему Вы сами запутались, если Вам нужно отсупить ещё на 10px и там сделать бордер, то конечно прийдется использовать ещё один оберточный див, но за больше чем год моей работы с такой техникой подобных задач не встречал, а вот задачу чтобы НА ГРАНИЦЕ между футером и контентом был бордер — были.
Предположим что футер 100px в высоту тогда просто делаем
.outer {
padding-bottom: 100px;
}
.footer {
height: 100px;
margin-top: -100px;
border-top: 1px solid red;
}
и все, линия получается точно на грнице между ними, кстати есть ещё версия:
.outer {
padding-bottom: 100px;
}
.footer {
height: 100px;
margin-top: -110px;
padding-top: 10px;
border-top: 1px solid red;
}
тогда линия залезет на 10px вверх на контент, на самом деле Ваша задача легко решается нужно только искать решения ;)
Предположим что футер 100px в высоту тогда просто делаем
.outer {
padding-bottom: 100px;
}
.footer {
height: 100px;
margin-top: -100px;
border-top: 1px solid red;
}
и все, линия получается точно на грнице между ними, кстати есть ещё версия:
.outer {
padding-bottom: 100px;
}
.footer {
height: 100px;
margin-top: -110px;
padding-top: 10px;
border-top: 1px solid red;
}
тогда линия залезет на 10px вверх на контент, на самом деле Ваша задача легко решается нужно только искать решения ;)
а ещё если у Вас не одноколоночный сайт, то Вы вложите в обертку колонки, у них теоретически тоже можно указывать бордер… все зависит от задачи ;)
не, на самом деле мы получаем точно такой же один дополнительный див, но в нашем случае он не пустой, он служит оберткой для всего кроме футера, я обычно называю его class=«not_footer» и сразу становится ясно че он делает и зачем призван на страницу, так малость логичнее и семантичнее ;)
столкнулся с подобной задачей, только есть нюанс. весь контент лежит на листе бумаги с отступами по 50 пикселей от верха и низа. лист тянется по высоте. соответственно футер должен плавать. кроме листа бумаги у страницы есть свой бэк. может кто сталкиваться, как сформировать эти отступы?
в гуглохроме футер утыкается вниз, причем более чем — появляется вертикальная полоса прокрутки. Не пойму пока, в чем проблема.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS Sticky Footer / Прилипающий футер