Первый резиновый шаблон - оцените, покритикуйте

crashtua · June 8, 2012

http://senseofdota.narod2.ru/ - вот мой первый в жизни шаблон, который растягивается. Код шаблона под спойлером.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Две колонки</title>
		<style>
			header, aside, article, footer { 
				display: block;
				overflow: hidden;
			}
			header {
				min-width: 800px;	
			}
			.header_content_middle {
				padding-left: 25px;
				padding-right: 25px;
				height: 100px;
				background: url(content-side-left.png) repeat-y left,
					url(content-side-right.png) repeat-y right,
					url(content-mid.png) repeat center;
			}
			.layout {
				overflow: hidden;
				min-width: 800px;
			}
			aside {
				width: 150px;
				float: left;
			}
			.content_corners {
				background: url(content-corner-top-left.png) no-repeat left top,
					url(content-corner-top-right.png) no-repeat right top,
					url(content-corner-bottom-left.png) no-repeat left bottom,
					url(content-corner-bottom-right.png) no-repeat right bottom;
			}
			.content_top {
				height: 25px;
				margin-left: 25px;
				margin-right: 25px;
				background: url(content-side-top.png) repeat-x;
			}
			.content_bottom {
				height: 25px;
				margin-left: 25px;
				margin-right: 25px;
				background: url(content-side-bottom.png) repeat-x;
			}
			.content_middle {
				padding-left: 25px;
				padding-right: 25px;
				background: url(content-side-left.png) repeat-y left,
					url(content-side-right.png) repeat-y right,
					url(content-mid.png) repeat center;
			}
			.nomargin_top { 
				margin-top: 0; 
				padding-top: 0; 
			}
			.nomargin_bottom { 
				margin-bottom: 0; 
				padding-bottom: 0; 
			}	
			aside ul {
				list-style: none;
				padding: 0;
			}
			article {
				margin-left: 150px;
			}
		</style>
		<!--[if lt IE 9]>   
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<header class="content_corners">
			<div class="content_top"></div>
			<div class="header_content_middle">
				<h2 class="nomargin_top">Текст шапки сайта</h2>
			</div>
			<div class="content_bottom"></div>
		</header>
		<div class="layout">
			<aside class="content_corners">
				<div class="content_top"></div>
				<div class="content_middle">
					<h2 class="nomargin_top">Меню</h2>
					<ul class="nomargin_bottom">
						<li><a href="link1.html">Ссылка 1</a></li>
						<li><a href="link2.html">Ссылка 2</a></li>
						<li><a href="link3.html">Ссылка 3</a></li>
						<li><a href="link4.html">Ссылка 4</a></li>
					</ul>
				</div>
				<div class="content_bottom"></div>
			</aside>
			<article class="content_corners">
				<div class="content_top"></div>
				<div class="content_middle">
					<h1 class="nomargin_top">Название страницы</h1>
					<p class="nomargin_bottom">Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-блаБла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла..Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.Бла-бла.</p>
				</div>
				<div class="content_bottom"></div>
			</article>
		</div>
		<footer class="content_corners">
			<div class="content_top"></div>
			<div class="content_middle">
				бесполезные копирайты
			</div>
			<div class="content_bottom"></div>
		</footer>
	</body>
</html>

Оцените грамотность написания кода, хочу услышать критику, предложения по переделке, как сделать лучше, что может поменять для совместимости... И еще, может быть это глюки Народа, но страница с первого раза не грузится(то уголки не загружаются, то некоторые боковые стороны не грузятся... (тестил в Гугл хроме последнем, и IE 9, сайт отобразился, но не сразу, на Androidе ни один браузер не загрузил целяком страницу )

Modestes · June 8, 2012

Голова не соображает уже, поэтому по коду ниче не скажу ))

Скажу лишь что, можно было чутка с меньшим количеством кода написать.

И вообще написать резину, чисто макет не сложно. Куда сложнее поддерживать его и все содержимое в нужном виде!

crashtua · June 9, 2012

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

crashtua · June 9, 2012

Кстати, валидатор сказал что с страницей все нормально Вот результат.

Vin · June 9, 2012

Вообще-то тему надо публиковать в разделе "Обсуждение работ".

Хорошо, что сразу осилили декорирование с помощью изображений. Правда, оформление можно было бы и поинтересней сделать, ну да ладно, ещё успеете.

crashtua · June 9, 2012

Вообще-то тему надо публиковать в разделе "Обсуждение работ".
Хорошо, что сразу осилили декорирование с помощью изображений. Правда, оформление можно было бы и поинтересней сделать, ну да ладно, ещё успеете.

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

CalvinKlein · June 9, 2012

по поводу народа

если в ссылке поставить .narod.ru а не .narod2.ru то всё будет ок

не совсем понял почему скругление делается 4 background'ами

вы ведь пишете на html5 ( <!DOCTYPE html> ) так что тени и скруглённые уголки можно и средствами css3 оформить

border-radius, box-shadow

а макет резиновый написать совсем не сложно

Вот тут например подробно описано создание такого макета

Edited June 9, 2012 by CalvinKlein

Vin · June 9, 2012

вы ведь пишете на html5 ( <!DOCTYPE html> ) так что тени и скруглённые уголки можно и средствами css3 оформить
border-radius, box-shadow

Элементарно: многие упрощения в HTML5 (такие, как короткий доктайп без DTD) были сделаны с оглядкой на совместимость с браузерами, в т.ч. старыми. Для поддержки новых элементов старыми мозиллами и операми достаточно лишь прописать им display: block, для ИЕ — простой и надёжный скрипт. А с помощью картинок можно не только углы скруглять и тени отбрасывать, но и применять более сложное и нестандартное декорирование, поэтому верстальщику желательно (скорее, обязательно) уметь это делать. Также как при изучении программирования лучше не оглядываться на "последние достижения", а смело изобретать велосипеды. Я так считаю.

Edited June 9, 2012 by Vin

crashtua · June 9, 2012

не совсем понял почему скругление делается 4 background'ами
Вот тут например подробно описано создание такого макета

Ну, для примера - сайт WarCraft 3 . Как сделать с помощью CSS3 углы как там(например в блоке с надписью News) я не представляю... А с картинками проще, особенно, если надо будет заменить оформление на другое.

Sign In

Первый резиновый шаблон - оцените, покритикуйте

Recommended Posts

crashtua

Link to comment

Share on other sites

Modestes

Link to comment

Share on other sites

crashtua

Link to comment

Share on other sites

crashtua

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

crashtua

Link to comment

Share on other sites

CalvinKlein

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

crashtua

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information