К основному контенту

Сообщения

Показаны сообщения с ярлыком "CSS"

Модный стиль

Снова известный стиль

правильное обертывание ol,ul списков, и проблемы с Float

OL, UL удобно использовать в верстке. способы обертывания: добавлять таги а,span,img внутрь li пунктов списка. я пока опишу только возможные проблемы с отображением в различных браузерах. Если использовать обтекание (горизонтальное отображение списка), то пробел между тагами IE переносит на следующую строчку, в результате появляется баг в нижней части, как на скриншоте. Решение: 1) удалить пробелы между тагами 2) сделать с помощью псевдо элементов описано здесь Еще можно посмотреть короткий но содержательный экскурс на русском здесь и на английском все по float обьектам здесь после использования float нужно сделать невидимый обьект как на картинке, подробней здесь .

Оптимизация CSS и скорость страниц

В прошлом месяце верстая сайт, добавив небольшой элемент с чужим дизайном я заметил значительный прирост времени загрузки моей странички. присмотревшись к коду CSS я нашел строчку которая вызывает эту долгую загрузку: сейчас я разрабатываю CMS для этого сайта, и уже почти забыл про этот баг. Теперь тестируя CMS с готовым дизайном, опять этот баг... В интернете нашел интересные статьи, для оптимизации CSS здесь  и вообще на сайте много интересного о разгоне и оптимизации сайта. David Hyatt (архитектор Safari и движка WebKit, также участвовавший в проектах Mozilla, Camino и Firefox) говорит: "Горькая правда относительно CSS3-селекторов заключается в том, что их вообще нельзя использовать, если вы заботитесь о быстродействии страницы. Используйте для оформления только классы и идентификаторы, и только их. Избегайте выбирать соседние элементы, наследники и дочерние узлы — они могут существенно снизить скорость отображения страницы во всех браузерах"

Горячие клавиши в DreamWeaver

Edit Undo Ctrl+Z,Alt+BkSp Redo Ctrl+Y,Ctrl+Shift+Z Cut Ctrl+X,Shift+Del Copy Ctrl+C,Ctrl+Ins Paste Special... Ctrl+Shift+V Select All Ctrl+A Select Parent Tag Ctrl+[ Select Child Ctrl+] Find and Replace... Ctrl+F Find Selection Shift+F3 Find Next F3 Go to Line Ctrl+G Show Code Hints Ctrl+Space Indent Code Ctrl+Shift+> Outdent Code Ctrl+Shift+< Balance Braces Ctrl+'

Верстка первой страницы полностью завершена

Верстка завершена, сверстал все за 4 полных дня. пол дня потратил чтобы выяснить как зайти на фтп infobox. Оказалось что нужно было указывать удаленный каталог. и сервер указанный  в информации о клиенте. На сервере функция берущая погоду с других серверов не работает. выложил в сеть, был один глюк в IE7 решил.

Уже подгоняет заказчик

Субботу пропустил, ночью делал перевод сайта, погоду, подвал. Сейчас такой результат: результат можно здесь: Ленавто - аренда транспорта в Петербурге  

Завершение верстки

Осталось добавить три колонки в подвал, область активности кнопки оставлю прямоугольную. Дальше нужно сделать форму заказа. Весь код буду делать после публикации: погоду, контент, переключение галлереи. Позже все через базу данных.

Верстка горизонтальных вкладок

Горизонтальные вкладки, все еще остаются актуальными и способов верстки есть масса. Рекомендую float обтикание ul li тагов. Cамый популярный способ верстки среди резиновых вкладкок это так называемые Slide Doors (раздвежные двери). описание на английском  или на русском . Использование статической картинки не предполагает растягивание по горизонтали, используется блочное представление слоев, с параметрами float и единственным отступом сверху line-height, с заданием точной ширины, высоты и text-align в центр.

Верстка двух колонок резинового сайта

Решение проблем верстки двух колонок в DIV CONTENT вставляется по очереди DIV Main 1) Правый со значением параметра float=left, 2) затем Левый DIV со значением параметрами float=right 3) после закрытия DIV Main вставляем специальный завершающий таг DIV Теперь подробней: Div content необходим для задания цвета фона и для завершающего тага, Div main для задания ширины и содержания всех внутренних элементов.

Выделение блока DIV в DreamWeaver

Чтобы выделить весь DIV обьект можно нажать ПКМ edit tag либо SHIFT+5. Это очень удобно при редактировании в DreamWeaver, если обьект большой.

Начал верстать сайт (дизайн не мой)

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

CSS верстка 2

Сейчас модно делать фон картинкой у странички, которая расположена по центру Здесь мои мысли: как сделать фон для странички которая выравнивается по центру

Избавление от пустого пространства на странице

Делаем качественную верстку, и никаких лишних выделяемых областей в интернет браузере

Показать PNG в IE 6

есть способ уменьшения картинки в несколько раз. разбить картинку на два файла (тень отделить) PNG-8 с дизеренгом не прозрачные части (постеризация эфективен в фотографии) PNG-24 полупрозрачные части (тень)

CSS

CSS-фильтры (Хаки) /* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */ #someblock { width: 80px; padding: 10px; } /* следующее для IE6. */ * html #someblock { width: 100px; padding: 10px; } отображать блок #someblock шириной в 100 пикселей и внутренними отступами в 10 пикселей можно написать такой код (см. выше). CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять (или не применять) стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида * html селектор (фильтр, известный как «star html bug»). Тогда, чтобы заставить и браузеры, использующие блоковую модель W3C и IE, работающего в Quirks mode со своей блоковой моделью, Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.Различные блоковые модели источник: http://ru.wikipedia.org/wiki/Каскадные_таблицы_стилей Различные блоковые модели В стандартах CSS от Консорциума W3C использ...