Ещё одно решение, как закрепить подвал у нижней границы экрана при маленьком размере контента.
Все заметки с тегом «CSS»
-
100% по высоте
26 марта 2007
-
Выпадающее меню
26 марта 2007
Комментировать -
Наглядный тест поддержки CSS-селекторов
23 марта 2007
Довольно занятный и наглядный тест CSS-селекторов.
Результаты:
IE6
Из 43 селекторов 10 сработали хорошо, 1 работает глючно и 32 не поддерживаются (Пройдено 276 из 578 тестов)
Opera9
Из 43 селекторов 25 сработали хорошо, 3 работают глючно и 15 не поддерживаются (Пройдено 346 из 578 тестов)
FireFox2
Из 43 селекторов 26 сработали хорошо, 10 работают глючно и 7 не поддерживаются (Пройдено 357 из 578 тестов)
-
Сборник готовых CSS-решений
23 марта 2007
Комментировать -
Собрание меню на CSS
14 марта 2007
Smashing magazine в очередной раз радует своей подборкой. На этот раз меню на CSS.
-
Важное замечание про подвал
13 марта 2007
Хочу добавить, что для использования данного метода должен стоять полный DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
с сокращённым
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
работать не будет.
-
CSS. Спускаем подвал вниз!
13 марта 2007
Вполне типичная задача: сделать подвал всегда внизу. Независимо от того, есть ли содержимое на странице или нет. Как ни странно, для такой типичной задачи существует очень много решений, большинство из которых далеко не идеальны.
Ниже приведён вариант, замечательно работающий во всех браузерах:
<div id="main-page"> ... </div> <div id="footer"> ... </div>
* { margin: 0; padding: 0;} html{ height: 100%; } body{ position: relative; height: auto !important; height: 100%; min-height: 100%; } #footer{ position: absolute; left: 0; bottom: 15px; width: 100%; } #main-page{ padding-bottom: 4em; }
Исходное решение позаимствовано у Ростислава Чебыкина, где подробно расписано что и почему.
В моём решении поправлен глюк с IE, когда подвал уносится далеко вправо, ну и сделан небольшой отступ от нижнего края страницы.
-
Ещё раз про «Два фона в одном блоке»
23 февраля 2007
Всё-таки решение нашлось!
<div class="pullquote"> Самое интересное в цитатах это то, что их читают </div>
.pullquote { width: 25%; font-size: 125%; line-height: 140%; margin: 10px; background: url(/images/closequote.gif) no-repeat bottom right !important; padding: 0px 35px 5px 5px; border: 1px dotted #9b4b4b; text-align: justify; } .pullquote:first-letter { background: url(/images/openquote.gif) no-repeat left top!important; padding: 5px 2px 10px 35px!important; }
p.s. говорим спасибо http://www.webmakerslounge.com/.
-
По поводу заметки
21 февраля 2007
Хочу сказать немного про разметку:
<div class="mydiv"> <div> ... </div> </div>
Да, к сожалению другого решения до массового применения CSS3 не видится.
-
Английская статья по оформлению страниц для печати
21 февраля 2007
Всем, кто знает английский: