Как можно добавить отступ между элементами списка? html css 4 страница

Продолжаем верстать самую Правильную веб-страницу! Здесь опять будет много кода. Однако же не утрашимся! Открываем лист стилей. Мы закончили на правиле для всех ссылок страницы. Теперь нам надо красиво оформить основное содержимое страницы. Его мы обзовём атрибутом text. Запишем далее в листе стилей CSS: #text { width: 545px; font-size:.8em; color: #333; margin: 10px auto; float: left; } #text p { text-align: justify; text-indent: 1.5em; margin: 0; padding: 0 15px; } #text a { color: #396; } #text a:hover { color: #f36; border-bottom: #f36 dotted 1px; } В первом правиле мы указали, что ширина у области текста будет равна 545 пикселям. Размер шрифта 0.8em (в правиле ноль можно не писать,.8em — обозначает тоже самое). С отступами понятно — верх и низ по 10 пикселей, по бокам на автомате. А вот последняя строчка как раз и задаёт местоположение нашего блока текста ни где попало, а с левой стороны. Слово float переводится как “ обтекание “. Но тут есть одна фишка. Читаем: “обтекание - слева”. Но ведь это сам текст находится слева! А обтекает его всё остальное справа. В этом есть некая путаница. Чтобы не заплутать, просто запомните: left — сам объект слева, а течёт всё правее. И наоборот, right — объект справа, а течёт всё левее. Для чего это нужно? Скопировав (или набрав ручками) приведённые выше правила в свой лист стилей и сохранившись, посмотрите, что получилось — текст выровнялся по левому краю странички, оставив справа пустое место. В это пустое место мы потом и вставим блок новостей, присвоив ему в листе стилей значение right для float. В следующем правиле мы для абзацев нашего текста задали выравнивание по всей выделенной площади. Слово justify как раз это и означает. Если этого не указать, то по умолчанию весь текст выровняется по левому краю. В англоязычных странах это всегда было нормой и сия норма исходила из размеров английских слов и букв. Но в кириллице такое выравнивание смотрится неаккуратно — весь правый край текста становится будто рваный. Поэтому мы выровняли его по обоим краям (это не выравнивание по центру!). Получилось хAрAшO! Слово indent означает не что иное как обычную “ красную строку “. Размер её также указан в полтора размера шрифта. Ну и, наконец, ссылочки. Для неактивной задали цвет эдакий салатовый, а для активной красный, да ещё и с подчёркиванием точечной (dotted) полоской в 1 пиксель толщиной. А теперь давайте укажем правила для наших картинок. Запишем в листе стилей: .img1 { width: 200px; height: 287px; margin: 0 0 0 15px; float:right; } .img2 { width: 200px; height: 200px; margin: 10px 10px 0 15px; float: left; } .venzel { width: 300px; height: 23px; margin: 10px 10px 0 15px; float: left; } Здесь ничего сложного. Каждую картинку мы обозвали своим атрибутом img1, img2, venzel, указав в каждом правиле размеры картинок и отступы для них. Вообще отступы и поля проще всего подбирать опытным путём. То есть вначале просто без них кидаем блоки или картинки на страницу, а потом смотрим, куда все это оно сползло и чуток корректируем, добавляя где надо и убавляя, где не надо. Кстати, значения можно указывать и с минусом. Например -10px. И картинка сдвинется в противоположную сторону, хоть даже и за край экрана. Каждой картинке мы задали обтекание в соответствии с её расположением на странице. Первая картинка будет справа от текста, вторая — слева, и вензель тож слева. И ещё одна вещь. Как видите, данные правила начинаются не с решётки #, а с точки. Это и есть признак того, что правило относится не к id, а к class. Теперь сохраняемся и любуемся на то, что у нас получилось. Если всё выполнили правильно, то на страничке будет красиво выровненный текст с рисунками свинов-летунов и завитушкой-вензелем под текстом. В следующий раз мы добавим на страницу список новых учаснегов и блок новостей.
Блочная вёрстка - 7

