критикуйте верстку

[Ghost86421]

Добрый день, хочу вам показать свою работу, критикуйте ведь ваше мнение мне важно.

http://mihayliack98.url.ph/

Edited January 13, 2014 by Ghost86421

[scion]

Значит так, лично заметки от меня ( эксперты, если где не прав поправят меня)

1) Зачем для логотипа дополнительный div? Разве нельзя обойтись просто тегом h1?

2) Название классов red, small - что за названия? разве что у вас там будет куча красных надписей на разных элементах и вы всю "красноту" вынесете в отдельных класс, и то как по мне, затея сомнительна. Вдруг захочется поменять цвет или размер то придется менять и название класса? обдуманней выбирайте название классов и id

3) Зачем опять дополнительный div к списку ссылок на соц. сети? используйте просто список с определенным классом или айди. Тоже самое и с поиском, можно просто было оставить form

4) Что за дополнительные теги <i> в списке соц. сетей? Может лучше использовать ссылки с фоном, сделать спрайт из 8 иконок - 4 дефолтных  + 4 активных. А еще лучше написать при этом название ссылок и спрятать текст за их границы.

5) Пустые div для отчистки плавающих элементов - есть другие более аккуратные приемы для этого, просто поищите поэтому поводу инфу в нете.

 

6) Почему в под-главной навигации последняя ячейка выпала вниз и смотриться ужасно, так нужно?

Дальше просто не стал разбираться, думаю ошибок полно. Читайте хорошие книжки и больше практикуйтесь и все получится!

Удачи!

Edited January 13, 2014 by scion

[Ghost86421]

Значит так, лично заметки от меня ( эксперты, если где не прав поправят меня)

1) Зачем для логотипа дополнительный div? Разве нельзя обойтись просто тегом h1?

2) Название классов red, small - что за названия? разве что у вас там будет куча красных надписей на разных элементах и вы всю "красноту" вынесете в отдельных класс, и то как по мне, затея сомнительна. Вдруг захочется поменять цвет или размер то придется менять и название класса? обдуманней выбирайте название классов и id

3) Зачем опять дополнительный div к списку ссылок на соц. сети? используйте просто список с определенным классом или айди. Тоже самое и с поиском, можно просто было оставить form

4) Что за дополнительные теги <i> в списке соц. сетей? Может лучше использовать ссылки с фоном, сделать спрайт из 8 иконок - 4 дефолтных  + 4 активных. А еще лучше написать при этом название ссылок и спрятать текст за их границы.

5) Пустые div для отчистки плавающих элементов - есть другие более аккуратные приемы для этого, просто поищите поэтому поводу инфу в нете.

 

6) Почему в под-главной навигации последняя ячейка выпала вниз и смотриться ужасно, так нужно?

Дальше просто не стал разбираться, думаю ошибок полно. Читайте хорошие книжки и больше практикуйтесь и все получится!

Удачи!

 

  Дополнен тег <i> для генерирующего содержимого, эти иконки заданные специальным шрифтом "Font Awesome", их лучше использовать, так как при масштабирование качество не ухудшается. Поэтому используется <i>, как:

i: before {

content: \f024;    «\f024» - (код иконки)

}

Это правило вставки таких иконок.

Спрайты затрачивают больше  времени и они менее гибкие.

 

С обертыванием списков в div соглашаюсь, Но после того как сделал эту страницу, то понял, что так делать не надо.

 

Просмотрите в макет, я использовал пустой div, только для очистки потока в шапке, между верхом и нижним меню

А так я везде использовал псевдоэлемент «:after»

 

Почему ячейка выпадает, я сам понять не могу

Спасибо за ответ!

[ryter]

насчет иконочных шрифтов я бы поспорил. Везде тыкать тег <i> тоже не дело. Спрайты весьма гибкие если вы их правильно используете. На крайний случай для экранов высокого разрешения можно юзать x2 спрайт. Грузить весь шрифт Font Awesome из за нескольких иконок тоже не совсем хорошо. И больно плохо выглядят иконочные шрифты под Win в хроме, но вроде как в новой версии хрома все таки впилили сглаживание шрифтов.  

[Ghost86421]

