критика сайта

[sajkun]

Добрый день

Недавно верстал сайт http://www.rosvine.ru/

Будьте добры просмотрите его, нужна критика опытных верстальщиков.

Работа по словам одного человека более чем неудовлетворительная.

Диз не мой, только штмл. Если кто хочет могу выслать архив.

Заранее спасибо

[BassEast]

#page_pos {styles_prj.css (line 88)
left:50%;
margin:0 0 0 -502px;
}

если у вас сайт не резинится, можно было бы и margin:0 auto; обойтись.

А где ссылка с лого?

Кнопка "вход" некликабельна

footer вообще жесть.. всё В общем как-то не универсально, и не грамотно.

[sajkun]

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

что не так с футером?

отмеченный код это выравнивание сайта по середине

Edited August 20, 2009 by sajkun

[BassEast]

отмеченный код это выравнивание сайта по середине

зачем же так извращаться, чтобы отцентрировать сайт?

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

вы ещё услышите от других пользователей их мнения и самые наиразвёрнутые ответы : )

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

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

Не грамотно.. к примеру то, что footer лежит вне общего блока.. и стили для него вы прописываете такие же, что и у #page_pos

Edited August 20, 2009 by BassEast

[sajkun]

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

А как иначе отцентрировать страницу?

п.с. на двигло и не думал точиться, насадка не моя.

Edited August 20, 2009 by sajkun

[BassEast]

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

А как иначе отцентрировать страницу?

п.с. на двигло и не думал точиться, насадка не моя.

замените это:

#page_pos {
   left:50%;
   margin:0 0 0 -502px;
}

на это:

#page_pos {
   margin:0 auto;
   width:1000px;
}

[Игорь Ермаков]

Достаточно неплохо, но не валидно и не лаконично.

[sajkun]

валидность отсутствует ввиду натяга на двиг. верстка была валидной.

Про лаконичность что не так?

[Игорь Ермаков]

Просто старайтесь сделать в коде как можно меньше блоков, применяйте всё что вам предоставляет html и css, это обычно приходит со временем.

И всё таки валидность исправьте, это важно.

[lavr-ik]

1. Кроссбраузерности нет (смотрите ИЕ6, FF 3.5.2).

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

<div class="lamp"></div>
<div class="lamp"></div>
<div class="lamp"></div>

Такую конструкцию лучше заменить на прямую вставку изображений в html.

<div id="wrapper">
<div id="page_pos">

Непонятно, зачем вам два обрамляющих блока? Я все понимаю, центрирование и т.д., но это все легко осуществляется и в один блок.

5. У вас там что, отбивка текста по ширине? Уберите немедленно.

<table class="table_list">
<tr class="tr_odd">
<td><h2>!Новая запись</h2>
<div><p></p> <a href="?mode=news&c=view&rec_id=9">Подробнее</a></div>
</td>
</tr>
</table>

Что эта таблица выполняет?

<h2>!Новая запись</h2>

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

Резюме: очень много пустых блоков - снижает интуитивную понятность верстки.

Нет древовидной структуры кода - трудно отслеживать вложенность элементов (хотя это не критично, разумеется).

Нет отдельных стилей для ИЕ - и проблемы сразу же становятся: верстка ползет в моем 6.0.2

[sajkun]

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

про заголовки не знал, спасибо.

таблица не известно что делает, это уже от двига.

с кроссом в ие6 техническая проблема, стили под ие6 писались.

Под древовидной структурой кода подразумевалась отбивка табами?

[AMD]

http://floomby.com/content/dVMHOU31FU/

[аrt]

пункт меню "главная" должен быть неактивным на главной странице

[mishka]

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

Можна поподробней по этому пункту, так как у меня возникло несколько вопросов по этому поводу:

Вы утверждаете что такой код несимантичен:

<h1>Headline1</h1>
<h2>Headline2</h2>

А семантично так вот: (именно так я вас понял по фразе "семантически неверно использовать h2 без вложения в h1")

<h1>Headline1</h1>
<h1><h2>Headline2</h2></h1>

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

P.S. представьте что будет с заголовком <h6>, если верстать по "Вашей спецификации"

Edited August 21, 2009 by mishka2

[mishka]

Добрый день

Недавно верстал сайт http://www.rosvine.ru/

Будьте добры просмотрите его, нужна критика опытных верстальщиков.

Работа по словам одного человека более чем неудовлетворительная.

Диз не мой, только штмл. Если кто хочет могу выслать архив.

Заранее спасибо

Используйте css-reset только если просит клиент, в противном случае ненадо этого делать!!!

То что <div class="sun"/> висит на абсолюте в правом верхнем углу - хорошая задумка (верная), но реализованна не доконца верно - при малой ширине окна этот блок наезжает на ссылку "Вход" и она становится некликабельной (Для поправки списку мен: position:relative;z-index:1;) В ие6 проверьте после этого - так как одновременное применение фильтров для пнг и позишн:абсолют/релейтив могут всеравно перекрыть меню. Если так произойдет то внутрь добавте еще один блок и уже ему цепляйте бекграунд. Ну а внешнему релейтив и з-индекс.

