Прижимаем 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;
}

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

Текст с тенью при помощи CSS

24.02.2010. CSS, Дизайн

0

Еще одно замечательное свойство CSS3 text-shadow. Оно позволяет создавать тень для текста.

Это свойство имеет 4 параметра:

Первый параметр отвечает за смещение тени по горизонтали. Положительное значение - смещение влево, а отрицательное - вправою

Следующий, второй параметр, указывает смещение по вертикали. Положительные значение - смещение вниз, отрицательное - наверх.

Третий параметр определяет размывание тени.

И последний параметр указывает на цвет тени.

Последние два параметра не обязательны.

Примеры:

text-shadow: 2px 2px 2px black;
text-shadow: 2px 2px 2px yellow;
text-shadow: 2px 2px 2px green;

Размытый текст:

style="text-shadow: 0px 0px 3px "

Текст с зеленым свечением:

style="text-shadow: 0px 0px 5px "

Также можно создавать двойную тень:

<div style="text-shadow: 2px 2px 4px #00F, 5px 5px 2px red;"> Текст с двойной тенью<span></div>

А вот, наример, текст с 25 тенями, в Firefox, Chrome, Konqueror отображается нормально, в Opera не правильно

текст с 25 тенями

Вот так быстро, просто и легко можно создавать красивые эффекты при написании текста

P.S. Хотите больше знать про Unix-системы? Тогда можете посмотреть бесплатные курсы Linux

Рамки с круглыми краями и прозрачность в CSS.

22.02.2010. CSS, Дизайн

2

Круглые края с помощью CSS

Существует множество способов создания рамок с круглыми краями. И в CCS3 наконец-то включили такую возможность. Разумеется, всеми любимый MS Internet Explorer об этом до сих пор не знает, ну и пошел лесом, все равное его у меня нет;)
Создание рамок в CSS3 очень просто. Правда пока приходится писать 3 варианта кода, ну это не страшно.

Вот CSS свойства для создания закругленных рамок:

CSS Gecko (Mozilla...) WebKit (Safari, Konqueror, Arora, Google Chrome и т.д.)
border-radius -moz-border-radius -webkit-border-radius
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius

Если у вас нормальный браузер, то таблица выше должна быть в рамке с закругленными углами. Я думаю, объяснять значения свойств не надо, в них и так все написано. Радиус рамки можно задавать в px, em, pt и т.д.

Вот например текст в рамке с радиусом, равным 1em.

Прозрачность с помощью CSS

Еще одно свойство CSS3 - прозрачность. Позволяет делать элемент прозрачными и полупрозрачными. Как уже говорилось, MS Internet Explorer об этом свойстве не знает и его не поддерживает.

Задается свойство очень просто:

opacity: значение от 0 до 1;

1 - полная непрозрачность, 0 - полная прозрачность

Текст с прозрачностью 0.5

А ниже полностью прозрачный текст:

Полностью прозрачный текст

Можете попробовать выделить строчку выше, скопировать ее в блокнот и убедиться в этом;)
P.S.
Хотите сделать сайт, а хостинг еще не выбрали. Этот хостинг для сайтов специально для вас.
P.P.S.
Вот здесь вы сможете узнать все про социальные сети России

Снова CSS. Шрифты, форматирование, позиционирование

17.02.2010. CSS, Дизайн

0

Шрифты

Для настройки шрифтов существует свойство font:

font-family: шрифты или их семейства.

Пример:

font-family:arial, serif; //делает основным шрифт Arial, если он отсутствует, то шрифты из группы serif

font-size - устанавливает размер шрифта

font-size:12pt; // устанавливаем размер шрифта в 12pt

font-size:50px;

font-style: style; // стиль шрифта

font-style:normal - обычный текст

font-style:italic - курсив

font-style: oblique - наклонный шрифт.

Как всегда, все это можно задавать сразу в font:

font: times 16pt italic;

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

