Все не могла решиться начать этот урок. Давать построение сайта, полностью построенного на стилях CSS или не стоит? Дело в том, что тут много тонкостей и хитростей. А все из-за того, что некоторые браузеры несовместимы друг с другом. Им наплевать, что народ страдает, ждет уроков по этой теме, им начхать на дикого автора диких уроков, который не ест, не спит, думает как бы дальше пойти, им бы главное - с конкурентами не согласиться. Гордыня, видите ли их обуяла!
Ну и ладно, мы люди не гордые, попробуем сделать что-нибудь простенькое. Может и не развалится на ходу. Хоть бы до следующего урока продержалось и ладно!
Опять же не будем изобретать велосипед, а сделаем сайт- визитку. Вверху - шапка с логотипом, чуть ниже - строчка с названием темы, еще чуть ниже - три столбца: левое - меню, среднее - контекст, а правое - место для рекламы. Должны же мы с вами зарабатывать в конце-то концов?
Так что будем ваять следующее:
Сразу начнем прописывать стили. Дадим для общего фона цвет "чирок" - teal; margin и padding приравняем к нулю (чтобы никаких полей и отступов от границ окна), размер текста установим 12 px, шрифт дадим семейства "sans-serif" вот так:
BODY {
PADDING:0px;
MARGIN: 0px;
FONT-SIZE: 12px;
FONT-FAMILY: Verdana, Arial, Sans-Serif;
BACKGROUND-COLOR: teal;
}
Теперь можно разместить слева логотип и название. Это мы с вами сделаем играючи! Даже объяснять ничего не буду, просто напишу:
Стили:
H1 {
FONT-SIZE: 30px;
COLOR: gold;
PADDING-LEFT: 500px;
PADDING-TOP: 0px;
}
---------------------
html-код:
<BODY>
<IMG src="image/logo.gif" width=468 height=60 alt="логотип" align=left border=0></A>
<h1>Добро пожаловать!</h1>
</BODY>
Так, крыша у нас построена, теперь перейдем к красной полосе. Тут мы поступим очень хитро! Представим, что надпись - "ДИКАЯ ПРАВДА - сайт в CSS" - один сплошной белый заголовок на красном фоне! И расположим его справа, добавив разные отступы и поля, чтоб смотрелось красиво!
стили:
H3 {
PADDING-RIGHT: 15px;
PADDING-LEFT: 15px;
FONT-SIZE: 12px;
PADDING-BOTTOM: 5px;
MARGIN: 0px;
COLOR: white;
PADDING-TOP: 5px;
BACKGROUND-COLOR: red;
TEXT-ALIGN: right
}
.............
html-код:
<H3>ДИКАЯ ПРАВДА - сайт в CSS</h3>
А теперь рассмотрим оставшуюся часть поподробнее. Я даже не поленилась и в Фотошопе обозначила необходимые размеры:
Тут необходимо пояснение. Я назвала левый блок - menu, правый блок - reclama, а средний блок - content. Левый и правый блок шириной 160 px, один прижат к левому (LEFT: 0 px), другой к правому (RIGHT:0 px) краю экрана. Значения фиксированные (POSITION: absolute). Для каждого блока задала бордюрчик, отступы и поля. Также задала золотистый цвет заднего фона (BACKGROUND-color: gold).
Блоку "content" не хотелось давать фиксированное значение, чтобы вид страницы при разрешении браузера особо не изменялся. Поэтому я задала просто расстояние от левого и правого края экрана, равным 250 px. Ну, а остальное - те же поля и отступы и бордюрчик. Вот, пожалуй, и вся премудрость.
А записывается эта премудрость следующим образом:
Стили:
#menu {
WIDTH:160px;
PADDING: 10px;
LEFT: 0px;
MARGIN: 0px;
POSITION: absolute;
border: 5px inset red;
BACKGROUND-COLOR: gold
}
#reclama {
WIDTH:160px;
PADDING: 15px;
RIGHT: 0px;
MARGIN: 0px;
POSITION: absolute;
border: 5px outset red;
BACKGROUND-COLOR: gold
}
#content {
BORDER-RIGHT: silver 5px solid;
PADDING: 10px;
MARGIN: 15px 250px;
MARGIN: 0px;
BORDER-LEFT: #silver 2px solid;
BACKGROUND-COLOR: #fff
}
html-код:
<H3>ДИКАЯ ПРАВДА - сайт в CSS</h3>
В теле же документа прописываем следующее:
<DIV id=menu>
<H2>МЕНЮ:</H2>
тут содержание меню
</DIV>
<DIV id=reclama>
<H2>РЕКЛАМА</H2>
тут вешаем рекламу
</DIV>
<DIV id=content>
<H2>Основное содержание (Content)</H2>
тут основной текст
</DIV>
В принципе, это все, о чем я хотела сегодня рассказать. Захотите ли вы делать свои сайты полностью в стилях CSS, или будете использовать стили очень осторожно - решать вам. Во всяком случае, я выполнила свой долг перед CSS и теперь могу идти дальше.
Осталось привести весь код странички полностью.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Сайт в CSS — Дикая Правда</title>
<style> type="text/css">
body {
padding: 0; margin: 0;
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
background-color: teal;
}
h1 {
font-size: 30px;
color: gold;
margin: 0;
padding-left: 480px; /* Подвинули заголовок, чтобы не налез на логотип */
padding-top: 10px;
}
h2 { font-size: 14px; color: red; margin-top: 0; }
h3 {
padding: 5px 15px;
margin: 0;
font-size: 12px;
color: white;
background-color: red;
text-align: right;
clear: both; /* Чтобы красная полоса шла строго под логотипом */
}
#menu {
width: 160px;
padding: 10px;
left: 0;
position: absolute;
border: 5px inset red;
background-color: gold;
}
#reclama {
width: 160px;
padding: 15px;
right: 0;
position: absolute;
border: 5px outset red;
background-color: gold;
}
#content {
border-right: silver 5px solid;
border-left: silver 2px solid;
padding: 10px;
margin: 15px 210px; /* Отступы по бокам, чтобы текст не залез под меню и рекламу */
background-color: #ffffff;
min-height: 300px;
}
</style>
</head>
<body>
<!-- Убрали лишний </A> -->
<img src="image/logo.gif" width="468" height="60" alt="логотип" align="left" border="0">
<h1>Добро пожаловать!</h1>
<h3>ДИКАЯ ПРАВДА — сайт в CSS</h3>
<div id="menu">
<h2>МЕНЮ:</h2>
Здесь будут ссылки нашего племени
</div>
<div id="reclama">
<h2>РЕКЛАМА:</h2>
Купите лучшую дубину сезона!
</div>
<div id="content">
<h2>Основное содержание (Content)</h2>
<p>Тут основной текст нашей легенды. Теперь он живет в отдельном блоке, который не зависит от таблиц!</p>
</div>
</body>
</html>
Посмотреть это творение можно тут - Сайт в CSS
Кстати, у меня две очень важные новости.
Первая новость - моими Дикими уроками заинтересовалось издательство. Так что недалек тот час, когда все желающие смогут украсить свои полки и шифоньеры серией книг Диких уроков.
А вторая... Ну, в общем, в нашем полку прибыло. Я имею ввиду команду нашего сайта. Один раздел ведет человек, абсолютно незрячий. И знаете, где мы с ним познакомились? Да вот тоже, благодаря Диким урокам.
И я очень благодарна судьбе, что свела меня с разными удивительными и чудесными людьми. Согласитесь, одно дело создавать свои сайты зрячими, и совсем другое дело - когда ничего не видишь. Так что берите пример с Андрея, знакомьтесь с ним и вообще, стыдно вам не стать профессионалами своего дела!
Думаю, на следующем уроке мы с вами займемся чем-нибудь более интересненьким и полезненьким. До встречи!