Прижимаем footer (подвал/футер) к низу экрана

2.03.2010. CSS, HTML, Дизайн

4

Достаточно часто при дизайне сайта появляется необходимость прижать футер к низу экрана. Есть множество способов это реализовать, вот один из них:

Вот наш HTML-файл. Футер в нем должен быть выненес за пределы основного содержимого.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
</link></head>
<body>
<div id="content">
Контент
</div>
<div id="clear"></div>
<div id="footer">
Ну а это наш подвал
</div>
</body>
</html>

Нам нужно загнать подвал вниз экрана. Напишем CSS для этой страницы:

html,body
{
margin:0;
padding:0;
color:#000;
background:#fff;
height:100%;
}
 
#content
{
position:relative;
margin:0 auto;
width:980px;
min-height: 100%;
height: auto !important; 
height: 100%;
background:#999;
margin-bottom:-50px;
}
 
 
.clear
{
clear:both;
}
 
#footer
{
background:red;
width:980px;
position:relative;
margin:0 auto;
height:50px;
}

Что мы здесь сделали?
Все очень просто. Мы задали высоту страницы без подвала равной 100% (это все, что находится в блоке с id=content). Затем мы сдвинули весь блок на 50px вверх, чтобы освободить место под подвал. После этого мы установили высоту подвала равной 50px. Теперь подвал будет прижат к нижнему краю, а до него будет растягиваться блок с контентом, в том числе и фон.
Вот и все. Подвал прижат к футеру. Как-нибудь потом напишу еще пару вариантов прижатия футера к подвалу.

Блочная верстка сайта (верстка с помощью DIV и CSS)

26.02.2010. CSS, HTML, Дизайн

2

Обычно, когда разрабатывается дизайн сайта, он сначала рисуется в Photoshop, GIMP или любом другом графическом редакторе и только после этого с макета дизайн переносят на html и css (иногда на flash, но у нас не тот случай). Вот этот перенос и называется версткой сайта, о которой я сегодня начну рассказывать.

Я расскажу, как верстать шаблон на примере простого макета:

Как видите, наш макет ужасно приметивен. Он состоит из двух сайдбаром, шапки, подвала и места под текст.

Теперь начнем его верстать.

Первым делом создаем html-файл, в котором будут храниться эти блоки и ссылка на CSS нашего шаблона. Первым делом создаем div с id="main" (или любым другим, который вы будете использовать в вашей таблице стилей). В этом блоке будут хранится все остальные блоки (шапка, подвал, сайдбары и текст). Теперь, внутри этого тега, создаем еще 5 div`ов и каждому присваеваем свой уникальный id (например: header, sidebar1,sidebar2,text,footer). Между первыми 4 блоками и подвалом добавьте еще один блок, у которого class="clear"

В результате у вас должен быть примерно такой html-файл:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
</link></head>
<body>
<div id="main">
<div id="header">
Шапка
</div>
<div id="sidebar1">
Сайдбар 1
</div>
<div id="sidebar2">
Сайдбар 2
</div>
<div id="text">
Это будет центральный блок с текстом
</div>
 
<div class="clear"></div>
<div id="footer">
Ну а это наш подвал
</div>
</div>
 
</body>
</html>

Сохраняем файл и открываем наш файл стилей (style.css)
В нем первым делом создаем пустые описания наших классов и id:

#main
{
 
}
 
#header
{
 
}
 
#text
{
 
}
 
#sidebar1
{
}
 
#sidebar2
{
 
}
 
#footer
{
 
}
 
.clear
{
 
}

Теперь начнем все это заполнять.
Сначала пропишем стандартные настройки тега , вдруг есть браузера, у которых фон по умолчанию черный:
body
{
margin:0;
padding:0;
color:#000;
background:#fff
}

У div с id=main у нас ширина должна быть 980px (т.к. на макете, с которого мы верстаем, она 980). Также он должен быть у нас по центру, если ширина экрана пользователя больше 980px. Поэтому мы это и напишем в полу #main { }:

#main
{
position:relative; //сообщаем браузеру, что мы хотим позиционировать элемент
margin:0 auto; //выравниеваем блок по центру
width:980px;
background:#000; //мы же хотим увидеть результат наших действий;)
}

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

Отлично, теперь настраиваем шапку. Она у нас имеет высоту в 300px и зеленый фон. Напишем это:

#header

{

background:green;

height:300px;

width:100% //шапка занимает все 980px в ширину

}

Установим наш блок с текстом по центру:

#text

{

background:#999; //серый фон

position:relative; //опять выравниеваем по центру

margin:0 auto;

width:600px;

}

Теперь настраиваем сайдбары. Они оба шириной 190px c желтым фоном. Первый должен плавать слева, второй справа. Напишем это:

#sidebar1

{

width:190px;

background:yellow;

float:left;

}

#sidebar1

{

width:190px;

background:yellow;

float:right;

}

Теперь нам осталось настроить только подвал и класс clear, который нам нужен, чтобы "сообщить" браузеру о том, что у нас закончились блок с текстом и сайдбары

.clear

{

clear:both;

}

Вместо div`а с этим классом можно использовать тег
, но так делать не рекомендуют.