text-align: выравнивание. Может быть center, left, right, justify (по ширине)

text-decoration - "украшения" текста. Различные подчеркивания, мерцания и т.д.

blink - мигание текста

underline - подчеркнутый текст

line-through - перечеркнутый текст

overline - надчеркнутый текст (линия сверху)

none - отсутствует.

Позиционирование

float - устанавливает обтекание элемента

right - элемент выравнивается по правому краю, обтекание слева

left - наоборот

inherit - по умолчанию

none - обтекание отсутствует

clear - убирает обтекание

both - со всех сторон

right - справа

left - cлева

width и height:

Устанавливает ширину и высоту блока. Кроме этого возможны:

min-width & min-height - минимальная ширина и высота

И

max-width & max-height - максимальные ширина и высота

position: как позиционировать.

Устанавливает, как позиционировать элемент.

absolute - позиционировать относительно окна, а не родительских элементов

fixed - почти тоже самое,  при прокрутке остается на месте

relative - позволяет позиционировать элемент. По умолчанию элементы нельзя позиционировать

static - по умолчанию, элементы не позиционируются

z-index - устанавливает виртуальный слой, в котором находится элемент. Больший номер слоя соответствует более верхнему слою

overflow - сообщает браузеру, что делать, если содержимое элемента не влезает

visible - делает его видимым, границы объекта игнорируются

auto - при переполнение появляются полосы прокрутки

hidden - все что не влезло идет лесом, т.е. исчезает

scroll - все время есть полосы прокрутки

Другое

Если вы хотите, чтобы какое-то свойство использовалось при возникновление конфликтом, то можно использовать ключевое слово !important. Пишется оно после задания свойства до ;

color: red !important;

Можно задавать специальные свойства для элементов, если на них навели мышь. Для этого после имени класса, id, имени тега надо написать :hover

a:hover

{

}

P.S. Любите ужастики? Тогда вам будет интересен фильм человек-волк

Еще немного CSS. Поля и отступы.

12.02.2010. CSS, Дизайн

0

С помощью CSS можно задавать поля и отступы в документе.

Отступы:

Отступы необходимы для того, чтобы  сообщить, насколько необходимо сдвинуть данный блок относительно родительского элемента (если таковой отсутствует, то относительно края окна).

Способы задания отступа:

Можно задать отступ от каждой стороны по отдельности:

margin-top: n px; - отступ сверху на n пикселей (кроме пикселей можно задавать проценты, пункты и т.д.)

margin-bottom: n px; - аналогично, снизу

margin-right: n px; - отступ справа

margin-left: n px; - отступ слева.

Кроме того, можно задавать просто с помощью свойства margin:

margin: n px; - отступы со всех четырех сторон

margin: y px x px; - отступ снизу и сверху на y px, отступ справа и слева на x px

margin: a b c d; - установка отступа от верха, затем права, затем низа, затем лева

Поля

Поля задают внутренние отступы в элементе. Такие поля аналогичны полям в книге или тетрадке.

Задание полей ничем не отличается от задание отступов, за исключением замены слова margin на слово padding

Примеры задания отступов и полей:

.text

{

margin: 10px; //отступы в 10px

padding: 5px; // поля 5 пикслей

}

p

{

margin-left:5px;

margin-top:1px;

padding: 5px 15px;

}

Продолжение про CSS следует

P.S. Нашел сайт, откуда скоро можно будет скачать фильм “Алиса в стране чудес”

UPD.

Продолжение

Основные свойства CSS.

10.02.2010. CSS, Дизайн

0

Фон

Границы (Край)

Задание границы в css состоит из нескольких частей. Во-первых, граница может быть правой (right), левой (left), верхней (top) и нижней (bottom). Также любая граница имеет несколько свойств: цвет (color), стиль границы (style), толщина границы (width).

Имя свойства строится из всего вышеперечисленного:

border-положение-свойство:

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

border-top:1px solid black; - верхняя граница имеет толщину в один пиксель, она черного цвета и непрерывная

Возможные значения свойств:

color - как всегда, цвет в RGB формате или в виде имени цвета.

color:red; color:#FED; color:#13F29E; - три варианта задания цвета.

width - тоже не особо интересный параметр. Определяет ширину границы. Задается в пикселях.

style- самый интересный параметр, определяет вид границы

Примеры:

border:2px solid green; - задает зеленую границу в 2 пикселя

border-left-style: dotted; - делает левую границу пунктирной

border-right: double 10px #666; устанавливает ширину правой границы в 10px, стиль - двойная линия и цвет #666 (если не ошибаюсь, то серый)

Продолжение следует!!!

UPD:

Продолжение: отступы и поля

Что такое CSS?

8.02.2010. CSS, Дизайн

0

Что такое CSS?

CSS, или каскадные таблицы стилей (Cascading Style Sheets) - это способ описания внешнего вида документа. Обычно используется вместе с html и xml. Основой задачей CSS является придание документу\странице\сайту своего собственного стиля, начиная от цвета и размера шрифта и заканчивая всевозможными эффектами, типа прозрачности, закругленных углов таблицы и т.д. Причиной к создание CSS послужила необходимость управлять внешним видом web-страниц и теперь эта технология используется в большинстве сайтов.

Синтаксис CSS очень прост. Любой CSS состоит из правил. Правило состоит из селектора и описания.

Селектор отвечает за то, к чему будут применены свойства в правиле. Селектор может быть именем тега, специальным классом или уникальным идентификатором. Также один селектор может зависеть от другого. Например, у нас есть тег <em>. С помощью CSS можно указать, что, например, жирный текст внутри этого тега должен быть не жирным, а красным. Это реализуется вот таким образом:

селектор селектор2 селектор3

{

//стиль

}

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

В стеле описываются свойства и их значения. Синтаксис выглядит так:

свойство: значение;

Например, запись color:red задает свойству "цвет текста" значение красный.

Еще немного про селекторы:

Селектор, означающий имя тега пишется также, как и имя тега:

Например, селектор тега <a> пишется a:

a

{

color:green;

}

Здесь, для текста внутри тега <a> устанавливается зеленый цвет.

Селектор-класс должен начинаться с точки:

.myclass

{

font-size:14pt;

color:#FFF;

}

В этом примере я создал свой класс с белым цветом шрифта и размером в 14 пунктов.

Для указания какому-либо экземпляру тега, что он должен использовать определенный класс для отображения своего содержимого, нужно в атрибутах тега прописать class="myclass":

<p class="myclass> Здесь будет белый текст в размером шрифта в 14 пунктов</p>

Кроме классов существуют еще ID, уникальные идентификаторы. В любом документе может быть только один тег, использующий ID. Чтобы указать тегу, что он должен для отображения использовать стиль с таким-то ID надо прописать в атрибут тега id="myid". Любой ID в CSS начинается с #:

#myid

{

background:grey; //установка фона в серый цвет.

}

-----------------------------------

<div id="myid">

Текст с примененным стилем myid. Этот текст будет на сером фоне

</div>e

Способы подключения CSS к HTML:

Подключить CSS к HTML-файлу можно несколькими способами:

  1. Записать весь CSS внутри тега <style> в заголовке документа (тег <head>)
  2. Подключить внешнюю таблицу стилей.Опять таки внутри тега <head>:

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

  3. Третий вариант не позволяет подключить таблицу стилей, но позволяет прописать стили внутри самого тега. Для этого используется атрибут style: style="свойства:значение;свойство 2:значение 2;".Например:

    <span style="color:green background: black">зеленый текст на черном фоне</span>

Вот и все на сегодня, подробнее о CSS и о "свойствах и значения" я расскажу как-нибудь в следующий раз

P.S. Нужен реферат? Вот вам рефераты на заказ.

Страница 1 из 11

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