Оцените div-верстку

305 сообщений

#17 лет назад

В верстке дивами ламер (1-я верстка).
На валидность не претендую.
Кто смотрел, говорят, шапка съезжает вправо.
Также прошу ткнуть носом в ошибки.
Верстал с jpg, поэтому нормальной резинки не получилось (дефолт — 1024x768).
ссылка — сабж.

Заранее спасибо.

97 сообщений

#17 лет назад

В опере справа сверху картинка сжимается.
Невалидно (в основном альтов нет).
В HTML ошибки (это мне валидатор сказал) - незакрытый , два одинаковых ID (надо использовать класс) и где-то странный align="center" сидит вместо "middle".
А так ничего.

1 сообщение

#17 лет назад

Firefox 2.0, если уменьшить ширину страницы, то головы отделяются от туловища. выглядит забавно

А в остальном выглядит приятно.

305 сообщений

#17 лет назад

Цитата ("andrej"):

В опере справа сверху картинка сжимается.

А можно скриншот?
Цитата ("andrej"):

Невалидно (в основном альтов нет).

А я на валидность особо не претендую ;-) Пока.
Цитата ("andrej"):

В HTML ошибки (это мне валидатор сказал) - незакрытый , два одинаковых ID (надо использовать класс) и где-то странный align="center" сидит вместо "middle".

Уже нашел. А вот по ID — наверное, он такие посчитал одинаковыми header_1, header_2, одинаковых у меня нет. Кажется.
Цитата ("andrej"):

А так ничего.

Спасибо.

305 сообщений

#17 лет назад

Цитата ("shuvalov"):

Firefox 2.0, если уменьшить ширину страницы, то головы отделяются от туловища. выглядит забавно А в остальном выглядит приятно.

Спасибо

. Голова и туловище положены разными картинками, поэтому и разъезжается.

17 сообщений

#17 лет назад



	<div id="footer_2">

		<table cellpadding="0" cellspacing="0" align="left" border="0" width="100%">

			<tr>

				<td class="footer">

					&copy; Все права защищены 2007

				</td>

			</tr>

		</table>

	</div>

Незачот

305 сообщений

#17 лет назад

Цитата ("RealisticGroup"):



	<div id="footer_2">

		<table cellpadding="0" cellspacing="0" align="left" border="0" width="100%">

			<tr>

				<td class="footer">

					&copy; Все права защищены 2007

				</td>

			</tr>

		</table>

	</div>

Незачот

Знаю. В таком случае, вопрос:
Как выровнять контент определенного дива по высоте по центру? vertical-align не работает.

305 сообщений

#17 лет назад

Кое-что обновил. Смотреть там же — ссылка

710 сообщений

#17 лет назад

_az_, плохо.
1) зачем в футере используется таблица? Если только для выравнивания по центру по вертикали, то это можно сделать при помощи отступов.
2) border="0" align="right" - такие вещи делаются через CSS, даже не смотря нато, чтоо вы используете HTML 4.01 Transitional.
3) есть такой интересный параметр minwidth (работает правда только в Опере и Мозиле)

4) На занятиях в нашей школе \ Латиноамериканские танцы - смысл использования данной конструкции? Это же h3-h4, заголовок. А вы страдаете ерундой. Почитайте ководство Лебедева - там про этот есть.

ссылка
ссылка
ссылка

441 сообщение

#17 лет назад

Плохо. От верстки таблицами этот вариант ничем не отличается принципиально.

Верстать надо не таблицами или div'ами, а с помощью HTML и CSS.

Для начала:

<div id="menu">

		<a href="#"><img src="i/b_news.gif" width="177" height="23" border="0" title="Новости" alt="Новости" vspace="10"></a>

		<a href="#"><img src="i/b_contacts.gif" width="177" height="22" border="0" title="Контакты" alt="Контакты" vspace="10"></a>

		<a href="#"><img src="i/b_arenda.gif" width="177" height="21" border="0" title="Аренда зала" alt="Аренда зала" vspace="10"></a>

		<a href="#"><img src="i/b_coachs.gif" width="177" height="22" border="0" title="Тренеры" alt="Тренеры" vspace="10"></a>

		<a href="#"><img src="i/b_price.gif" width="177" height="26" border="0" title="Расписание и цены" alt="Расписание и цены" vspace="10"></a>

		<a href="#"><img src="i/b_tours.gif" width="177" height="22" border="0" title="Турниры" alt="Турниры" vspace="10"></a>

		<a href="#"><img src="i/b_dances.gif" width="177" height="22" border="0" title="Танцы и одежда" alt="Танцы и одежда" vspace="10"></a>

</div>

заменить на

<ul id="menu">

	<li><a href="#"><img src="i/b_news.gif" title="Новости" alt="Новости"></a></li>

	<li><a href="#"><img src="i/b_contacts.gif" title="Контакты" alt="Контакты"></a></li>

	<li><a href="#"><img src="i/b_arenda.gif" title="Аренда зала" alt="Аренда зала"></a></li>

	<li><a href="#"><img src="i/b_coachs.gif" title="Тренеры" alt="Тренеры" ></a></li>

	<li><a href="#"><img src="i/b_price.gif" title="Расписание и цены" alt="Расписание и цены"></a></li>

	<li><a href="#"><img src="i/b_tours.gif" title="Турниры" alt="Турниры"></a></li>

	<li><a href="#"><img src="i/b_dances.gif" title="Танцы и одежда" alt="Танцы и одежда"></a></li>

</li>

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

109 сообщений

#17 лет назад

А вообщем неплохо!

441 сообщение

#17 лет назад

Вертикальное выравнивание где-то здесь недавно обсуждалось. См. раздел "Программирование".

97 сообщений

#17 лет назад

_az_,
Цитата:

А можно скриншот?

А оно уже не сжимается.

Чтобы выровнять по центру div - text-align: center. По вертикальному центру div'а ничего не выравнивают. Просто делуют отступы (padding) нужной высоты сверху и снизу, т.е. вроде как "расталкивают" границы дива от текста вверх и вниз, например padding-top: 20px; padding-bottom: 20px. Получится div с текстом по вертикальному центру.

17 сообщений

#17 лет назад

Вообще для выравнивания в div по вертикали можно использовать line-height. Допустим если height:200px и line-height:200px у дива, то все примерно находиться по центру). Правда если попробуете вставить бр то получится бяка

97 сообщений

#17 лет назад

RealisticGroup, ага, можно для коротенького текста в одну строчку.

305 сообщений

#17 лет назад

Цитата ("SolNikolay"):

_az_, плохо.
1) зачем в футере используется таблица? Если только для выравнивания по центру по вертикали, то это можно сделать при помощи отступов.
2) border="0" align="right" - такие вещи делаются через CSS, даже не смотря нато, чтоо вы используете HTML 4.01 Transitional.
3) есть такой интересный параметр minwidth (работает правда только в Опере и Мозиле)
4) На занятиях в нашей школе Латиноамериканские танцы - смысл использования данной конструкции? Это же h3-h4, заголовок. А вы страдаете ерундой. Почитайте ководство Лебедева - там про этот есть.

ссылка
ссылка
]http://w3c.org

1. Спасибо, уже понял, как.
2. Понятно.
3.

4. Понятно.

Спасибо большое, буду учиться.

305 сообщений

#17 лет назад

Цитата ("sukebe"):

<div id="menu">

		<a href="#"><img src="i/b_news.gif" width="177" height="23" border="0" title="Новости" alt="Новости" vspace="10"></a>

		<a href="#"><img src="i/b_contacts.gif" width="177" height="22" border="0" title="Контакты" alt="Контакты" vspace="10"></a>

		<a href="#"><img src="i/b_arenda.gif" width="177" height="21" border="0" title="Аренда зала" alt="Аренда зала" vspace="10"></a>

		<a href="#"><img src="i/b_coachs.gif" width="177" height="22" border="0" title="Тренеры" alt="Тренеры" vspace="10"></a>

		<a href="#"><img src="i/b_price.gif" width="177" height="26" border="0" title="Расписание и цены" alt="Расписание и цены" vspace="10"></a>

		<a href="#"><img src="i/b_tours.gif" width="177" height="22" border="0" title="Турниры" alt="Турниры" vspace="10"></a>

		<a href="#"><img src="i/b_dances.gif" width="177" height="22" border="0" title="Танцы и одежда" alt="Танцы и одежда" vspace="10"></a>

</div>

заменить на

<ul id="menu">

	<li><a href="#"><img src="i/b_news.gif" title="Новости" alt="Новости"></a></li>

	<li><a href="#"><img src="i/b_contacts.gif" title="Контакты" alt="Контакты"></a></li>

	<li><a href="#"><img src="i/b_arenda.gif" title="Аренда зала" alt="Аренда зала"></a></li>

	<li><a href="#"><img src="i/b_coachs.gif" title="Тренеры" alt="Тренеры" ></a></li>

	<li><a href="#"><img src="i/b_price.gif" title="Расписание и цены" alt="Расписание и цены"></a></li>

	<li><a href="#"><img src="i/b_tours.gif" title="Турниры" alt="Турниры"></a></li>

	<li><a href="#"><img src="i/b_dances.gif" title="Танцы и одежда" alt="Танцы и одежда"></a></li>

</li>

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

Ясно. А можно глупый вопрос? Как с помощью CSS сделать отступ, чтобы объект внизу(картинка) тянулся вниз(т.е. был прижат к низу по высоте) вместе с контентом? В данной верстке это касается бальных тапок внизу слева.

305 сообщений

#17 лет назад

Цитата ("RealisticGroup"):

Вообще для выравнивания в div по вертикали можно использовать line-height. Допустим если height:200px и line-height:200px у дива, то все примерно находиться по центру). Правда если попробуете вставить бр то получится бяка .

Спасибо, мне это как раз подходит

441 сообщение

#17 лет назад

Цитата ("_az_"):

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



html {

    background: #fff url(i/tapki.gif) 0px 100% no-repeat;

}

Вариант два (если кроме картинки что-то еще должно быть, т.е. полноценный футер):
ссылка
Требует внимательного чтения и обработки напильником.

97 сообщений

#17 лет назад

Цитата:

Ясно. А можно глупый вопрос? Как с помощью CSS сделать отступ, чтобы объект внизу(картинка) тянулся вниз(т.е. был прижат к низу по высоте) вместе с контентом? В данной верстке это касается бальных тапок внизу слева.

Для начала нужно убрать абслютное позиционирование везде вообще...

1 2

Последняя