Как грамотнее сверстать макет

Kamilla · 31.12.2009

Составила макет дизайна.... хм, с одной частью возникла проблема, а вернее спрор - долга и чувства. Долг - всё таки я ДИВный верстальщик, а чувство - лень с дивами, хочется таблицей!!

но тут не всё так просто, на первый взгляд

вот то что сверсталось http://i034.radikal.ru/0912/cf/39c89f9e78ed.png

1) жду замечаний и ПРЕДЛОЖЕНИЙ!!!!
2) Как быть с белым фоном на котором текст? наверное нужно сделать слой текст над слоем как раз этого фона... но как?

резать лист то надо, только как грамотнее это сделать? можете схематично в pait`e?

P.S. Всех с наступающим=)

trueW3C · 31.12.2009

У дивного верстальщика получится вот такой HTML...и не более...

Код:

<body><!-- Фон  -->
	<div class="clear"></div><!--Иначе margin-top #page ничего не даст -->
	<div id="page"><!-- margin: 30px auto; -->
		<div id="header"><!-- Фон шапка + полоска меню и поиска - одна картинка -->
			<h1 class="logo"><a href="#"></a></h1><!-- Ссылка блоком, размер вся шапка...большая ссылка -->
			<div id="navigation"><!-- position:relative -->
				<div class="search"><!-- position:absolute -->
					<input type="text" /><input type="submit" />
				</div>
				<ul class="menu"><!-- mapgin-left:150px -->
					<li><a href="#">Главная</a></li><!-- display:inline; margin:20px -->
					<li><a href="#">Форум</a></li>
					...
				</ul>
			</div>
		</div>
		<div id="main"><!-- Снеговик на фоне в низу -->
			<div id="sidebar"><!-- Веточки на фоне, float:left -->
				<ul class="list">
					<li><a href="#">События</a></li>
					...
				</ul>
			</div>
			<div id="content"><!-- float:right -->
				Гравитационный...
			</div>
		</div>
		<div class="clear"></div>
	</div>
</body>

gor · 31.12.2009

Задний фон не годится; он сильно рябит(почему бы не убрать фон, растянув саму страничку).Если у вас будет жестко фиксированая верстка - сделать фон более нейтральным(ведь фон это фон).На вашем месте фон с елементы декора(листики,травки,цветуёчки),я бы использовал в фоне шапки.
Цвета шапки ,градиент от бирюзы до сирени через серый,тоже спорны, они более подходят под цвета неоновой рекламы, чем к флористике.
По моему проблем с версткой никаких быть не может.Только поигратся с позиционированием графических елементов шапки, я бы посоветовал вам разрезать макет на части(лого,фотка 1, градиент),а не давать это все одним блоком.Сэкономите на размере, качестве и возможности манипуляции графикой и ее размерами(удалил-вставил,меньше-больше, вправо-влево,вверх-вниз) и форматами.

trueW3C · 31.12.2009

Я бы советовал вырезать шапку целиком...вместе с линией поиска и навигации

Kamilla · 31.12.2009

а чем поиск и навигация не нравится?

вот баннер мне тоже не очень, всё борюсь с ним... но походу вёрстки думаю что нибудь надумаю.

хм, а страницу с листом уже сверстала, но без серых цветочков... они будут сверху, с отрицательными отступами=)

Как грамотнее сверстать макет

Kamilla

Active Member

trueW3C

Поклонник Yii

gor

Well-Known Member

trueW3C

Поклонник Yii

Kamilla

Active Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей