Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML


Информационный Канал Subscribe.Ru
   Новости сайта www.htmlbook.ru

Добрый день.

1 июня сайту htmlbook.ru исполняется полгода! Подарки, поздравления, цветы и открытки слать мне на ящик vlad@htmlbook.ru. Можно с пометкой "Поздравляю горячо любимый сайт и автора со знаменательной датой", но можно и поскромнее, например, просто "Поздравляю!". Кстати, через 33 дней после этого числа и мой день рождения наступит.

Сегодня не будет никаких статей, я предлагаю вам несколько задач по использованию слоев и верстки с их помощью. Решение некоторых задач мне известно, других же нет. Простое любопытство движет узнать решение, а также понять имеется ли оно с указанными условиям. Решения присылать мне на ящик vlad@htmlbook.ru или в форум по адресу http://forum.htmlbook.ru

Задача 1

Приведенный ниже код делает две колонки на всю ширину страницы. Левая колонка шириной 25%, правая, соответственно, - 75%. Если информация в правой колонке больше, чем в левой, то показывается все в порядке, т.е. колонки одинаковой высоты.

Задача следующая: необходимо изменить код таким образом, чтобы при наличии текста в правой колонке больше, чем в левой, высота слоев была бы одинаковой.

Для продвинутых задача посложнее. Независимо от того, где информации больше, в левом слое или правом, высота их должна быть всегда одинакова.

При решении задач следует учитывать два условия: первое - таблицы применять нельзя, только слои и стили, второе - во всех браузерах (Opera 6+, IE 5+, Nescape 6+) страница должна показываться примерно одинаково и без артефактов.

<html>
<head>
<style>

BODY {

margin:0;
padding:0;

}

#container {

background: #FC0;
width: 100%;

}

#left {

float: left;
width: 25%;
padding: 15px;

}


#right {

background: gray;
margin-left: 25%;
padding: 15px;
color: white;

}

</style>
</head>

<body>
<div id="container">
<div id="left">Это левая часть страницы</div>
<div id="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

<p>Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet olore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.</p>
</div>
</div>

</body>
</html>

 

Задача 2

Создать таблицу без использования тега table и td. Только стилями и слоями.

Задача 3

Необходимо разместить содержимое слоя по центру вертикали. Аналог параметра valign в ячейке таблицы.

Задача 4

Необходимо создать три слоя, содержащие соответственно заголовок страницы, среднюю часть с контентом и нижнюю часть. Высота заголовка и нижней части фиксирована и указана ниже на рисунке. Вся страница должна занимать 100% высоту браузера, при этом "подвал" должен быть выровнен по нижнему краю.

Высота 100px
Контент
Высота 30px
Рекомендую подписаться на рассылку:
CenterINet - все для начинающих и опытных web мастеров
Всё о Photoshop
Всё из мира графического редактора Adobe Photoshop. Еженедельно и только для вас в рассылке последние новости и обновления ресурса http://psd.eserver.ru. Не пропустите десятки увлекательных статей о Photoshop и компьютерной графике!
Новичку, интересующемуся, профессионалу!
 

  Разделы сайта
 
Создание сайта
  HTML
  CSS
  Динамический HTML
  Графика
  Дизайн
  Приемы верстки
  Инструментарий
  Справочная информация
  Шаблоны
  Форум

  Подписка на новости
  Введите ваш e-mail:
  Помощь
  Не знаете, с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное