Выровнять div по центру страницы

Рубрика: Уроки CSS
Метки/Tags: ,

Этот урок не случаен! Я когда только начинал изучать css меня очень интересовал вопрос “как выровнять слой по центру?” чтобы на широких мониторах мой сайт лежал не слева, а по центру. У меня тогда так ничего и не получилось и приходилось использовать таблицу, а в ней уже дизайнить div-ами. это хорошо, но без нее лучше, поэтому сейчас не буду вам парить мозг, а приведу сразу код для выравнивания div по центру.

Для начала в файле html-страницы должен быть сам слой div

<div id=”page”>слой по центру</div>

а теперь в таблице стилей пишем следующее:

body {text-align:center; background:#d5d6d7; }
#page {margin:auto; width:800px; background-color:#fff; }

Естественно, что в коде страницы должен присутствовать тег <body>

Для “чайников” объясняю значения параметров:

- для тега body

text-align:center - выравнивание текста на странице по центру

background:#d5d6d7 - цвет фона

- для идентификатора page

margin:auto - автоматическое определение всех полей отступа от краев слоя

width:800px - ширина слоя

background-color:#fff - цвет слоя

Вот такими нехитрыми строками можно выровнять весь свой сайт по центру страницы и продолжать дизайнить внутри слоя, а не таблицы как раньше.




Фоновое изображение в определенной точке экрана

Рубрика: Уроки CSS
Метки/Tags: , ,

Создавая сайты бывает нужно задать фоновое изображение в виде картинки в какой-то определенной части экрана. Решить такую задачу можно использовав несколько параметров css.

Поскольку нужно задать изображение для фона, то будем использовать тег body

- нужно задать путь к изображению для бэкграунда

- говорим браузеру что повторять изображение не нужно

- зафиксируем картинку, чтобы она была жестко прикреплена к экрану

- зададим местоположение фона по оси x и y

В конечном варианте код для таблицы стилей должен выглядеть так:

body {
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: 150px 150px;
}

Как сделать сайт с оптимизированным дизайном - дивным дизайном!




Что такое дивный дизайн

Рубрика: Уроки CSS
Метки/Tags: , , ,

Почему дивный? В хтмл есть такой тег, поэтому и дизайн стали называть дивным :) DIV-ный дизайн отличается от табличного тем, что в данном случае используются слои (блоки), которые располагаются на странице в определенном порядке. Порядок, положение и размеры слоев задает отдельный файл .css

На первый взгляд невидно отличия от табличного дизайна. В данном случае мы имеем три слоя, между которыми пустое пространство. В табличном дизайне нам пришлось бы делать дополнительные ячейки, чтобы разделить шапку, меню и контент:

На рисунке ниже видно, что использовано 4 блока:
1 - основной, вмещает в себе три остальных
2 - шапка сайта
3 - меню
4 - контент
По сравнению с рисунком выше видно, что блоки независимы в размерах друг от друга, их размеры и положение можно изменять независимо от других блоков (слоев), чего не скажешь о таблице, где каждая ячейка зависит от рядом стоящей.

Дивный дизайн имеет ряд преимуществ в отличие от табличного:

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

Посмотрим на хтмл-код страницы с табличным дизайном:

<table border=0 cellpadding=0 cellspacing=0 width=500 height=295>
<tr>
<td height=75 valign=top colspan=3 bgcolor=#FDE2CC>Шапка сайта</td>
</tr>
<tr>
<td height=19 colspan=3></td>
</tr>
<tr>
<td width=140 valign=top bgcolor=#EEB6B6>Меню</td>
<td width=25></td>
<td valign=”top” bgcolor=#B9BBF1>Контент</td>
</tr>
</table>

А теперь посмотрим хтмл-код с дивным дизайном:

<link rel=stylesheet href=style.css type=text/css>
<div id=page>
<div id=logo>Шапка сайта</div>
<div id=menu>Меню</div>
<div id=content>Контент</div>
</div>

Как видите хтмл-код с дивным дизайном намного проще, а результат ощутим! Но, обратите внимание, что в коде дивного дизайна присутствует строчка:

<link rel=stylesheet href=style.css type=text/css>

Эта строка говорит о том, что все стили для этой страницы хранятся в файле style.css (таблица стилей). То есть, если в табличном дизайне для таблицы высота и ширина задаются так:

<table width=500 height=295>

то в дивном дизайне они задаются в файле style.css, в таблице стилей. Для кода дивного дизайна приведенного выше файл style.css содержит следующие строки:

/* таблица стилей */
/* задаем размер страницы */
#page { width:500px; height:100% auto; margin: 10px; }
/* задаем размещение блоков */
#logo { float:left; width:500px; height:50px; background:#FDE2CC }
#menu { float:left; width:150px; height:170px; background:#EEB6B6; margin-top: 10px }
#content { float:right; width:340px; height:200px; background:#B9BBF1; margin-top: 10px }