Продолжаем верстать страничку. В блоке текста мы разместим список новых участников. Вообще за это отвечает какой-нибудь php-скрипт, но так как мы делаем простую статичную страницу, то оформим эту штуку обычным списком. Только на этот раз не маркированным, а нумерованным. Задаётся такой список тэгом ol. Откроем в текстовом редакторе нашу страничку и сразу после вот этого места: …………….. <img class="venzel" src="venzel.gif" alt="" /> <img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" /> вставим следующий кусок: <div id="members"> <h2>Список новых учаснегов:</h2> <ol> <li><a href="#">Рыжий</a></li> <li><a href="#">Брат Корнелий</a></li> <li><a href="#">Муха</a></li> <li><a href="#">Пигфлай</a></li> <li><a href="#">Нигга Боб</a></li> <li><a href="#">Помидорка</a></li> </ol> <ol> <li><a href="#">Косолапыч</a></li> <l><a href="#">Тушка</a></li> <li><a href="#">Свин Полезный</a></li> <li><a href="#">Сало</a></li> <li><a href="#">Кнопка</a></li> <li><a href="#">Васёк</a></li> </ol> </div> <img class="line" src="line.gif" alt="" /> Что мы тут видим? Появился новый атрибут members. Так мы обозвали наш список. Тэг h2 — это заголовок второго уровня. Первый уровень, как леххко догадаться, это чаще всего название сайта или страницы. Далее у нас идут подряд аж целых два нумерованных списка. Зачем два? На макете мы разместили новых участников в две колонки с вертикальной нумерацией в каждой. Можно было бы, конечно, занести всех в один общий список, сделать ширину одной ячейки ровно вполовину отведённого под список места, и тогда ячейки автоматом переносились бы на новую строчку. Но тогда нумерация выглядела бы так: 1 2 3 4 5 6 и так далее. Согласитесь - коряво как-то. Поэтому мы не стали мудрить, а сделали просто два списка подряд. Но! Каждому в листе стилей задали обтекание слева. Об этом чуть позднее. Сразу после списков мы положили картинку волнистой линии. Ну, а теперь откроем наш лист стилей и запишем ещё кусочек красивых правил. #members { width: 300px; height: 190px; float: right; } #members h2 { color: #f60; font-size: 120%; font-weight: bold; text-align: center; } #members ol { color: #999; font-size: 120%; margin: 10px; float: left; } #members li { margin: 0 5px; } #members li a { color: #0c0; } #members li a:hover { color: #f00; } .line { width: 304px; height: 13px; float: right; } Расшифруем. Для начала мы задали всему блоку размер. Причём на этот раз не только ширину, но и высоту. Для чего это нужно? Если, например, в нашем списке было бы чуток меньше народу, то картинка волнистой линии “поджимала” бы список снизу, а нам надо, чтобы она была почти под срез картинки с летящим поросенком слева. Поэтому мы задали жёсткий размер как по ширине, так и по высоте. И обтекание справа. Ну, это уже понятно — список должен быть правее указанного рисунка. Далее задали правило для заголовка второго уровня. Здесь нам уже всё знакомо. Для самого нумерованного списка с тэгом ol мы указали обтекание слева. То есть оба наших списка (помним, что в коде страницы их два подряд) будут идти не в столбик, а один подле другого рядышком оба-два. Все имена в списке оформлены в виде ссылок (типо на странички профиля участников). Для них мы задали только цвета, без всяких подчёркиваний. Но почему-то на страничке они всё равно подчёркиваются при наведении мышки, да ещё точечной линией! Вот тут как раз и сработал так называемый каскад — список-то лежит в зоне действия атрибута text и поэтому просто перенял от него часть правил. Последнее правило здесь для рисунка линии. Оно также, как и предыдущие картинки, оформлено классом. Сохранились. А теперь смотрим, что получилось. В следующий раз прицепим к нашему сайту блок новостей и симпатишный подвальчик - он же footer.
Блочная вёрстка - 8

