<rmcreative>

RSS

Все заметки с тегом «CSS»

Можно уточнить:

  1. 100% по высоте

    26 марта 2007

    Ещё одно решение, как закрепить подвал у нижней границы экрана при маленьком размере контента.

    Пример

    Пример с длинным контентом

    Описание (на английском)

    Комментировать
  2. Выпадающее меню

    26 марта 2007

    Довольно элегантное решение с минимумом хаков.

    Горизонтальное меню

    Вертикальное меню

    Заметка

    Комментировать
  3. Наглядный тест поддержки 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 тестов)

    3 комментария
  4. Сборник готовых CSS-решений

    23 марта 2007

    Комментировать
  5. Собрание меню на CSS

    14 марта 2007

    Smashing magazine в очередной раз радует своей подборкой. На этот раз меню на CSS.

    Комментировать
  6. Важное замечание про подвал

    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">

    работать не будет.

    2 комментария
  7. 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, когда подвал уносится далеко вправо, ну и сделан небольшой отступ от нижнего края страницы.

    Важное замечание

    6 комментариев
  8. Ещё раз про «Два фона в одном блоке»

    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/.

    3 комментария
  9. По поводу заметки

    21 февраля 2007

    Хочу сказать немного про разметку:

    <div class="mydiv">
       <div>
         ...
       </div>
    </div>

    Да, к сожалению другого решения до массового применения CSS3 не видится.

    Комментировать
  10. Английская статья по оформлению страниц для печати

    21 февраля 2007

    Всем, кто знает английский:

    Читаем

    Комментировать