или если без сточек с пояснениями, то так:

#page { width:500px; height:100% auto; margin: 10px; }
#logo { float:left; width:500px; height:50px; background:#FDE2CC }
#menu { float:left; width:150px; height:170px; background:#EEB6B6; margin-top: 10px }
#content { float:right; width:340px; height:200px; background:#B9BBF1; margin-top: 10px }

Разберем что значит первая строка:

#page { width:500px; height:100% auto; margin: 10px; }

#page - идентификатор слоя (блока)
{ } - в скобках указывают все параметры для данного слоя
width:500px - задание ширины слоя
; - точка с запятой разделяют параметры
height:100% auto - задание высоты слоя
margin: 10px - задание отступов со всех сторон

в других строках таблицы стилей использованы:

float:left - выравнивание слоя по левому краю
background:#FDE2CC - задание цвета для фона слоя
margin-top: 10px - отступ сверху 10 пикселей

Таким образом в дивном дизайне все параметры отображения слоев, текста, изображений, цвет гиперссылок, размеры заглавных букв и других объектов можно задать в одном файле. Если у вас сайт состоит из 100… страниц, и вам вдруг срочно нужно меню сделать на пару пикселей больше, то вы без проблем сделаете это, изменив всего один файл style.css. Для табличного дизайна в таком случае придется изменить все ваши 100… страниц, на это уйдет минимум 100… минут :(

Как видите DIV-ный дизайн имеет ряд преимуществ, именно поэтому сегодня большинство сайтов строятся именно в таком формате.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS




Памятка вебмастеру по CSS

Рубрика: Уроки CSS
Метки/Tags: , , , ,

Сборник параметров по CSS предназначен скорее для начинающих и содержит основные параметры для форматирования html-страниц с помощью таблиц стилей.

Сборник в разработке…

CSS - справочник
Что такое дивный дизайн
Уроки CSS для новичков
Видеоуроки




Урок 8. Форматирование шрифтов (CSS)

Рубрика: Уроки CSS
Метки/Tags: , , , ,

На прошлом уроке мы закончили размещение слоев на странице и сейчас будем учиться задавать различные параметры для шрифтов. Прежде всего заполним страницу текстом:

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>Мир автомобилей </div>
<div id=content>Только на сайте &quot;Мир автомобилей&quot; вы найдете все технические характеристики популярных марок авто. </div>
<div id=menu>
 <p>Мерседес</p>
<p>BMW</p>
<p>Лексус</p>
<p>Рено</p>
<p>Пежо</p>
</div>
</div>
</body>
</html>

Также изменим цвета фонов для слоев на более мягкие в таблице стилей, можно конечно и совсем убрать цвета, но чтобы видеть изменения на странице мы все же их оставим:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }

Теперь страница выглядит вот так:

Если вы уже читали статьи об оптимизации сайтов, то наверняка помните, что заголовки страниц нужно выделять тегами <h1> </h1>. Выделим наш заголовок тегом h1, а ссылки в меню выделим менее значимым тегом h3

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>
 <h1>Мир автомобилей </h1>
</div>
<div id=content>Только на сайте &quot;Мир автомобилей&quot; вы найдете все технические характеристики популярных марок авто. </div>
<div id=menu>
 <h3><p>Мерседес</p>
<p>BMW</p>
<p>Лексус</p>
<p>Рено</p>
<p>Пежо</p></h3>
</div>
</div>
</body>
</html>

Текст на странице изменился:

