Вёрстка

[MaferoK]

Привет всем

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

Ссылка

Прошу оценить вёрстку в "целом" , указать на недочеты вёрстки ( возможно грубое нарушение какое то или есть моменты которые на ваш взгляд можно сделать лучше ...)

вобщем жду обьективной критики.

Вёрстка вполне валидна , кроссбраузерна ( кроме ie 6-7 версии , под них не верстал) и так же нет возможности проверить вёрстку под остальные операционные системы , кроме windows 7.

Спасибо за уделенное время.

Edited August 25, 2011 by MaferoK

[yacor]

Вроде неплохо. Хорошо, если была бы ссылка на сам макет.

По-моему, большинство картинок должны быть ссылками.

Я бы поменял onclick блоке поиска на onfocus

[MaferoK]

Я бы поменял onclick блоке поиска на onfocus

хорошо , поменяю )

то я просто только начал изучать js и так пытаюсь уже его в вёрстке по мере возможности немного использовать =)

[Nekromancer]

.menublock {
    height: 70px;
    margin: 0 auto;
    width: 1020px;
}

Вот здесь вот такая ширина совсем не к месту. При разрешении 1024 скрол появляется горизонтальный, не приятно.

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

UA: "Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0"

[MaferoK]

.menublock {
    height: 70px;
    margin: 0 auto;
    width: 1020px;
}

Вот здесь вот такая ширина совсем не к месту. При разрешении 1024 скрол появляется горизонтальный, не приятно.

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

UA: "Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0"

спасибо , исправил

[cyklop77]

тэг <h1> должен быть только один, у вас же много

[MaferoK]

тэг <h1> должен быть только один, у вас же много

странно =\ 1й раз слышу , думал заголовков несколько может быть на сайте

[cyklop77]

тэг <h1> должен быть только один, у вас же много

странно =\ 1й раз слышу , думал заголовков несколько может быть на сайте

может. но заголовок первого уровня только один

[nightgremlin]

Помойму в html5 может быть хоть сколько <h1>, на счет остальных версий читал что должен быть один заголовок (у вас как раз этот случай).

Начиная с

<div class="newsblock1">
                <h1>An Example Of a Post Goes Here.</h1><br />
                Posted in:<span> Category One, Category Two</span> Date: <span> 08 April 2010 </span><br />

                <img class="mainimg" src="images/newsimg1.jpg" alt="" />
                <div class="newstext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf<br /> 
                sed dos eiusmod tempor incididunt ut labore et dolorea ab<br />
                magna aliqua. Utlo enim ad minim veniam, quis nostrudaw<br />
                exercitation ullamco laboris nisi ut aliquip ex ea commodo!</div>
                Author: <span> Mahmoud Khaled</span><br />

                Reaction: <span>10comments,5 Pingback</span>
                <a href="#"><img class="readmore" src="images/readmorebut.jpg" alt="" /></a>
                </div>

поставьте в <h2>

или сделайте в html5:

<article>
              <hgroup>
                <h1>An Example Of a Post Goes Here.</h1><br />
                Posted in:<span> Category One, Category Two</span> Date: <span> 08 April 2010 </span><br />
   </hgroup>
                <img class="mainimg" src="images/newsimg1.jpg" alt="" />
                <div class="newstext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf<br /> 
                sed dos eiusmod tempor incididunt ut labore et dolorea ab<br />
                magna aliqua. Utlo enim ad minim veniam, quis nostrudaw<br />
                exercitation ullamco laboris nisi ut aliquip ex ea commodo!</div>
                Author: <span> Mahmoud Khaled</span><br />

                Reaction: <span>10comments,5 Pingback</span>
                <a href="#"><img class="readmore" src="images/readmorebut.jpg" alt="" /></a>
                </article>

Может я ошибаюсь

Edited August 25, 2011 by nightgremlin

[Gaspode]

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

[nightgremlin]

Как раз в html5 такая семантика оправдывается.

[troll]

1. Я думаю, изображения следовало бы оформить средствами CSS. В вашей верстке получается, если понадобится вставить новую картинку, придется руками дорисовывать к ней поля и рамку.
   
2. Надписи сплошными заглавными буквами я бы тоже через CSS сделал (через text-transform, как вариант) там, где это возможно.
   
3. Форма поиска не работает.
   

Edited August 25, 2011 by troll

[MaferoK]

На счет некоторых картинок - ссылок (типо rss и tweeter птички ), что бы их через ксс сделать

это ж предется див ( с бэкграундом картинкой ) оборачивать в <a href=""></a>

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

так что вывожу картинки черех хтмл , а какой есть ещё способ ?

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

Edited August 25, 2011 by MaferoK

[Nekromancer]

display:block; ссылке и заданный размер плюс конечно фон картинки этой ссылке.

[troll]

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

Смысл в разделении содержания и оформления. Когда надписи можно пересчитать по пальцам, то, возможно, вписать их в нужном регистре в документ на самом деле будет проще, но как быть, если вдруг понадобится оставить заглавной только первую букву? А если таких надписей несколько сотен? А если они хранятся в БД?

[MaferoK]

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

Смысл в разделении содержания и оформления. Когда надписи можно пересчитать по пальцам, то, возможно, вписать их в нужном регистре в документ на самом деле будет проще, но как быть, если вдруг понадобится оставить заглавной только первую букву? А если таких надписей несколько сотен? А если они хранятся в БД?

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

display:block; ссылке и заданный размер плюс конечно фон картинки этой ссылке.

спасибо ещё раз , учту =)

[troll]

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