Продолжаем верстать наш Правильный и соответствующий самым строгим рекомендациям консорциума W3C сайт. Наш девиз — Идеальный XHTML и Кристально Чистый CSS! Шутка. Сегодня мы практически соберём всю Главную страницу целиком. Останется потом только кой-чего подправить и приукрасить. Открываем нашу страничку index.html. Находим вот это место: .......... <li><a href="#">Васёк</a></li> </ol> </div> <img class="line" src="line.gif" alt="" /> и следом сразу вставляем вот этот кусочек: </div> <div id="news"> <h3>Самые распоследние новости:</h3> <ul> <li>Всю прошедшую неделю лил жуткий дождь, и полёты временно приостановились. Самые безбашенные пиггасы, однако, всё равно кучковались стаями на проводах местной радиолинии и дружно создавали помехи. Малаццы!</li> <li>Пиггас Хмурый Пятак снова хмурый. Обещал всех урыть. Злой сильно.</li> <li>У нашего друга Боббса завтра ДР! Поздравления и подарочки просил вручать возле новой будки и непременно на виду у соседского пса Мухомора, чтобы тому завидно стало. Пляски намечаются до самого утра. При наличии на небе луны — будет весело.</li> </ul> </div> <div class="clearfloat"></div> Что мы тут видим? Во-первых, закрывающий тэг /div, который показывает, что область основного текста закончилась. Далее идёт маркированный список новостей с заголовком 3-го уровня. В самом низу мы добавили “очистку обтекания” — clearfloat (для неё также в листе стилей пропишем свои правила, а именно очистку с обоих сторон). Для чего это? Вообще наша вёрстка является “ плавающей “. Вон сколько у нас уже обтекаемых элементов. При этом разные браузеры по-разному воспроизводят такую вёрстку (о том, что IE по-своему “видит” поля и отступы уж и не говорю). В Opera и Firefox можно было бы обойтись и без очистки и сразу ниже писать код футера. Но в IE в таком случае появляются странные подёргивания фона у футера при наведении на ссылки мышки. Браузер словно хочет подпрыгнуть и заполнить все пустующие места какие есть. Поэтому мы просто добавим эту строчку и не станем заморачиваться. А теперь открываем наш лист стилей и допишем следующий код: #news { background: #ffc; width: 185px; color: #665; margin: 10px 5px; float: right; } #news h3 { color: #f60; font-size: 120%; font-weight: bold; text-align: center; } #news ul { list-style: url(marker.jpg) inside; } #news li { font-size: 75%; padding: 5px 10px; } Здесь мы для начала поменяли фон для блока новостей, чтобы визуально отделить колонку от основного содержимого. Затем задали ширину блока, цвет для шрифта и обтекание справа. С заголовком получилось хитро. Если вернуться чуток назад, то можно заметить, что у заголовка 2-го уровня (у списка учаснегов), также задан размер шрифта в 120%. Вообще по-умолчанию браузеры сами определяют размеры для заголовков в зависимости от их ранга. То есть по логике вещей, заголовок 3-го уровня должен быть мельче 2-го. А у нас наоборот! Это произошло потому, что заголовок списка учаснегов находится в блоке основного текста, для которого мы задали размер всего шрифта в 0.8em. Следующим правилом мы задали для списка стиль маркеров. По-умолчанию любой браузер отображает маркеры в виде чёрных кружков. Но можно задать и другое отображение — окружностей, квадратов, без маркеров, или вообще свой собственноручно нарисованный маркер. Как раз так мы и сделали. Нарисовали симпатишную зелёную галку с размерами 14х17 пикселей и указали в стиле ссылку на неё — url(marker.jpg). Следом приписали слово inside. Что это значит? Маркеры по-умолчанию не входят в сам блок текста. Когда мы задаём поля для текста, то маркеры не слушаются и вылезают за края. Это не всегда есть гут. Поэтому мы принудительно указали им быть inside, то есть внутри колонки с текстом. Сохраняемся и смотрим, что вышло!
Блочная вёрстка - 9