Теперь подвал:

#footer

{

background:red;

width:100%;

height:100px;

}

В результате должна получится вот такая css:

body
{
margin:0;
padding:0;
color:#000;
background:#fff
}
#main
{
position:relative;
margin:0 auto;
width:980px;
 
}
 
#header
{
height:300px;
background:green;
}
 
#text
{
 
margin:0 auto;
background:#999;
width:600px;
 
}
 
#sidebar1
 
{
 
width:190px;
 
background:yellow;
float:left;
 
}
 
#sidebar2
 
{
 
width:190px;
 
background:yellow;
 
float:right;
 
}
 
#footer
{
background:red;
 
width:100%;
 
height:100px;
}
 
.clear
{
clear:both;
}

Вот, вроде, и сверстан сайт. Но вот незадача, у нас сайдбары не прижаты к подвалу, а сам подвал не прижат к низу страницы. О том, как это поправить расскажу в следующий раз.

Основные html теги

6.02.2010. HTML, Дизайн

0

Представляю вам список самых используемых html-тегов, которые, по хорошему, надо знать наизусть. Для пользования списком желательно хотя бы небольшое знание HTML, т.к. большинство атрибутов и  свойств тегов здесь не рассмотрено

Почти все теги  состоят из двух частей:

Между открывающим и закрывающим тегом находится само содержимое тега.  Также после имени тега (в открывающем теге) могут следовать атрибуты тега: выравнивание, задание толщины границ, цвета текста и т.д.

Главные теги

Большинство из этих тегов должны быть в любом документе.

Информация о странице

Теги, сообщающие название страницы и ее описание:

Работа с текстом

Заголовки

Служат для выделения заголовков в тексте. Например, названия главы книги, название статьи и т.д.

Заголовков в HTML всего 6 штук: от 1 уровня до 6. Чем меньше уровень заголовка, тем больше шрифт и тем он важнее.

Заголовки 1-3 уровня используются поисковиками (google, yandex,bing) для определения, о чем текст, поэтому рекомендую использовать эти теги во всех создаваемых вами текстах

Внешний вид текста (курсив, жирные, подчеркнутый)

Форматирование текста

В html для форматирование текста используется несколько тегов:

Ссылки и изображения

Создание ссылки:

<a href="http://adorning.ru"> adorning.ru</a> - href="адрес ссылки, а между <a ... > и </a> - текст ссылки

Вставка изображения:

<img src="adress" alt="text" align="center"/> - вставка изображения, находящегося по адресу adress, с выравниванием по центру. При наведение мышкой на изображение будет отображен текст text

Создание таблицы:

Некоторые специальные символы:

Кроме того, многие теги для форматирования текста поддерживают выравнивание текста/тега. За это отвечает атрибут align:

Для использования пишем тег и до закрытия открывающего тега куда надо выравнивать:

<p align="center"> текст выравнен по центру </p>

Еще пара полезных атрибутов:

style="css" - позволяет вам прописать css для этого экземпляра тега

id="id" - ид стиля в css таблице (уникальный для страницы)

class="class" - класс css для использования с этим тегом

Про сам СSS я, возможно, как-нибудь расскажу. CSS необходим для управления отображением текста: цветом фона, шрифта, типом шрифта, его размерами, выравниваем, границами, шириной элементов, отступами и многим другим.

Вот и все на сегодня!

P.S. Если вам, вдруг, понадобится сервер, то вот хороший сервер за paypal.

"description" content="?">
Страница 1 из 11

Rambler's Top100 Блогун - монетизируем блоги