Подскажите как лучше сверстать шаблон

Sirega · March 22, 2012

Добрый день, подскажите как правильно сверстать такой шаблон:

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

Подскажите как сделать лучше.

Switch74 · March 22, 2012

можно сделать резиновый, если качество исходников позволяет, скажем от 800 - 1600 или даже больше: хэдер прижат к верху, футтер к низу, между ними контент резиновый от - до и не будет пустых мест и будет имитация выравнивания по центру.

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

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

я вижу здесь 6 основных слоев, верстка не особо сложная

Sirega · March 22, 2012

Я сначала так и хотел сделать хедер вверху, футер внизу, так наверное и сделаю, но стало интересно узнать как это сделать, в поиске пока ничего не нашел. Если найду хорошее решение то подумаю о центре. Высота будет фиксированная.

Edited March 22, 2012 by Sirega

Switch74 · March 22, 2012

могу предложить что-то подобное, но я смотрел это только в хроме, проверь может подойдет или идею возьмешь


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
html,body{margin:0px;padding:0px;height:100%;}

#body{position:relative;min-width:800px;width:100%;min-height:400px;height:100%;}
	#site{position:absolute;margin:-200px 0px 0px -400px;top:50%;left:50%;width:800px;height:400px;		background:#ddd;}
	#header{position:absolute;top:0px;left:0px;right:0px;height:50px;	background:#eee;}
	#content{position:absolute;top:50px;bottom:50px;left:0px;right:0px;	background:#bbb;}
	#footer{position:absolute;bottom:0px;left:0px;right:0px;height:50px;	background:#eee;}
	</style>
</head>
<body>
<div id="body">
	<div id="site">
		<div id="header">
			header
		</div>
		<div id="content">
			content
		</div>
		<div id="footer">
			footer
		</div>
	</div>
</div>
</body>
</html>

Edited March 22, 2012 by Switch74

NeoXidizer · March 22, 2012

Switch74, в HTML5 (<!DOCTYPE html>) для указания кодировки не обязательно так же указывать content-type, тобишь хватит

<meta charset="utf-8" />

а так-же нет необходимости писать в css свойствах "px", если они приравниваются к нулю, тобишь

html,body{margin:0;padding:0;height:100%;}

и не упускай возможности указать повторяющиеся свойства в перечислении классов. Финкальный код:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<style type="text/css">
html,body{margin:0;padding:0;height:100%;}

#body{position:relative;min-width:800px;width:100%;min-height:400px;height:100%;}
#site,#header,#content,#footer{position:absolute;left:0;right:0;}
	#site{margin:-200px 0 0 -400px;top:50%;left:50%;width:800px;height:400px;background:#ddd;}
	#header{top:0;height:50px;background:#eee;}
	#content{top:50px;bottom:50px;background:#bbb;}
	#footer{bottom:0;height:50px;background:#eee;}
	</style>
</head>
<body>
<div id="body">
	<div id="site">
		<div id="header">
			header
		</div>
		<div id="content">
			content
		</div>
		<div id="footer">
			footer
		</div>
	</div>
</div>
</body>
</html>

P.S. работет в последнем Google Chrome, Opera, Firefox, IE7-9

Switch74 · March 22, 2012

NeoXidizer

спс за замечания, много что ты из этого мне сказал я знаю, но 0px это привычка писать единицы измерения, чтобы не забыть их писать у значений !=0, оптимизация кода будет полезной для ТС, ну и спс за тест кросбраузерностьи, на мой взгляд она очень даже ничего получилась для макетика от болды.

+ заслужил

Edited March 22, 2012 by Switch74

Sirega · March 23, 2012

От выравнивания по центру отказался, теперь сижу ломаю голову как сделать этот макет резиновым(так требует заказчик), помоему не логично, вы как считаете?

Switch74 · March 23, 2012

я это вариант предположил в самом начале, и возможно он то как раз и самый логичный :rolleyes:

ну тут просто все строгие размеры меняем на % и вот вам резинка для браузера :rolleyes:

Sirega · March 24, 2012

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

Sign In

Подскажите как лучше сверстать шаблон

Question

Sirega

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

Sirega

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Sirega

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Sirega

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information