Оцените вёрстку и код

[coldug]

Всем привет.

Свою первую верстку вылаживал тут в середине августа, интересно далеко ли ушел за это время

Помогите выявить ошибки в html или css коде, подскажите какие моменты можно было бы сделать проще/лучше в вёрстке.

Вот ссылка

[klierik]

products-block - это список оп логике должен быть

<div id="header"> - для чего используешь ID?

зачем reset.css выносить в отдельный файл?

ну а про: http://css.disipro.net/free-lance/businessProperty/css/style.css

могу сказать лишь одно - нечитабельно. почитай про организацию читабельного CSS от Вадима Макеева, к примеру.

В остальном, вроде норма

[coldug]

products-block - это список, согласен не подумал

<div id="header"> - использую id для главных блоков (так в книжках вроде в примерах было, да и на многих сайтах id="header" )

зачем reset.css выносить в отдельный файл? - вычитал в книжке "CSS ручной работы", видел у других верстальщиков, понравилось что не мозолит глаза в общем файле.(Какой бы вы посоветовали вариант записи reseta?)

Про организацию читабельного CSS оно Преимущества многострочного CSS?

Спасибо

Edited January 30, 2012 by coldug

[klierik]

ID - для JS. то что в данном моменте стриница отрендерится на 0,0000001с быстрее не имеет никакого значения.

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

на сегодняшний день весь мой резет состоит из следующего:

/* @group RESET */

	html { 
		font: 12px/18px Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif; 

		margin: 0;
		padding: 0;

		background-color: #444;
		color: #000; 
		}
	body {
		margin: 0;
		padding: 0px;
		}

		:link,
		:visited {
		    text-decoration: none;

			color: #0072b2;
			}

		:link:hover {
		    text-decoration: underline;
		    }

/* @end */

и находится он в основном файле.

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

Про организацию читабельного CSS оно Преимущества многострочного CSS?

вполне сойдет.

[Svatov]

на сегодняшний день весь мой резет состоит из следующего:

На ваших сайтах видимо нет форм

[klierik]

На ваших сайтах видимо нет форм

всё элементы формы, как правило, имеют контейнер который их и обнуляет/кастомизирует.

[coldug]

Если не сложно можете дать ссылку на любую вашу вёрстку, посмотрю как правильно организовывать css код и использовать id

[Svatov]

На ваших сайтах видимо нет форм

всё элементы формы, как правило, имеют контейнер который их и обнуляет/кастомизирует.

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

[lexxcode]

У меня reset примерно так выглядит:

html, body { /* опционально */
	height:100%;
}
body {
	background:#fff;
	color:#000;
	margin:0;
}
body, textarea {
	font: 0.75em/1.5em Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}
article, aside, footer, header, hgroup, nav, section {/* опционально */
	display: block;
}
a {
	color:#55afee;
	text-decoration:underline;
}
a:hover {
	text-decoration:none;
}
:focus {
	outline:none;
}
img {
	border:0;
}
p {
	margin:0 0 1.5em;
}

А там по ситуации что-то добавляется, в основном для элементов форм.

И тоже в начале основного стиля лежит. Не любитель я разбивать стилевые файлы.

[Zombak]

Тута

Помогите очень нужно ребята) Ау) Жду еже неделю...

[Yazon_Nile]

1 #nav ul li - можно без ul

2 Что ж так много позишн абсолют? Неужели это панацея от всех бед? В хедере можно легко и без этого обойтись!

3 ЗАчем #nav? Все стили с него на вложенную ul, а сам див в утиль.

4 .h-title - тоже часть заголовка

5 стили на параграф - зло)

6 Что мешает все стили с хедера (кроме высоты, это вообще фээ ) перенести на родителя? Ну его в данном случае нет, а нужно бы! Ну а с иннера на хедер, а сам иннер - удалить.

7 Класс active нужно вешать на лишку, а не на ссылку - больше возможностей будет в будущем, когда нужно будет отслеживать именно пункт с активной ссылкой.

8 Слишком много аидишников. По-моему железный аргумент в пользу классов - их можно использовать на многих элементах. ID - только на одном.

9 Ширину с контента и слайдера на родителя.

10 На все имаги должно стоять хотя бы одно из свойств float/vertical-align - иначе выскакивают какие-то отступы в разных браузерах.

11 Спан post-date - зачем задавать на него italic, если можно использовать <em>, где это идет в комплекте

12 Слишком сложные названия классов. К примеру.

product-info. А уже от него обращаемся - .product-info .date, .product-info .price и тд.

таких примеров туча) Можно и нужно упрощать.

13 В некоторых ссылках спан не нужен. Все от <а> можно прописать.

14 Класс group используется, как я понимаю исключительно ради after. Вместо этого лучше собрать все элементы, которым нужен хезлейаут и для всех один раз в стилях прописать этот афтер.

15 small-post - параграф и картинку завернуть в див с оверфлоу. (на параграф тоже кстати не помешает)

16 h-twitter-box - паддинг на него, вместо паддинга на внутренних элементах.

17 ппц. Не пойму фишку с пустым дивом и отрицательным маржином на футер. ну хоть убейте - не пойму.. Если хотите сделать footer at bottom - делается намного проще.

	<div id="wrapper">
		<div class="holder">

		</div>
	</div>
	<div id="footer"></div>

html,body {
	height: 100%;
	margin: 0;
}
#wrapper {
	min-height: 100%;
}
.holder {
	padding-bottom: 50px; - высота футера
}
#footer {
	position:relative;
	width: 100%;
	height: 50px;
	margin-top: -50px; - та же высота
}

Edited February 15, 2012 by Yazon_Nile