Логотип сделайте ссылкой, обязательно с текстом внутри, чтобы при отключенном css было видно что это за сайт, на ссылку внутри логотипа прописывайте стили (display:block; height:100%) и ничего более, все остальное на сам блок лого. Если так будете делать то на главной странице чтобы убрать ссылку из логотипа вам достаточно будет из HTML убрать тег <a>.

Надпись "Вина краснодарского края" должна быть не просто бекграундом, а должна быть в HTML (поисковику то надо чтото искать), и не простым текстом а <h1> или <h2>(это если лого будет <h1>), и картинку с бутылками желательно имгой поставить, чтобы была возможность ее менять

Левую колонку вы назвали left-nav (значит предполагается навигация), но ссылок там нет...

Если блочному елементу есть стили float:left/right и margin с той стороны в какую вы его флотали, то в ие 6 он удвоится, выход - совместно с этими стилями дописывать display:inline

<div class="contact">
<div class="phone"/>
<p> +7 (945) 123 45 67</p>
</div>

зачем 2 вложенных блока? достаточно одного, делаете паддинг слева, и цепляете бекграунд

Высота блоков заданна жестко - вы уверенны что там текста всегда будет немного??? Это по поводу 4х блоков справа (об их поведении лучше уточнить у заказчика)

Побывав на таком сайте поисковый робот ненайдет ничего интересного...

Edited August 23, 2009 by mishka2

[mishka]

Забыл по поводу кода:

h1
{
	color:#300;
	font-size:10pt;
	font-family:"Times New Roman", Times, serif;
	font-style:normal;
	font-weight:normal;
	padding-left:15px;
	background-image:url(../images/button_h1.png);
	background-repeat:no-repeat;
}

так немного лучше:

h1
{
	color:#300;
	font:normal 10pt "Times New Roman", Times, serif;
	padding:0 0 0 15px;/*но это уже по усмотрению*/
	background:url(../images/button_h1.png) no-repeat;
}

Если вы только порезчик(верстальщик) то используйте такую шапку:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
</head>

никаких более метатегов без просьбы клиента... Потом программеры и сеошники сами поставят нужные им метатеги. Они сделают это правильно, а не бездумно "втулят"

центрирование - margin:0 auto; это вам уже говорили, и я тоже скажу , повторение - мать учения

Чтото в ие6 все посыпалось... и пнг почемуто неправильно отображаются (фильтров нет)

[lavr-ik]

Под древовидной структурой кода подразумевалась отбивка табами?

Ага.

Вы утверждаете что такой код несимантичен:

<h1>Headline1</h1>
<h2>Headline2</h2>

А семантично так вот: (именно так я вас понял по фразе "семантически неверно использовать h2 без вложения в h1")

<h1>Headline1</h1>
<h1><h2>Headline2</h2></h1>

Во-первых, "такой код не сЕмантичен", разумеется.

Во-вторых, прошу прощения с путаницей с использованием слова "вложенность", надо было взять его в кавычки. Разумеется, имеется в виду логическая вложенность, а не структурная, т.е.:

<h1>О нас</h1>

<h2>Наша миссия</h2>

<h2>Персонал</h2>

<h3>Низший персонал</h3>

<h3>Высший персонал</h3>

<h1>О вас</h1>

И неверно использование разных тэгов для заголовков с одинаковым логическим весом:

<h1>О нас</h1>

<h2>О вас</h2>

Равно как и использование заголовков второго уровня без "вложения" в заголовок первого.

<h2>О нас</h2>

Edited August 23, 2009 by lavr-ik

[mishka]

Вопрос ко всем, извините что не совсем в тему:

Фраза "<h2> вложен в <h1>" только у меня вызывает такую асоциацию:

<h1><h2>text</h2></h1>

?

потому что код

<h1>text</h1>
<h2>text</h2>

у меня асоцируется только с "<h2> после <h1>"

Edited August 23, 2009 by mishka2

[lavr-ik]

Во-вторых, прошу прощения с путаницей с использованием слова "вложенность", надо было взять его в кавычки. Разумеется, имеется в виду логическая вложенность, а не структурная, т.е.:

<h1>О нас</h1>

<h2>Наша миссия</h2>

<h2>Персонал</h2>

<h3>Низший персонал</h3>

<h3>Высший персонал</h3>

<h1>О вас</h1>

Перечитайте еще раз, пожалуйста.

Если никакого эффекта - поясню (чем меньше логический вес, тем больше приоритет):

<h1>О нас</h1> - логический вес 1

<h2>Наша миссия</h2> - логический вес 2, т.к. относится к тексту "О нас"

<h2>Персонал</h2> - логический вес 2, т.к. относится к тексту "О нас"

<h3>Низший персонал</h3> - логический вес 3, т.к. относится к тексту "Персонал"

<h3>Высший персонал</h3> - логический вес 3, т.к. относится к тексту "Персонал"

<h1>О вас</h1> - логический вес 1, т.к. является началом нового параграфа, главы и т.д.

Edited August 24, 2009 by lavr-ik