насчет иконочных шрифтов я бы поспорил. Везде тыкать тег <i> тоже не дело. Спрайты весьма гибкие если вы их правильно используете. На крайний случай для экранов высокого разрешения можно юзать x2 спрайт. Грузить весь шрифт Font Awesome из за нескольких иконок тоже не совсем хорошо. И больно плохо выглядят иконочные шрифты под Win в хроме, но вроде как в новой версии хрома все таки впилили сглаживание шрифтов.  

               

             И чем спрайты более гибкие?

[advokatua]

 

.video-block li a span {

    padding-top:7px;

    display:block;

}

 

.leftContent_block .sections h2 a {

    display: inline-block;

    position: absolute;

    right:0;

    bottom:0;

    color:#fff;

    text-decoration: none;

    text-transform: uppercase;

    font:bold 10px Arial, sans-serif;

    padding:5px 8px 5px 12px;

    background-color:#cf0000;

}

.rightSidebar_block .popular_comment h2 a.more_title {....rightSidebar_block .popular_comment h2 a.more_title:hover {....rightSidebar_block .popular_comment ul li p a{  // 6-уровневый каскад, omg 0_o

+ В ие9 кака с меню. 

+ непонятная работа с флоатом. Узреть можно на примере соц. иконок

 

Со всем выше и учетом, что автор считерил (не выложил картинку макета) - "садись, два, дневник на стол." ) 

Это если ты хотел критики. Если же нет, то вполне хорошо, особенно если забить на нагромождения каскадов и то что мы не видели макета. )

 

5) Пустые div для отчистки плавающих элементов - есть другие более аккуратные приемы для этого, просто поищите поэтому поводу инфу в нете.

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

Edited January 14, 2014 by advokatua

[Ghost86421]

.video-block li a span {     padding-top:7px;     display:block; }

.leftContent_block .sections h2 a {     display: inline-block;     position: absolute;     right:0;     bottom:0;     color:#fff;     text-decoration: none;     text-transform: uppercase;     font:bold 10px Arial, sans-serif;     padding:5px 8px 5px 12px;     background-color:#cf0000; }

 

А что там не так?

 

 

+ непонятная работа с флоатом. Узреть можно на примере соц. иконок

 

 

Вот это тоже не понял, напишите подробнее пожалуйста

 

Спасибо за ответ!

[advokatua]

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

 

1) Зачем строке ставить спан и затем блочить ее, когда можно поставить параграф и не писать лишнее правило "display:block;" ?

2) Абсолют почти всегда перекрывает все остальные виды позиционирования. В твоем случае правило  display: inline-block; ничего не делает. 

 

3) лишняя обертка дивом у .social (как и с лого), которая флоатится вправо. Затем каждый элемент li флоатится влево, когда проще это сделать через инлайн-блок. Причем после первого флоата поток остался не очищенным, из-за чего у UL нулевая высота. В добавок в ".social li a" запилен display:block, который там вообще ничего не делает. Также в Хроме, вместо 4 соц. иконок, видно только 2 (по крайней мере у меня), а в ФФ все ок.

 

Речь идет про этот кусок:

<div class="social">                <ul>                	<li><a href="#" class="twitter"><i></i></a></li>                	<li><a href="#" class="facebook"><i></i></a></li>                	<li><a href="#" class="linkedin"><i></i></a></li>                	<li><a href="#" class="google"><i></i></a></li>                </ul>            </div>

Edited January 14, 2014 by advokatua

[cris7iano]

Значит так, лично заметки от меня ( эксперты, если где не прав поправят меня)

1) Зачем для логотипа дополнительный div? Разве нельзя обойтись просто тегом h1?

Удачи

А Зачем логотипу h1?  а так как логотип скорее всего будет повторяться по всему сайту, то и заголовок будет одинаков везде это не правильно! и после того как этот сайт натянут на cms, то когда юзер будет кликать на новость, его будет беребрасывать на страницу одного поста, где h1 будет как раз заголовок новости, причем тут логотип??

Лучше обернуть для более конструированного html

<div class="logo"><img src="......"</div>

Edited January 15, 2014 by cris7iano

[klierik]

Типичные ошибки. Детальнее по ссылке в подписи...