Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

CSS-методы центрирования web-страницы

Главная « Уроки Web-мастерства « CSS-методы центрирования web-страницы

версия для печати

Центрирование страницы …

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

В прошлом это достигалось при помощи ввода тега center (или <div align="center">...</div>), заключающего в себе таблицу.

На этот уроке я Вас познакомлю с тремя CSS-метода центрирования страницы фиксированной ширины: официальный CSS-метод, альтернативный способ, работающий в Internet Explorer и эффективный «путь обхода».

 

Официальный CSS-метод …

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

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

Код:
div#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

Этот метод работает во всех соблюдающих стандарты браузерах, включая Internet Explorer 6 для Windows, работающий в стандартном режиме (Standards Mode). Этот метод не работает в IE 6 для Windows в нестандартном режиме (Quirks Mode), а также во всех более ранних версиях.

 

Альтернативный CSS-метод …

Альтернативным, хотя и не столь элегантным решением является центрирование всей страницы с помощью свойства text-align для элемента body. В конечном счете этот метод является обходным путем, поскольку текстовое свойство используется для центрирования любых элементов.

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

В следующем примере видно, как с помощью универсального селектора (*) отмечаются все элементы, находящиеся в элементе body документа, и для них в свойстве text-align указывается значение left.

Обратите также внимание, что вместо значений margin-left и margin-right, в примере я использую объединенное свойство margin. Хотя это не является обязательным, но это позволяет уменьшить объем кода и сделать таблицу стилей краткой и аккуратной.

Код:
body {
  text-align: center;
}
body * {
  text-align: left;
}
div#container {
  width: 1000px;
  margin: 0 auto;
}
 

Эффективный «путь обхода» …

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

Во-первых, элемент «container» (имя элемента div в данном примере) абсолютно позиционируется так, чтобы левый край на 50% пересекал исходный содержащий его блок (т. е. ширину содержащего его окна браузера).

Затем применяется отрицательное левое поле, которое смещает страницу влево на половину ее ширины, выравнивая, таким образом, серединную точку страницы с серединной точкой окна. И, о чудо, страница отцентрирована [метод взят из книги «The Zen of CSS Design», авторы Дэйв Ши (Dave Shea) и Молли Е. Хольцшлаг (Molly E. Holzschlag)]. Метод впервые использован Джоном Хиксом (Jon Hicks) и представлен на сайте CSS Zen Garden (www.csszengarden.com).

Код:
div#container {
  position: absolute;
  left: 50%;
  width: 1000px;
  margin-left: -500px;  /* половина ширины */
}
 
Урок № 12: | Дата: 05.02.2008 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Официальный CSS-метод…

Альтернативный CSS-метод…

Эффективный «путь обхода»…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov