Нетривиальная задача

IIAIIIA · September 5, 2011

Добрый день!

Хочу услышать мнение грамотных людей по поводу верстки одного из тестовых макетов.

Общие требования в верстке

1. Корректное отображение в браузерах: Internet Explorer 6 и выше, Firefox 3.5.* и выше, Google Chrome, Safari 5 и выше

2. Минимальное количество элементов в html разметке, минимальное количество стилей CSS, минимальное количество изображений для оформления (если вы используете изображения при реализации задачи), минимальное кол-во JavaScript'а (если вы используете JavaScript для реализации задачи, использование при этом JavaScript framework'ов /prototype, jQuery, и т.д./ приветствуется), использование тегов таблиц не желательно

Комментарии к макету для тестового задания

1. Фон заголовка (черный фон, белый текст) тянется в зависимости от ширины текста, если в одну строку не умещается - растягивается на всю ширину блока (как на блоке сверху справа)

2. Большой блок по высоте должен быть всегда равен высоте маленьких блоков справа, тянется светло-серая часть (где ссылка «ответить»).

3. Если высота маленьких блоков справа меньше высоты большого блока - тянется светло-серая подложка у маленьких блоков.

4. Блоки «Еще прокомментировали» тянутся только относительно своего наполнения (внутренние отступы всегда как на картинке)

Пример решения

Вот то, что я наваял - http://chebbasket.ru/test/test.html

Сам понимаю, что далеко от идеала - помогите, пожалуйста, разобраться, что можно было бы сделать лучше.

И особенно хочу обратить ваше внимание на комментарии №№2, 3. Как это можно было реализовать средствами html+css? я не понимаю...

ах да, забыл сказать, что этот макет не прокатил при собеседовании и меня не взяли на работу

цель этого сообщения - поднять свой уровень и уровень других начинающих верстальщиков благодаря толковым людям

Edited September 5, 2011 by IIAIIIA

MaferoK · September 5, 2011


<div class="moreComments roundCornersBottom">

че за ??

Great Rash · September 5, 2011

че за ??

А что вас так удивило?

UPD.

Почему не прокатило:

1) Старый доктайп, сейчас модно юзать <!DOCTYPE HTML>.

2) <div style="clear: both;"></div> - это стыдно.

3) Кругом привязка по id, а если таких блоков будет 2 или больше?

4) Стили прям в html, можно же вынести в отдельный файл?

5) Тоже касается скрипта.

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

psywalker · September 5, 2011

IIAIIIA, Лови, вот тут я делал похожую вещь. http://psywalker.ru/Portfolio/Business-group/main-page.html

sigma77 · September 5, 2011

IIAIIIA,

Не совсем понятно, что должно тянутся

Большой блок по высоте должен быть всегда равен высоте маленьких блоков справа, тянется светло-серая часть (где ссылка «ответить»).

Светлосерый блок - это блок с прокомментировавшими.

Ссылка же "Ответить" на белом фоне.

Если тянется последний блок с прокомментировавшими, то можно сделать как у psywalker, если белый, то js.

Dinow · September 5, 2011

Классам надо давать названия по содержимому, а не по расположению или визуальным эффектам. Что если колонки придется менять местами?

Почему заголовки начинаются сразу с H3?

psywalker · September 5, 2011

sigma77,

Оксан, погоди. Возможно ЖС тут не нужен. Я помню, когда-то решал такие задачи без него.

IIAIIIA

Покажи разные скриншоты со всеми ситуациями. Как должно быть и как не должно и т.д. С пояснениями.

Great Rash · September 5, 2011

Покажи разные скриншоты со всеми ситуациями. Как должно быть и как не должно и т.д. С пояснениями.

Я могу пояснить без скринов.

Левая и правая колонки должны быть одинаковой высоты, причем в правой колонке два блока должны занимать все пространство поровну. Все должно работать независимо от количества текста в любом из блоков.

IIAIIIA · September 5, 2011

всем спасибо большое за ответы, сорри, что не сразу отвечаю - на работе нахожусь

сейчас буду вникать в суть ваших ответов

<div class="moreComments roundCornersBottom">

два класса применены к диву

4) Стили прям в html, можно же вынести в отдельный файл?
5) Тоже касается скрипта.

в итоговой версии, которую отправлял при трудоустройстве вынес, разумеется, стили и js по разным файлам и класс clear появился в css

Классам надо давать названия по содержимому, а не по расположению или визуальным эффектам. Что если колонки придется менять местами?

принимается... слажал

Почему заголовки начинаются сразу с H3?

вот тут не совсем понял, а в чем проблема?

Левая и правая колонки должны быть одинаковой высоты, причем в правой колонке два блока должны занимать все пространство поровну. Все должно работать независимо от количества текста в любом из блоков.

абсолютно верно

Edited September 5, 2011 by IIAIIIA

psywalker · September 5, 2011

Левая и правая колонки должны быть одинаковой высоты, причем в правой колонке два блока должны занимать все пространство поровну. Все должно работать независимо от количества текста в любом из блоков.
абсолютно верно

Т.е. правые блоки должны быть по 50% в высоту всегда что ли?

sigma77 · September 5, 2011

Т.е. правые блоки должны быть по 50% в высоту всегда что ли?

Скорее в пропорции 1/1, т.к. блоков может быть и больше, но не меньше контента...

psywalker · September 5, 2011

Т.е. правые блоки должны быть по 50% в высоту всегда что ли?
Скорее в пропорции 1/1, т.к. блоков может быть и больше, но не меньше контента...

Ааа, ну тогда без ЖС-а походу тут никак( :unsure:

Great Rash · September 5, 2011

Т.е. правые блоки должны быть по 50% в высоту всегда что ли?

По высоте они могут быть разными, все зависит от количества текста внутри блока, но большой блок должен быть всегда по высоте как два маленьких.

psywalker · September 5, 2011

Т.е. правые блоки должны быть по 50% в высоту всегда что ли?
По высоте они могут быть разными, все зависит от количества текста внутри блока, но большой блок должен быть всегда по высоте как два маленьких.

Ну так же и наоборот, да?

sigma77 · September 5, 2011

По высоте они могут быть разными, все зависит от количества текста внутри блока, но большой блок должен быть всегда по высоте как два маленьких.

Тут вопрос в том какую часть блока тянуть, но тут всё будет выглядеть убого, если одна из колонок будет значительно выше другой.

Great Rash · September 5, 2011

Ну так же и наоборот, да?

Тут вопрос в том какую часть блока тянуть, но тут всё будет выглядеть убого, если одна из колонок будет значительно выше другой.

Обе колонки в любой ситуации должны быть одинаковы, независимо от того справа больше текста или слева. Вопрос в том убого или не убого будет что-то выглядеть не стоит, об этом в ТЗ ничего не сказано.

psywalker · September 5, 2011

Ну так же и наоборот, да?
Тут вопрос в том какую часть блока тянуть, но тут всё будет выглядеть убого, если одна из колонок будет значительно выше другой.
Обе колонки в любой ситуации должны быть одинаковы, независимо от того справа больше текста или слева. Вопрос в том убого или не убого будет что-то выглядеть не стоит, об этом в ТЗ ничего не сказано.

Согласен. А ты не знаешь решение без ЖС?

IIAIIIA · September 5, 2011

и я согласен) вообще на их сайте это реализовано именно через js, но по нашему разговору на собеседовании я понял, что вполне возможно обойтись без него...

psywalker · September 5, 2011

и я согласен) вообще на их сайте это реализовано именно через js, но по нашему разговору на собеседовании я понял, что вполне возможно обойтись без него...

А какие браузеры нужны? ИЕ6-8 в теме?

Очень хотелось бы увидеть решение без ЖС.

sigma77 · September 5, 2011

Тут вопрос в том какую часть блока тянуть, но тут всё будет выглядеть убого, если одна из колонок будет значительно выше другой.
Обе колонки в любой ситуации должны быть одинаковы, независимо от того справа больше текста или слева. Вопрос в том убого или не убого будет что-то выглядеть не стоит, об этом в ТЗ ничего не сказано.

Народ, ну вы хоть иногда чужие посты читаете?

Вопрос не в убогости/неубогости, а в постановке задачи.

Если уж на то пошло, то решение с одинаковыми колонками Максим уже предложил.

psywalker · September 5, 2011

Если уж на то пошло, то решение с одинаковыми колонками Максим уже предложил.

Ну, да, но не то, чтобы предложил прям. Я там делал отчасти похожую задачу и вот на основе её можно соорудить что-то похожее на задачу ТС. Я раньше делал такие, на основе моего решения :rolleyes:

SelenIT · September 5, 2011

Моих способностей пока хватило только тупо на такое — охвачены последний FF и вебкитные (клик по левой колонке меняет соотношение текста). IE8 и предпоследняя/последняя Оперы упорно отказываются тянуть меньшую колонку. Может, кто-нибудь поможет довести до ума (либо укажет на ошибочность пути в целом)?

psywalker · September 5, 2011

А вот моих способностей хватило на эту ересь. В хроме точно пашет, но хотелось бы добить, чтобы везде пахало. Реально ли?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	body,html { height: 100%; }
	.wrap,.tableInner { height: 100%; display: table;}
		.column { height: 100%; display: table-cell; vertical-align: top; width: 300px; background: red;}
		.content {background: #000; height: 100%; margin: 0 10px;}
		.tableInner { width: 100%;}
		.table-row-inner { display: table-row;}
		.cell-inner {position: relative; vertical-align: top;display: table-cell;background: #000; }
		.cell-content { position: relative; height: 100%;}
		.content-position {  background: green;  position: absolute; top: 10px; width: 100%; bottom: 10px;}
</style>
</head>

<body>
	<div class="wrap">
		<div class="column">

				<div class="content">

				</div>

		</div>
		<div class="column">

				<div class="tableInner">
					<div class="table-row-inner">
						<div class="cell-inner">
							<div class="cell-content">
								<div class="content-position">1</div>
							</div>
						</div>
					</div>
					<div class="table-row-inner">
						<div class="cell-inner">
							<div class="cell-content">
								<div class="content-position">2</div>
							</div>
						</div>
					</div>
					<div class="table-row-inner">
						<div class="cell-inner">
							<div class="cell-content">
								<div class="content-position">3</div>
							</div>
						</div>
					</div>
				</div>

		</div>
	</div>
</body>
</html>

p.s. в ячейках таблицы не пашет позиционирование. Вот в Хроме это обходится стороной, что является по мне фичей, а не багом)

Nanto · September 8, 2011

че за ??
А что вас так удивило?

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

Great Rash · September 8, 2011

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

Каждый пишет имена классов как он хочет, главное чтоб работало и было удобно читать.

Sign In

Нетривиальная задача

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information