Подвал, он же “ футер ” — это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация. Очень часто можно наблюдать такую картину: верхнее гризонтальное меню под “шапкой” практически без изменений дублируется в левой колонке. Выглядит это, по меньшей мере, бестолково. Уж лучше продублировать основные разделы сайта в подвале. Пользы будет несомненно больше. Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты. Запишем в коде страницы сразу после этого места: ....................намечаются до самого утра. При наличии на небе луны — будет весело. </ul> </div> <div class="clearfloat"></div> Следующий код: <div id="footer"> <p>Главная \| <a href="#">О нас</a> \| <a href="#">О летучести</a> \| <a href="#">О везучести</a> \| <a href="#">Свинки-герои</a> \| <a href="#">Подружиццо</a></p> <p>© PIG.RU, 2007 \| All right reserved. \| <a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> \| <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> \| e-mail: <a href="mailto: piggs@pig.ru "> piggs@pig.ru </a></p> </div> Здесь у нас слово Главная не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта. Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на “ мыло ” и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского! Это ссылки на валидаторы — конторы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички (которые уже лежат в сети конечно же). И тут же получаете ответ. Сие придаёт вашим страничкам солидность и всеопщее наше верстальское одобрение. Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два /div подряд. Вот так: .......... href="mailto: piggs@pig.ru "> piggs@pig.ru </a></p> </div> </div> </body> </html> Второй /div — это закрытие области контейнера. Теперь допишем в листе стилей оставшийся код: #footer { background: #665; color: #fff; font-size: 70%; padding: 5px; clear: both; } #footer a { color: #ff0; } #footer a:hover { color: #f00; } #footer p { padding: 2px; text-align: center; } .clearfloat { clear: both; } Здесь мы задали фон серо-зелёного цвета, цвет текста — белый. А вот нижняя строчка в первом правиле (clear: both;) означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера. Ссылки у нас здесь ярко-жёлтые, а в активном состоянии — красные. Для текста мы выбрали размер мельче всех на странице — 70%. Как я и сказал, футер — важная часть, но не на столько, чтобы бросаться в глаза. Выравнивание для текста мы задали по центру. Самое последнее правило как раз служит для блока очистки, заданного атрибутом clearfloat, о котором мы говорили, верстая блок новостей. Сохраняемся, смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место: #container { width: 760px; margin: 0 auto; } И добавим следующую строчку: border: 1px solid #999; Должно получиться следующее: #container { width: 760px; margin: 0 auto; border: 1px solid #999; } Вот, собственно, и всё! Результат можно посмотреть здесь: Рэзультат. Реальный сайт о парасенгах можно посмотреть здесь — Pigfly.ru. От первоначального макета мало что осталось. Ну, главное идея, а править сайт можно бесконечно. Хотя идея тоже изменилась, и теперь Летающие Парасенги — это сайт О Счастье, Удаче и Богатстве и даже чуточку о Дзэн. Кстати, в следующем уроке я расскажу как сделать такое симпатичное меню, как сейчас на Парасенгах. Напоминаю, что наша верстка является “ плавающей “. Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы. Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение, например — расстоянием в пикселах от верхней и левой стороны экрана. Но это уже совсем другая история.
Верстка с помощью слоев