Шрифты стали  выразительнее, но все же текст в меню очень жирный, а заголовок в шапке нужно поместить по центру страницы, для этого зададим в таблице стилей параметры для тегов h1 и h3

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }
 /* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }

Посмотрите как после этих действий изменится шрифт. По умолчанию браузер будет показывать весь текст на странице шрифтом Times New Roman, а мы зададим шрифт Arial для слоя page, соответственно весь текст в этом слое изменит шрифт на указанный в таблице стилей:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; font-family:Arial, Helvetica, sans-serif; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }
/* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }

Если понадобится изменить шрифт в каком-то из слоев, то это легко делается путем дописывания новых параметров, но помните что не стоит употреблять на сайте более 2 - 3-х вариантов шрифта!

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; font-family:Arial, Helvetica, sans-serif; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; font-family:Georgia, Times, serif }
/* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }

Для тегов h1 и h3 тоже можно прописать свои шрифты.

На следующем уроке вставим на страницу изображение и разберем для него некоторые параметры.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS




Урок 7. Задание отступов (полей, отбивок) для слоев

Рубрика: Уроки CSS
Метки/Tags: , , , ,

В 6-ом уроке мы довели хтмл-страницу почти до нужного вида, но хотелось бы оторвать шапку сайта от блоков меню и контента. Для этого используем специальный параметр margin, который отвечает за параметры полей, допишем этот параметр в таблицу стилей для шапки (header):

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }

Вы заметили, что дописана строка не просто margin:10px, а вот так margin-bottom:10px - так мы указали параметры полей только для нижней стороны слоя, а не для всех сторон.

Итак, вы запомнили что поля задаются параметром margin, но это поля внешние, а можно еще задать поле (отбивка) и внутри слоя с помощью параметра padding, попробуйте дописать его в таблицу:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; padding:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }

Теперь посмотрите как изменилась хтмл-страница, текст в шапке должен находиться на расстоянии 10 пикселей от края слоя:

Можно задать отбивки и для остальных слоев, но мы не будем этого делать, поскольку мы уже сделали отступы между слоями и делать еще поля внутри слоев нет надобности, поэтому просто оставим внешние поля и немного их увеличим:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:15px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:645px; height:300px; float:right; }

С полями (margin) и отбивками (padding) разобрались и теперь перейдем к форматированию шрифтов.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS




Урок 6. Положение слоев относительно горизонтали

Рубрика: Уроки CSS
Метки/Tags: , , , ,

Чтобы выровнять слои нашей хтмл-страницы по правому или левому краю, существует специальный атрибут float, используем его в таблице стилей:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }

Для слоя content мы задали выравнивание по правому краю, но как видно и это не помогло поставить этот слоя рядом с блоком меню:

Решение этой проблемы очень простое, поменяйте в коде страницы местами строки для меню и для контента, сначала должна идти строка контента , а уж потом для меню:

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>Первый блок</div>
 <div id=content>Третий блок</div>
<div id=menu>Второй блок</div>
</div>
</body>
</html>

Теперь хтмл-страница приняла “человеческий ” вид, но есть еще один момент - между меню и контентом есть отступ (пустое поле), а вот отступа от шапки (header) нету. Как сделать отступы читаем в седьмом уроке по CSS.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)

Памятка вебмастеру по CSS




Урок 5. Собираем 3 блока в один (в 4-й)

Рубрика: Уроки CSS
Метки/Tags: , , ,

У нас есть три блока, которые нужно собрать в один, 4-й блок, он будет определять размеры хтмл-страницы. Для этого в код файла index.html добавьте следующие строки:

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
 <div id=page>
<div id=header>Первый блок</div>
<div id=menu>Второй блок</div>
<div id=content>Третий блок</div>
 </div>
</body>
</html>

Так мы сделали 4-й слой под названием page, он обьединил в себе все три слоя header, menu и content. Теперь для слоя page нужно задать параметры с таблице стилей:

/* таблица стилей */
/* задаем размещение блоков */
 #page { width:800px; background:#ffffcc;}
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; }

Мы задали только ширину и фон для слоя. Если теперь посмотреть на нашу страницу, то видно, что слой page объединил все три слоя:

Шапка (header) и меню (menu) находятся на своих местах и двигать их не нужно, а вот слой content должен находиться справа от меню, как решить эту задачу читайте в следующем 6-ом уроке.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS




Урок 4. Ширина и высота слоев (div)

Рубрика: Уроки CSS
Метки/Tags: , , ,

В предыдущем уроке нами было создано три блока, которые мы раскрасили в разные цвета. Сейчас хтмл-страница выглядит так:

Теперь нужно задать слоям ширину и высоту, делается это следующим образом - откройте файл style.css допишите там параметры высоты и ширины для первого (красного) слоя:

/* таблица стилей */
/* задаем размещение блоков */
#1 { background:red; width:800px; height:100px; }
#2 { background:gray }
#3 { background:blue }

Сохраните документ и посмотрите как теперь выглядит страница:

Как видите слой изменил свои размеры, задайте размеры для остальных слоев:

/* таблица стилей */
/* задаем размещение блоков */
#1 { background:red; width:800px; height:100px; }
#2 { background:gray; width:140px; height:300px; }
#3 { background:blue; width:650px; height:300px; }

Давайте сейчас для удобства изменим названия наших блоков, первый блок назовем header, второй - menu и третий блок станет content, в итоге получим следующие коды:

код страницы index.html

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=header>Первый блок</div>
<div id=menu>Второй блок</div>
<div id=content>Третий блок</div>
</body>
</html>

код таблицы стилей style.css

/* таблица стилей */
/* задаем размещение блоков */
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; }

Теперь будем считать что блок header - это шапка страницы, menu - это меню и content - содержание (контент).

Переходим к 5-ому уроку, где мы соберем все три блока в одном блоке.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS






Страница 1 из 2 / 1 2 Следующая


Связанные записи

Все записи