Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 10 видеоуроку по CSS Размер: 111 kB, скачали: 667 раз.
Скачать IEtester v0.4.10 Размер: 38.36 MB, скачали: 557 раз.
Скачать Pixie Размер: 8.04 kB, скачали: 659 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Блочная верстка одноколоночного макета
Перед тем, как приступить, нам нужно завершить работу над старым сайтом, то есть над страничкой index.html. Я добавляю мета-тег, который содержит информацию о кодировке utf-8:
<meta http-equiv= "Content-Type" content = "text/html; charset=utf-8">
А также добавляю ссылку на валидатор:
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
О том, что такое валидатор и как проверить документ на валидность, мы уже говорили в одном из бонусных видеоуроков по HTML. Проверять CSS документ на валидность мы будем чуть позже. А пока нам нужно преобразовать документ в кодировку utf-8 без BOM и, после преобразования, его сохранить. Зачем это делается? Дело в том, что если кодировка utf-8 прописана в документе, тогда необходимо, чтобы и сам документ кодировался в utf-8, иначе, при просмотре страницы в браузере, появятся каракули и вопросы, вместо нормального, человеческого текста.
Со старой страницей покончено. Создаем новую. Давайте скопируем каркас из прошлой страницы и удалим всё то, что находится между тегами <body></body>. Таблица стилей пусть будет называться st.css:
<link rel = "stylesheet" type = "text/css" href = "st.css">
А название документа будет «Познаем мир»:
<title>Познаем мир</title>
Таблица стилей reset.css
Теперь создаем еще один документ. Это будет таблица стилей. Сохраняем прошлый документ как page.html, предварительно преобразовав его в кодировку utf-8 без BOM, а новый документ сохраняем как st.css. Создаем еще один документ и сохраняем его как reset.css. Сейчас объясню, зачем мы это делаем.
На одной из страниц сайта есть документация по файлу reset.css. Что это за файл и для чего он нужен? Я уже говорил, что браузеры применяют заголовки по-разному. То есть один браузер может применить его как 22 пункта, а другой — как 24. Поэтому нам нужно изначально обнулять эти свойства. Эрик Мэйер как раз составил для этого файл reset.css. Мы его просто копируем. Как говорит сам автор, он предоставляет этот файл не как готовый вариант решения всех проблем, а только как стартовую точку. То есть этот файл можно и нужно будет дорабатывать. Мы копируем этот файл в reset.css и сохраняем. Нам пока ничего дорабатывать здесь не нужно. И так как мы создаем макет, у нас, в принципе, вряд ли возникнут несогласия с файлом reset.css.
Теперь нам нужно присоединить этот файл. Мы уже знаем один способ присоединения файлов — через ссылку:
<link rel = "stylesheet" type = "text/css" href = "st.css">
Команда @import
Но можно также присоединять файл стилей в другую таблицу стилей. Основной таблицей стилей у нас будет st.css. Чтобы присоединить файл reset.css, нам нужно воспользоваться командой @import. Сначала вставляется символ «эт» (или в простонародии «собачка»), потом прописываются слова @import url и в скобках указывается путь к файлу. Можно указывать в одинарных кавычках. Так как у нас файлы находятся в одной и той же директории, то указываем только имя файла.
@import url ('reset.css');
Сохраняем.
Создаем структуру (макет) сайта
Теперь давайте работать над нашим макетом. Что нужно сделать для начала? Для начала нужно определиться с тем, как будет выглядеть наш сайт. Предположим, что у нашего сайта будет шапка, потом будет идти контент и футер. То есть всего три элемента. Давайте создадим три блока:
<div id = "header"> </div> <div id = "content"></div> <div id = "footer"></div>
Теперь нам нужно создать обертку всем этим трем блокам. Для чего задается обертка? Не всегда хватает применения стилей к тегу <body>, поэтому задается блок обертки, чтобы всегда можно было применить к нему какие-то свои стили.
<div id = "wrapper"> <div id = "header"> </div> <div id = "content"></div> <div id = "footer"></div> </div>
Теперь давайте дадим заголовок в header'е. Этот заголовок будет первого уровня. Чтобы код выглядел более читабельно, мы зададим табуляцию внутренним элементам.
<div id = "wrapper"> <div id = "header"> <h1>Познай мир сейчас!</h1> </div> <div id = "content"></div> <div id = "footer"></div> </div>
И зададим копирайты в footer’е:
<div id = "wrapper"> <div id = "header"> <h1>Познай мир сейчас!</h1> </div> <div id = "content"></div> <div id = "footer"> <p>© Все права защищены. </p> </div> </div>
Привыкайте к тому, чтобы текст писался либо в абзацах, либо в заголовках.
Наполняем сайт контентом
Теперь нам осталось заполнить только контент. В папку image я вложил несколько изображений. Они будут использоваться у нас на странице контента. Я вставил текст в content и располагается он у меня так: идет заголовок <h3>, потом идет абзац, а потом — изображение и прописывается путь к этому изображению. И так четыре строки. Если вы не знаете, откуда брать текст, то советую использовать сервис Lorem Ipsum. Вот этот сервис — . Здесь можно выбрать русский язык и отсюда брать текст. Почему вообще этот сервис используется, можно прочитать прямо на их сайте.
<div id = "content"> <h3> Что такое Lorem Ipsum?</h3.><p>Lorem Ipsum – это текст — "рыба", часто используемый в печати.</p> <img src = "img/man_grey.png"> <h3>Где его взять?</h3><p> Есть много вариантов Lorem Ipsum</p><img src="img/f_user.png"> <h3>Почему он используется?</h3><p> Давно выяснено, что Lorem Ipsum используется в качестве текста по умолчанию. </p><img src = "img/photo.png"> <h3>Откуда он появился?</h3><p>Многие думают, что Lorem Ipsum – взятый с потолка псевдо-латинский набор слов.</p><img src="img/photo.png"> </div>
Давайте вернемся в код и сохраним нашу страницу. Если мы посмотрим страницу в браузере, то мы увидим, что все заголовки <h1> выглядят как простой текст, заголовки <h3> тоже выглядят как простой текст, и, в принципе, на нашей странице появились только изображения и простой текст. Так всё случилось как раз из-за того, что мы обнулили свойства.
Задаем текстовые стили
Сейчас мы создадим еще одну таблицу стилей. Сохраним ее как typography.css. Для чего мы ее создаем? В эту таблицу стилей мы будем прописывать стили только для текста, то есть, только для заголовков, только для абзацев и для какого-то особенного текста, например, с классами и идентификаторами. Эту таблицу стилей нам также нужно импортировать в файл st.css.
@import url ('typography.css');
Сохраним этот файл.
Начнем прописывать стили для текста. Вы можете повторять за мной или же просто скачать из дополнительных материалов исходники, постепенно вставлять и изучать.
Начинаем с заголовков. И, конечно же, с заголовка <h1>. Это тот заголовок, который будет находиться у нас в шапке. Мы ему даем цвет, задаем семейство шрифтов, размер и толщину. Толщину задавать совсем необязательно, но мы задаем ее на всякий случай, потому что иногда браузеры могут принимать толщину заголовков как bold.
h1{
color: #4346D6;
font-family: Verdana, Arial, sans-serif;
font-size: 36px;
font-weight: normal;
}
Теперь пропишем для ссылок, которые находятся в заголовке <h1>. Так повелось, что обычно заголовки, которые находятся в шапке сайта, делают ссылками на их же главную страницу. Поэтому мы прописываем тот же текст и отменяем подчеркивание.
h1 a { color: #4346D6; text-decoration: none;}
Следовало бы прописывать стили для всех заголовков, но так как у нас присутствуют только <h1> и <h3>, то я остановлюсь на них двоих. Для заголовка <h3> прописываем также цвет, семейство шрифтов, размер и толщину.
h3 {
color: #6ec9cc;
font-family: Verdana, Arial, sans-serif;
font-size: 24px;
font-weight: normal;
}
После у нас пойдут стили параграфов. Всем параграфам мы прописываем серый цвет, семейство шрифтов и размер.
p{
color: #333;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
Последними у нас идут стили ссылок. Мы им задаем зеленый цвет, отменяем подчеркивание, а при наведении устанавливаем подчеркивание снизу.
a {
color: #24712E;
text-decoration: none
}
a:hover {text-decoration: underline;}
Сохраняем этот файл. И переходим в документ page.html. Прежде, чем приступать к каким-то изменениям, давайте посмотрим, что у нас получилось со страницами. Мы видим, что заголовок <h1> у нас синего цвета, заголовки <h3> у нас голубого цвета, и абзацы тоже приняли свои стили.
Теперь давайте сделаем так, чтобы наша страница выглядела примерно таким образом: в окне браузера по центру у нас идет наша страница и, как мы и планировали, вверху — header, внизу — footer, посередине — content. Давайте начнем верстать такой макет. Начнем мы с оболочки, то есть с обертки wrapper, и с header'а. Для начала нам нужно header'у задать ссылку, как мы договаривались, так как мы прописывали это в typography.css.
<div id = "wrapper"> <div id = "header"> <h1><a href = "/">Познай мир сейчас!</a></h1> </div> </div>
Сохраняем.
Дальше у нас пойдет работа над файлом стилей. Что нам нужно добавить в файл стилей? Для начала, нам нужно все выровнять по центру и добавить рамку. Мы присваиваем wrapper ширину 800 пикселей, рамку левую, рамку правую и задаем отступ от верхнего и нижнего края ноль, а слева и справа — автоматически. Таким образом, wrapper у нас выровняется по центру.
#wrapper{
width: 800px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0 auto;
}
Сохраняем. Проверяем в браузере. Мы видим, что у нас появилась рамка. Эта рамка есть только с левого и с правого края. Также заголовок у нас стал ссылкой, и при наведении у него появляется подчеркивание. Давайте отменим это подчеркивание. Для этого достаточно прописать:
h1 a { color: #4346D6; text-decoration: none;}
h1 a: hover {text-decoration: none;}
Сохраняем. Смотрим. Всё отлично. Теперь давайте приступим к шапке. Я приготовил еще два изображения. Это изображение header'а и изображение footer'a. Это однопиксельные изображения, представляющие собой градиент. Одно изображение в высоту 100 пикселей, а другое — 40. В ширину они, как я уже сказал, по одному пикселю.
Работаем с шапкой сайта
Теперь давайте пропишем header. Мы пишем #header, прописываем фоновое изображение, которое будет повторяться по оси x, ширину задаем 100%. Таким образом, header будет занимать 100% от родительского ему блока. А родительский блок — это блок #wrapper. То есть он займет 800 пикселей по ширине. Кстати, хочу отметить, что рамки не входят в ширину, поэтому ширина общего блока wrapper у нас 802 пикселя. Высоту header'а задаем 100 пикселей.
#header{
background: url('img/bg_header.png') repeat-x;
width: 100%;
height: 100px;
}
Сохраняем. Смотрим, что получилось. У нас появилось фоновое изображение. Мы видим, что вверху чуть-чуть белое, потом идет желтое и потом опять белое. То есть, это такой своеобразный градиент.
Сейчас нам нужно выровнять заголовок по центру. Переходим снова в код и прописываем свойства для заголовка. Выравниваем его по центру с помощью text-align и padding-top: 25px.
#header h1{
text-align: center;
padding-top: 25px;
}
Почему здесь нельзя было применить margin: 0 auto? Потому что текст — это блок. Если мы сейчас сохранимся и перейдем в браузер, то увидим, что на самом деле текст у нас располагается на всю ширину. Если бы мы ему задали margin: 0 auto, то он бы на этом месте и остался, т. к. он просто занимает всю ширину, а для того, чтобы выровнять текст, находящийся в нем, нам как раз нужно использовать свойство text-align.
Обновим браузер. Мы видим, что текст выровнялся по центру, как по вертикали, так и по горизонтали. Теперь давайте перепрыгнем через content и пойдем сразу в footer.
Работаем с футером (подвалом) сайта
Footer'у мы пропишем почти такие же правила, как и header'у.
#footer{
background: url('img/bg_footer.png') repeat-x;
width: 100%;
height: 40px;
}
И для внутреннего абзаца применяются тоже схожие стили:
#footer p{
text-align: center;
padding-top: 15px;
}
Сохраняем документ st.css с помощью сочетания клавиш Ctrl+S и переходим проверять в браузер. Обновляем страницу. Мы видим, что footer стал отображаться как положено.
В принципе мы закончили работать над footer'ом и над header'ом. Теперь, если мы нажмем на header, мы должны попасть на эту же страницу. Нажимаем и не попадаем. А происходит это потому, что наш сайт не находится на реальном хостинге, и путь к нему совершенно другой. Поэтому наш вариант пока что здесь не работает.
<div id = "wrapper"> <div id = "header"> <h1><a href = "/">Познай мир сейчас!</a></h1> </div> </div>
Мы просто пока поставим здесь решетку:
<div id = "wrapper"> <div id = "header"> <h1><a href = "#">Познай мир сейчас!</a></h1> </div> </div>
Сохраняем.
Снова работаем над таблицой текстовых стилей
Теперь давайте зададим отступы для заголовков <h3>. Было бы неплохо задать отступ сверху, отступ снизу и отступ слева. Также давайте увеличим размер шрифта абзаца и попробуем применить интерлиньяж. Что это такое? Это расстояние между строками. Если его не указывать, то оно вставится автоматически. Но, опять же, мы в начале урока применили обнуление и этот интерлиньяж мы задали свойством line-height для <body>.
body{
line-height: 1;
}
Это свойство задает как раз таки интерлиньяж. Теперь он равен размеру текста. Цифра «1» действует как множитель. Если мы укажем здесь «1.5»:
body{
line-height: 1.5;
}
то мы видим, что расстояние между строками увеличилось. Давайте вернем всё как было и начнем присваивать стили заголовкам <h3> и абзацам.
Переходим в файл typography.css. Давайте запишем сокращенную форму свойства font. Если вы вдруг забудете, как прописывать сокращенную запись, то я вам советую русскоязычный сервис htmlbook.ru. Здесь вы можете выбрать нужный вам тег html или нужное свойство css. Например, мы задаем сейчас font и открываем font. Мы видим здесь синтаксис записи и, исходя из него, можем уже записывать свойство. Сейчас вкратце объясню порядок. Две полосы (обозначение «параллельно») указывают, что эти свойства указывать не обязательно. Потом обязательно указываются размер font-size и также к нему можно указывать, через дробь, значение line-height. Это как раз тот межстрочный интервал. Потом обязательно указывается значение font-family. Inherit – это наследование. Мы с ним разберемся позже. Пока давайте укажем значения font.
h3{
color: #6ec9cc;
font: normal 24px/30px Verdana, Arial, sans-serif;
}
Через дробь мы указали межстрочный интервал, после чего идут шрифты.
Сделаем то же самое для заголовков <h1>. Обычно заголовок <h1> на странице один, поэтому, в принципе, мы можем ему не задавать межстрочный интервал. Он и так у нас находится в шапке. А так как мы его ему не задаем, то межстрочный интервал устанавливается такой же, как и шрифт. Мы прописывали это в reset.css с помощью line-height: 1
h1{
color: #4346D6;
font: normal 36px Verdana, Arial, sans-serif;
}
Теперь нам нужно прописать для абзацев свойство font:
p{
color: #333;
font: 12px/16px Verdana, Arial, sans-serif;
}
В принципе — всё. Давайте проверим. С текстом у нас стало лучше. Теперь нужно задать отступы. Мы договорились, что в файле typography.css мы будем задавать только то, что касается шрифтов текста, но свойства padding, margin мало их касаются. Они выступают скорее в роли определения места, позиции нахождения какого-либо блока. Поэтому мы можем задать его и в typography.css и в нашей общей таблице стилей. Вы можете сделать это как хотите. Я не буду создавать новое свойство и задам его здесь:
h3{
margin: 15px;
color: #6ec9cc;
font: normal 24px/30px Verdana, Arial, sans-serif;
}
Мы задали отступ со всех сторон. Отлично.
Теперь зададим отступ абзаца.
p{
color: #333;
font: 12px/16px Verdana, Arial, sans-serif;
margin: 5px;
}
Думаю, пяти пикселей даже мало. Давайте зададим 15:
p{
color: #333;
font: 12px/16px Verdana, Arial, sans-serif;
margin: 15px;
}
Ну вот, уже лучше. Если вы были достаточно бдительны, то скорее всего заметили, что расстояние между заголовками <h3> и абзацем не увеличилось после того, как мы задали отступ абзацу 15 пикселей, вместо пяти. Дело в том, что свойства margin не влияют друг на друга. Так как заголовок и абзац у нас блоки, то блок <h3>, можно сказать, находится под блоком абзаца. Поэтому общий отступ у нас не 30 пикселей (мы не складываем 15+15), а только 15 пикселей. Это такая особенность верстки.
Свойства float и clear
Теперь давайте приступим к предпоследнему пункту данного видеоурока — разберемся со свойством float. Float – это обтекание. Раньше мы задавали атрибут align к тегам изображения <img>. А теперь пришло css, и мы будем задавать свойство float. На float строятся не только изображения, но и каркасы сайтов. В следующем видеоуроке мы будем строить макет сайта как минимум с двумя колонками. У нас появится еще либо левая, либо правая колонка, либо они обе. Ну а сейчас наша задача сделать так, чтобы текст обтекал изображение.
Давайте попробуем задать обтекание. Посмотрим, где у нас хранится изображение. Оно идет после абзаца и находится в id='content'. Давайте зададим классы изображениям: первому — img1, второму — img2, третьему — снова img1 и четвертому — снова img2:
<div id = "content"> <h3> Что такое Lorem Ipsum?</h3.><p>Lorem Ipsum – это текст — "рыба", часто используемый в печати.</p> <img class="img1" src = "img/man_grey.png"> <h3>Где его взять?</h3><p> Есть много вариантов Lorem Ipsum</p><img src="img/f_user.png"> <h3>Почему он используется?</h3><p> Давно выяснено, что Lorem Ipsum используется в качестве текста по умолчанию. </p><img class="img1" src = "img/photo.png"> <h3>Откуда он появился?</h3><p>Многие думают, что Lorem Ipsum – взятый с потолка псевдо-латинский набор слов.</p><img src="img/photo.png"> </div>
Сохраняем.
Прописываем свойства:
#content img.img1{
width: 128px;
height: 128px;
float: left;
}
Это для класса img1, который присвоен изображению и находится в блоке content. Задали ширину в 128 пикселей, высоту — тоже в 128 пикселей и задаем float:left. Давайте сохраним и проверим, что у нас получилось. Как мы видим, получилось у нас не так, как вы, скорее всего, предполагали. Сейчас я объясню, почему так произошло. Тег изображения находится у нас после абзаца. И мы задавали обтекание только этому изображению. Мы задавали, что оно будет прилипать к левому краю с помощью свойства float:left. Следовательно, все последующие элементы будут его обтекать с правой стороны. А те элементы, которые не уместятся в заданные рамки, просто будут располагаться ниже.
Теперь давайте снова перейдем в код и исправим нашу ошибку. Для начала переместим изображение перед абзацем. Если мы хотим, чтобы наше изображение обтекал и заголовок, то нам нужно вставить изображение перед заголовком. Допустим, мы хотим, чтобы обтекал только абзац:
<div id = "content"> <h3>Что такое Lorem Ipsum?</h3><img src="img/man_grey.png"><p>Lorem Ipsum – это текст — "рыба", часто используемый в печати.</p> <h3>Где его взять?</h3><img src="img/f_user.png"><p>Есть много вариантов Lorem Ipsum</p> <h3>Почему он используется?</h3><img src = "img/photo.png"><p>Давно выяснено, что Lorem Ipsum используется в качестве текста по умолчанию.</p> <h3>Откуда он появился?</h3><img src="img/photo.png"><p>Многие думают, что Lorem Ipsum – взятый с потолка псевдо-латинский набор слов.</p> </div>
Сохраняем. Посмотрим, что у нас теперь получилось. Как я уже говорил, мы задали изображению прилипание к левому краю, а все последующие элементы его обтекают. Но как же сделать так, чтобы следующий заголовок не обтекал это изображение? Нам на помощь придет новое свойство clear. Мы пропишем его отдельно как класс:
.clear{
clear: both;
}
clear: both означает «очистить с обоих краев». Свойство clear может принимать значения либо both, либо left, либо right. Left – «очистить слева», right – «очистить справа» и both – «с обоих краев».
Теперь нам нужно везде добавить тег <br> с классом clear после абзаца.
<div id = "content"> <h3> Что такое Lorem Ipsum?</h3.><img src = "img/man_grey.png"><p>Lorem Ipsum – это текст — "рыба", часто используемый в печати.</p> <br class = "clear"> <h3>Где его взять?</h3><img src="img/f_user.png"><p> Есть много вариантов Lorem Ipsum</p><br class = "clear"> <h3>Почему он используется?</h3><img src = "img/photo.png"><p> Давно выяснено, что Lorem Ipsum используется в качестве текста по умолчанию. </p><br class = "clear"> <h3>Откуда он появился?</h3><img src="img/photo.png"><p>Многие думают, что Lorem Ipsum – взятый с потолка псевдо-латинский набор слов.</p><br class = "clear"> </div>
Сохраняем. Смотрим, что у нас получается. Мы видим, что все выглядит нормально. Осталось только задать обтекание слева для изображений с классом «img2», то есть прижать их к правому краю. Это нам уже не составит труда.
Кстати, хочу заметить, что желательно указывать размеры изображений, так как при свойстве float всегда нужно указывать размеры блока. Размеры нашего блока — это размеры изображения. Меняем «img1» на «img2», left – на right и сохраняем.
#content img.img2{
width: 128px;
height: 128px;
float: right;
}
Обновляем страницу и смотрим, что у нас получилось. Все вышло так, как мы хотели. Давайте сделаем маленький штришок — добавим фоновое изображение <body>.
Задаем стили цвета и фона
Я качаю первое попавшееся фоновое изображение с сайта . Здесь вы можете скачать фоновое изображение, предварительно выбрав его по цвету или по форме. Я уже скачал его, перехожу в код и задаю фоновое изображение тегу <body>:
body{ background: url('img/bg.png') repeat;}
Здесь прописывается одно свойство, поэтому я написал его в одну строчку. Сохраняем. Проверяем. Мы видим, что фоновое изображение появилось, но оно заняло и часть контента. Это всё потому, что контент, блок «content», сам по себе прозрачный и мы ему не задали фоновый цвет. Чтобы избежать таких недоразумений, нам нужно задать его footer'у, header'у и content'у. Давайте зададим им троим фоновый цвет. Воспользуемся утилитой «pixie»:
#header{
background: #F8F5B5 url('img/bg_header.png') repeat-x;
width: 100%;
height: 100px;
}
Цвет content’а зададим белым:
#content {
background-color: #fff;
}
Цвет footer'а посмотрим сейчас снова в браузере.
#footer{
background: #D2E6FF url('img/bg_footer.png') repeat-x;
width: 100%;
height: 40px;
}
И цвет body посмотрим также в браузере. Возьмем коричневый цвет:
body{ background: #B3A57F url('img/bg.png') repeat;}
Сохраняем и проверяем, что у нас получилось. Появились «пробелы». Почти всегда при верстке получаются такие проблемы и это очень хорошо. Как нам их решить? Дело в том, что для заголовков мы использовали свойство margin. Это внешний отступ, поэтому у нас получается внешний отступ от header'а, и появляется пустое пространство. Чтобы избавиться от этой проблемы, нам нужно применить внутренний отступ – padding.
h3 {
padding: 15px;
color: #6ec9cc;
font-family: normal 24px/30px Verdana, Arial, sans-serif;
}
Можно то же самое применить и к абзацам, только есть один нюанс: вспомним несостыковку со свойством margin, то есть 15 пикселей и 15 пикселей накладывались, и получалось так, что бралось наибольшее значение, — у padding такого не будет. Сейчас мы увидим расстояние в 30 пикселей:
p{
color: #333;
font: 12px/16px Verdana, Arial, sans-serif;
padding: 15px;
}
Мы видим, что всё у нас стало нормально, но увеличился отступ. Мне кажется, что так получилось даже красивее, но, раз уж договорились сделать отступ в 15 пикселей, то сделаем 15 пикселей. Переходим в код и задаем значения: отступ сверху — 0 пикселей, справа — 15, снизу — 15 и слева тоже 15 пикселей:
p{
color: #333;
font: 12px/16px Verdana, Arial, sans-serif;
padding: 0 15px 15px 15px;
}
Сохраняем. Всё у нас получилось отлично, кроме footer'а. Мы видим, что появилось какое-то расстояние. Если перейдем в код css, мы увидим, что у footer'а задан отступ только сверху. Я специально решил это показать, т. к. такое может возникнуть у каждого, и скорее всего вы будете в недоумении, почему так произошло. Смотрите, какая хитрая штука здесь получилась. Если мы зайдем в файл typography.css, то мы увидим, что абзацам мы задали все отступы, кроме верхнего, по 15 пикселей, а абзацу footer'а задали только верхний отступ, следовательно этот абзац будет наследовать недостающие свойства от общего стиля абзаца. Таким образом, он унаследует и нижний, и левый, и правый отступы. Чтобы этого не происходило, мы должны их все задать. Прописываем: отступ сверху оставляем 15 пикселей, отступ слева и справа — ноль и отступ снизу — ноль. Последний ноль можно не писать — у нас и так всё отлично получится.
#footer p{
text-align: center;
padding-top: 15px 0 0;
}
Теперь страница у нас выглядит достаточно привлекательно. Мы закончили обработку header'a, content'a и footer'a.
Решение проблем в IE 6, IE 5.5
Осталось последнее действие — проверить страницу в старых браузерах — Internet Explorer 6 и Internet Explorer 5.5. Для этого нам нужно установить программу IETester (она лежит в дополнительных материалах к уроку). Чтобы ее скачать, нужно нажать на ссылку. Программа абсолютно бесплатна, скачать ее можно как с официального сайта , так и с моего сайта по ссылке, которая будет располагаться под видео.
Решаем проблемы в браузере IE 6
Я эту программу уже скачал и установил. Сейчас я ее запускаю и во вкладке «Создать» выбираю IE6. У нас создается окно браузера InternetExplorer6. Копируем путь к нашей странице, вставляем. Мы замечаем сразу несколько проблем. Во-первых, это проблема с заголовками: заголовок <h1> совсем не синего цвета и заголовок <h3> совсем не голубого, да и размеры у них неподходящие. Также мы заметили, что у нас исчез межстрочный интервал у абзаца, прозрачный фон у всех изображений, кроме третьего (так как у него был белый фон) и появилось какое-то пространство.
Давайте начнем решать эти проблемы. Начнем с заголовков. Переходим в файл typography.css и удаляем все комментарии. Бывает такое, что браузер Internet Explorer 6 просто не воспринимает некоторые из них, поэтому пробуйте решить возникшие проблемы с помощью удаления комментариев. Перезапускаем. Отлично, заголовки у нас отображаются нормально и абзацы тоже.
Теперь разберемся с пустым пространством. Откуда оно возникло? Дело в том, что когда мы применяли свойство float для изображения, изображение стало плавающим. Оно располагается поверх блока абзаца. Просто контент этого абзаца, то есть сам текст, его обтекает. И из-за этого случилось так, что изображение сдвинуло footer и вылезло за рамки content'a. Поэтому теперь нам нужно задать фоновый цвет не content'у, а оболочке wrapper. Переходим в код и видим, что идентификатору wrapper мы не задавали цвет. Задаем ему фоновый цвет:
#wrapper{
width: 800px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0 auto;
background-color: #fff;
}
Проблема решена.
У нас осталась только одна проблема — фоновый цвет изображений png. Как вы поняли, старые браузеры InternetExplorer5.5 и InternetExplorer6 прозрачности не понимают, поэтому заменяют прозрачность серым фоном. Для того, чтобы решить эту проблему, мы воспользуемся скриптом. По ссылке вы увидите решение проблемы с прозрачностью в IE6. Здесь есть пять методов, мы будем использовать третий. Вы можете почитать также о других методах, да и вообще на просторах интернета очень много различных решений. Скрипт, который мы используем в этом видеоуроке, я также прикладываю. Итак, мной была создана папка js, в которую я поместил java-скрипт. Сейчас к этому скрипту нам нужно прописать путь в документе page.html. Делать это мы будем в области <head></head>. Я вставляю кусок кода. Вы его скопируйте:
<--[if lt IE 7]>
<script type = "text/javascript" src = "js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.img1,.img2');
</script>
<![endif]-->
Сейчас объясню, что здесь написано. На первой строчке мы прописываем условный комментарий. Их понимает только браузер IE. Здесь прописано, что если версия браузера IE ниже седьмой, то применить нижеописанные правила. Далее идет подключение скрипта из папки js и перечисление селекторов. Хочу заметить, что можно задавать как классы, так и идентификаторы. У нас есть класс img2 и img1.
Таким образом, мы решаем проблему с прозрачностью. Сохраняем и проверяем. Отлично! Наш сайт в старом браузере IE6 работает.
Решаем проблемы в браузере IE 5.5
Теперь давайте разберемся с браузером IE5.5. Мы видим, что изображения здесь вообще исчезли, точнее не исчезли, а вместо них появился какой-то белый фон. Это явно не из-за прозрачности и не из-за того, что мы применили java-скрипт, так как у третьего изображения прозрачности, как таковой, не было. Хоть браузером IE5.5 пользуются еще меньше людей, чем IE6, но мы все равно решим эту проблему. Решаем ее с помощью метода №2. К сожалению, метод №2 у меня почему-то не заработал в IE6. Поэтому мы будем совмещать метод №2 и метод №3. Опять же скачать файлы вы можете как со страницы сайта , так и со страницы с видеоуроком. Я прилагаю все материалы, которые использовал в видеоуроке.
Переходим в коренную папку нашего сайта. Я сюда добавил файл iepngfix.htc и файл blank.gif. Открываем файл iepngfix.htc с помощью редактора Notepad++ и указываем путь к файлу blank.gif. Эти файлы находятся в одной папке, поэтому оставляем всё как есть. Теперь переходим в page.html и прописываем в условных комментариях общие стили:
<!--[if lt IE 6]>
<style>
.png{
behavior: url (iepngfix.htc);
}
</style>
<![endif]-->
Здесь используется свойство behavior, в котором идет указание пути к файлу iepngfix.htc. В условных комментариях мы прописали, что если используется браузер Internet Explorer, версия которого ниже шестой, то применяются нижеописанные правила. Давайте изменим комментарии, описанные ниже.
<!--[if IE 6]>
<script type = "text/javascript" src = "js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.img1,.img2');
</script>
<![endif]-->
Мы поменяли их на то, что если браузер — InternetExplorer6, то применить нижеописанные правила. То есть для браузера IE5.5 выполняются первые правила, а для IE6 – вторые. Мы прописывали стили в условных комментариях, чтобы они применялись не ко всем браузерам, а только к браузерам, версия которых ниже шестой.
Теперь нам нужно указать класс png нашим изображениям. Указываем его через пробел.
<div id = "content"> <h3> Что такое Lorem Ipsum?</h3.><img class="png" src = "img/man_grey.png"><p>Lorem Ipsum – это текст — "рыба", часто используемый в печати.</p> <br class = "clear"> <h3>Где его взять?</h3><img class="png" src="img/f_user.png"><p> Есть много вариантов Lorem Ipsum</p><br class = "clear"> <h3>Почему он используется?</h3><img class="png" src = "img/photo.png"><p> Давно выяснено, что Lorem Ipsum используется в качестве текста по умолчанию. </p><br class = "clear"> <h3>Откуда он появился?</h3><img class="png" src="img/photo.png"><p>Многие думают, что Lorem Ipsum – взятый с потолка псевдо-латинский набор слов.</p><br class = "clear"> </div>
Третьему изображению его можно не указывать, так как там используется белый фон. Сохраняем и проверяем нашу страницу в браузерах IE6 и IE5.5. В InternetExplorer6 у нас все отлично и в InternetExplorer5.5 тоже все хорошо.
Осталась последняя проблема — нужно выровнять сайт по центру. Снова переходим в код и разберемся, почему так произошло. Дело в том, что IE5.5 плохо поддерживает значение auto. Поэтому мы сейчас зададим значение свойству text-align – center.
body{ background: #B3A57F url('img/bg.png') repeat; text-align: center;}
Мы задали это только тегу <body>, однако оно у нас будет наследоваться и к тексту — текст будет отображаться по центру. Для того, чтобы это не происходило, мы зададим свойство text-align нашей обертке wrapper. Только в ней укажем значение left.
#wrapper{
width: 800px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0 auto;
background-color: #fff;
text-align: left;
}
Сохраняем. Всё отображается отлично как в браузере IE 5.5, так и в браузере IE6.
Я вас искренне поздравляю с вашим первым сверстанным сайтом на div'ах. Хоть он был и одноколоночным, хоть и видеоурок длился достаточно долго, но я надеюсь, процесс верстки вас увлек. Будет очень хорошо, если вы решите сверстать такую же страницу самостоятельно без всякой помощи, а также, если попробуете создать еще несколько колонок. В следующем видеоуроке мы повторим изученные материалы в этом видеоуроке, а также попробуем создать многоколоночный макет. На этом урок заканчиваем. До встречи в следующем видеоуроке по блочной верстке многоколоночного и резинового сайта!
Info-line.net
Не получается присоединить typography.css и reset.css к page.html с помощью @import в st.css. Браузер просто на них не реагирует (как Опера, так и Гугл Хром). Получилось только с помощью link rel (прямое прикрепление) в head файла page.html. Каковы, по-Вашему, возможные причины? Спасибо)
1. При присоеденении файлов typography.css и reset.css к page.html с помощью @import в st.css, файл st.css был присоеденен к page.html?
2. Импорт у вас написан таким образом?
@import url('reset.css');3. Путь к файлам typography.css и reset.css прописан правильно?
Если на все вышеописанные вопросы ответ «да», то:
1. Попробуйте удалить комментарии из css-файлов.
2. Обновить браузер.
3. Сделать импорт напрямую к файлу page.html через глобальные стили в css.
<style> @import url('reset.css'); </style>Пока у меня только такие догадки на счет этой проблемы 😉
Спасибо большое за ответ. Но, как ни странно, ничего не дает результат. Ладно, главное что все-таки работает, хоть и посредством немного более простой формы присоединения.
И еще. Посоветуйте, пожалуйста, направление в изучении создания сайта далее. jQuery? Что еще? Будут ли Ваши уроки по этой теме? Хотелось бы 😉
У меня будет мини-видеокурс по этой теме скоро (после курса по CSS).
Капец какой большой урок я его я дня проходил
Как есть, так есть)
Олег, Можете написать название утилиты?
Вы про утилиту Pixie?
Добавил ее к этому уроку для скачивания.
Спасибо, огромное) Утилита очень удобная!
Олег как мне сделать что бы баннер открывался в новой вкладке а меню сайта в тот самой =)
Баннер является ссылкой, поэтому поставьте ему
target="_blank". Ссылкам в меню не ставьте атрибутtargetи у вас по умолчанию ссылки будут открывать в том же окне. Если не правильно вас понял, прошу описать свою ситуацию подробнее или написать код.Как мне добавить код?
Использовать кнопку «код» и в атрибут lang вставить значение «html» для html-файлов, «css» — для css-файлов. Примечание: в google chrome кнопки не видны.
Олег спасибо я тебя просто неправильно понял я потом увидел как ето сделать в 12 видео уроке по CSS
Оцени пожалуйста сайт которий я сделал только я делал в Ucoz
Спасибо!
Тебе еще есть куда расти)) Чуть позже планирую записать 2 небольших видеокурса по CMS (системам управления контентом). Уверен, это тебя заинтересует больше чем Ucoz.
я просто работаю в Ucoz потому что там бесплатний хостинг
У меня есть еще 1 вопрос какие есть сайт что бы туда закинуть музыку а потом от туда скопировать html код(например YouTube туда закидаеш видео а потом копируеш html код и вставляеш себе на сайт)
нужно тоже самое только с музыкой
Можно воспользоваться сервисом Яндекс.Видео. Но можно воспользоваться и другими музыкальными хостингами, например —
спасибо
Олег, спасибо за твои отличные уроки, я снова и снова возвращаюсь к ним. Но у меня есть пожелание: возможно, что для новичка это достаточно громоздкий урок. Я сидела над ним не один день. Думаю, что свойство float заслуживает отдельного большого урока.
И вам спасибо) Рад быть полезным. К сожалению, видеоуроки эти уже исправляться не будут 🙂 Только если в будущем буду записывать новые видеокурсы по HTML и CSS, но это будет очень не скоро, если будет вообще 🙂
Почему у меня не показывает футер???Я все сделал правильно!Че-та не то! Помоги!
#foooter{ background: #DEDFDE url("img/gradient3.jpg") repeat-x; width: 100%; height: 100px; }Я все сделал как ты- но не показывает футер вообще!!!
Скачай дополнительные материалы, разархивируй их и посмотри, работают или нет. Если работают — значит ты где-то допустил ошибку. Сверься с оригиналом. Если все равно не получится — напиши все свои коды, я посмотрю.
Я могу скинуть тебе потом все свой коды:
Ответил чуть выше 🙂
когда будут новые видео уроки че то их долго нету!!!
Сегодня появится видеоурок. Возникли проблемы с монтажом видео, но это уже не проблемы, так как я нашел решение.
Теперь видеоуроки будут выходить немножко по-другому. Я решил остановиться на коротких видеоуроках 5-15 минут и выпускать их минимум 3 раза в неделю, чем на длинных — 0,5-1 час и выпускать их 1 раз в неделю, две.
да так лучше жду на новые видео уроки
Че-та не работает вообще! футер не показывает! И И продолжение правого и левого меню не работает ( тоисть меню не продолжается )
Помоги! Ща вышлю коды на емеил!!! А твое я открывал и все работало! Ну я всеравно не могу найти ошибку!!!!!! %) %) %)
Хорошо. Пиши сюда коды в таком формате, заменив круглы скобки на квадратные:
HTML-коды:
(html)
здесь код
(/html)
CSS-коды:
(css)
здесь код
(/css)
Еще раз напомню — не забудь заменить круглые скобки на квадратные, тогда все получится 🙂
Почему без файла reset.css растояние между header и content не уберается? (Я имею в виду фоновое изображение), также как и для footer и content.
Я уже говорил про это в этом видеоуроке) Если браузер не видит стилей, заданных для тегов, будь то заголовки или абзацы (или еще что-нибудь), то он задает ему свои стили (подробнее про типы стилей). Следовательно, удалив файл reset.css, вы избавились от стилей, заданных для заголовков, блоков и т.п. Браузер взял все в свои руки и показал вам, как он может интерпретировать ваш сайт, если вы не удосужитесь задать ему конкретные стили для html-элементов 🙂
Олег, у тебя ошибка в тексте, высота футера не 100px а 40px. Алмас, у тебя в слове footer 3 буквы-o а должно быть две.
Спасибо, исправил.
В скрипте нехвотает восклицателного знака в первой строчке в тексте:
Большое спасибо, исправил. Опять же, предлагаю по возможности пользоваться первоочередным вариантом обучения — видеоуроком.
Если будут еще какие-то ошибки, вы можете оставлять их в комментариях, как сейчас, а можете просто выделить ошибку нажать сочетание клавиш Ctrl + Enter, добавить комментарий и отправить сообщение об ошибке 🙂
Спасибо, но я немного не это имел в виду. Все стили я прописал в файле st.css, но не мог понять, какой тег в reset.css убирает отступы между header и content. Проблему уже решил-нужно было в теге body прописть: margin 0 auto.
Ещё раз спасибо за ответы =)
это хорошо 🙂 я об этом рассказывал в видеоуроке про списки.
Олег, привет.
Подскажи, пожалуйста, в чем хитрость в css-коде, когда нужно в большой прямоугольный блок вставить 4 блока в 2 строки по 2 блока в каждую?
Во вложенные левые блоки вставляется картинка, во вложенные правые — текст к ней.
Я пишу левым блокам float: left; а правым float: right;
Но у меня то картинка выходит из левого блока, улетает вниз под границу правого; то все 4 вложенных блока уползают за пределы родительского блока вниз, а родительский блок становится нулевой высоты (линией).
Никак не найду, в чем засада? Что-то еще нужно указать в css, чтобы блоки не выпадали вниз из родительского блока и левый и правый находились в одной горизонтальной строке напротив друг друга?
Привет, Надежда.
Напиши к каждому блоку стиль float:left;
И сделай так, чтобы количество блоков в строке было не более двух. (А как это сделать? — Знаешь?)
Остальные блоки просто будут автоматически переноситься на следующую строку.
Если возникнут проблемы — посмотри следующий видеоурок по верстке многоколоночного сайта.
Если у тебя все равно не получится сделать так, как ты хочешь — напиши мне.
Но только после того, как попытаешься сама 🙂
Олег, привет.
Уже все работает, спасибо.
Привет Олег!
Посмотрел урок,довольно сложно для новичков.
Всё можно сделать намного проще и быстрее.
Если тебя это заинтересует,можно поработать вместе.
Ничего сложного не вижу в своем коде. Все просто объяснил. Возможно, сложности возникли из-за того, что не смотрели предыдущие уроки. Они ведь все связаны 🙂
Ссылку на Вашу статью, конечно оставлю 🙂 Спасибо за отзыв.
P.S. Для читателей: не забывайте проверять верстку в IE.