Раньше фреймы и таблицы считались основными способами верстки. Но время не стоит на месте, и с выходом нового поколения веб-браузеров, поддерживающих современные технологии, ситуация изменилась. Использование слоев, наподобие тех, что можно встретить в программе Adobe Photoshop, для верстки документов предоставило веб-мастерам поистине неограниченные возможности. Но, если от фреймов и так собирались отказаться ввиду их громоздкости и слишком грубому вида, то между приверженцами табличной верстки и поклонниками слоев разгорелись нешуточные страсти. Дело в том, что у таблиц хоть и существуют недостатки, но из-за простоты освоения этот метод верстки пользуется неизменной популярностью у начинающих веб-мастеров, да и некоторые профессионалы нет-нет, да и применят табличную верстку на сайте. Поэтому таблицы и слои стали считаться конкурентами. Сейчас, когда ажиотаж вокруг слоев немного поутих, самое время узнать достойный ли у табличной верстки соперник. Слоиявляются элементами HTML-кода, которые можно внедрять в веб-страницу путем размещения одного на другом с точностью до пикселя. Изменения в параметры слоя вносятся с использованием языка JavaScript или VBScipt, благодаря чему становится возможным применение на страницах сайта различных эффектов: плавающие окна, вращающиеся надписи, выпадающее меню и другие. Слой задается контейнером <Layer>, а для определения позиции слоя требуются атрибуты top (отступ от верхнего края экрана), left(отступ от левого края экрана), z-index (место расположения отдельного слоя, заданного декартовыми координатами, причем слой с самым большим значением помещается сверху). Достоинства слоев:

Метод позиционирования слоев относительно друг друга позволяет создавать интересные эффекты, способствующие «оживлению» веб-страницы.
Быстрая обработка слоев веб-браузерами.
Поддержка декартовых координат позволяет указать положение слоев на странице с точностью до пиксела.
Настройка свойств слоя посредством CSS.

К недостаткам слоев относятся:

Глубинное знание языков и технологий веб-программирования – JavaScript, VBScipt, CSS.
Различия в отображении сайта, при верстке которого применялись слои, веб-браузерами.
Проблемы при редактировании страниц со слоями в графических html-редакторах.

Верстка с помощью слоев технически напоминает позиционирование элементов, причем стандартный в таких случаях тег <Layer> лучше заменить на <Div>, тогда проблем с браузерами поубавится. Как видите, слои практически не ограничивают фантазию дизайнера, но вместе с тем сложны в исполнении. К тому же единый стандарт восприятия веб-браузерами в них отсутствует. Поэтому никто не гарантирует, что сверстанный таким образом сайт, будет идентично выглядеть и в Internet Explorer, и в Opera. Вот почему до сих пор не отказываются от использования таблиц. Однако, стоит заметить, что в плане верстки у слоев большое будущее, если устранятся разночтения веб-браузеров.

Описание и правила создания META-тегов

МЕТА - тег используется в пределах заголовка страницы и предназначен для того, чтобы включить любую полезную информацию, не определенную другими HTML тегами. Такая информация может быть извлечена серверами / клиентами для использования в идентификации, индексации и создании каталогов Ваших страниц. МЕТА - тег не виден в браузере при просмотре страницы, но значительно увеличивает размер страницы. Если Вы хотите, чтобы Ваш сайт находился в числе первых, выдаваемых поисковыми машинами при запросах пользователей, то Вам нельзя игнорировать использование МЕТА - тега. Кроме того, необходимо правильно заполнять содержимое МЕТА - тегов. Дополнительно к изучению META-тегов стоит ознакомиться с программой, которая поможет оптимизировать некоторые из META-тегов страницы: поисковая оптимизация страниц и meta-тегов для каждой из страниц сайта. Составные части МЕТА-тега: HTTP-EQUIV, Name и CONTENT.

HTTP - EQUIV. Этот атрибут определяет заголовок HTTP, которому принадлежит информация. Если семантика заголовка HTTP, названного этим атрибутом известна, то содержание может быть обработано на основании записанных здесь данных. Заголовки HTTP не чувствительны к регистру.
NAME. МЕТА - информационное имя. Если признак NAME - отсутствует, то данный атрибут может получить значение, равное значению HTTP-EQUIV.
CONTENT. МЕТА - информационное содержание, которое будет связано с данным именем и/или заголовком HTTP.

МЕТA - теги размещаются в любом месте заголовка страницы, т.е. между тегами <HEAD> и </HEAD>. Рассмотрим типичные примеры использования МЕТА - тегов (представлено только то, что известно мне. Вероятно, есть и другие NAME):

< META HTTP-EQUIV="Content-Type"Content="text/html; Charset=Windows-1251">- используется браузерами для определения кодировки, с помощью которой была написана данная страница. "charset=koi8-r" - альтернативная кодировка. Существуют также кодировки ISO, LAT, DOS. Внимание:не рекомендую вставлять на Вашу страничку данный код, потому что большинство серверов хранят данные в одной кодировке (например, koi8-r) и преобразуют их по запросу пользователя в нужную кодировку. Если сервер исправит Вашу первую кодировку во вторую, а пользователю выдаст третью, как смесь первой и второй, то никакие перекодировщики не смогут восстановить первоначальный текст на странице.
<META Name="author" Content="Ваши Ф.И.О., E-Mail">- идентификация автора страницы.
<META Name="copyright" Content="Информация о вашей фирме">- сохранение авторских прав, информация о Вашей фирме и тд.
<META Name="keywords" Content="Ваши ключевые слова">-определяет список ключевых слов, используемых на данной странице. Необходим для поисковых машин.
<META Name="description" Content="Описание Вашей страницы">- Краткое описание содержимого данной страницы. Необходим для поисковых машин.
<META HTTP-EQUIV="Expires" Content="Mon, 11 Jun 1998 00:00:01 GMT">- предназначен для того, чтобы браузер брал страницу не из кэша, а по настоящему адресу.
<META Name="Publisher-Email" Content="Ваш_e-mail@сервер.домен">- адрес издателя страницы (Ваш адрес).
<META Name="Publisher-URL" Content="Адрес Вашего сайта http://www.Ваш_сайт/">- адрес Вашего сайта в сети Интернет.
<META Name="Generator" Content="Microsoft Notepad">- описывается средство, с помощью которого была создана данная страница.
<META Name="revisit-after" Content="10 days">- (не точно!) как часто обновляется информация на странице.
<META Name="ROBOTS" Content="Index,follow">- (не точно!) предназначен для поисковых машин, постоянно сканирующих просторы сети Интернет.
<META HTTP-EQUIV="Refresh" Content="2">- страница перечитывает сама себя через время x (в нашем случае x=2 секунды).
<META HTTP-EQUIV="Refresh" Content="x; URL=http://где.то/что-то.html"- этот вариант прочитает другую страницу через время x.
<META HTTP-EQUIV="pragma" Content="no-cache">- запрещает кэширование страницы на локальном компьютере пользователя.
<META HTTP-EQUIV="Page-Enter" Content="BlendTrans(Duration=2.0)">- Эффект появления страницы при входе на на неё..
<META HTTP-EQUIV="Page-Exit" Content="BlendTrans(Duration=2.0)">- Эффект исчезания страницы при переходе по ссылке..

Настало время потренироваться в написании МЕТА - тегов. Для этого случая я представил небольшую форму, задача которой - оптимизировать и автоматизировать написание МЕТА - тегов. Параметр "Выводить" означает, войдет ли данное описание в результатирующую последовательность МЕТА - тегов, или останется невостребованным.

Кодировка:	Выводить
Author:	Выводить
Copyright:	Выводить
Keywords: (через запятую)	Выводить
Description:	Выводить
Generator:	Выводить
Publisher-URL:	Выводить

Итоговая информация:

Внимание! Длина содержимого МЕТА - тегов "desctiption" не должна превышать 200 символов, a "keywords" - 1000 символов. Такое условие надо выполнять, иначе Вашему сайту может быть отказано в индексации или не вся важная информация (которая представлена Вами для поисковых машин) будет проиндексирована. Это ограничение связано с особенностями работы поисковых серверов.

Автор Шаров Евгений

Преимущества верстки с помощью таблиц