Оцените, пожалуйста, верстку новичка.

[codeliner]

Прошел практикум на htmlbook.ru. Теперь вот начинаю верстать веб-страницы для тренировки. Это первая.

 

Сам макет в png - http://codeliner.ucoz.com/blackbeard/BlackBeard.png

 

Готовая веб-страница - http://codeliner.ucoz.com/blackbeard/index.html

 

Прошу критики.

 

Сколько на ваш взгляд времени должна занимать верстка такой страницы (когда уже умеешь верстать)?

[alejandro13]

1. Я не пойму, а зачем у вас все блоки  имеют либо position:absolute, либо position:relative? Их никаким другим способом разместить нельзя?

2. А этот кусок кода - вообще жесть: http://prntscr.com/ainy4c

3. Слишком подробно расписан селектор - http://prntscr.com/aio11w, .top-menu a - достаточно, и половину свойств можно убрать, а font-family, font-size и line-height - записать одной сторчкой

[Int]

Подробно не разбирал.

Почему такой странный доктайп?
"font-family:times new roman;"  — название шрифта скорее всего в кавычки нужно взять. И помнить, что не во всех операционках этот шрифт есть, нужно вместе с ним или указать какой-нибудь serif/sans-serif или загрузить шрифт и объявить @font-face

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

Блоки 125x125 можно было и без флоатов сделать, но тут уж хозяин-барин.

Зачем блок .middle абсолютно спозиционирован, вообще не понятно. А если заголовок станет выше или ниже?
И лично я левый-правый блоки делал бы через флексы. Как минимум флоатами, но не абсолютами.

 

В 22.03.2016в23:57, alejandro13 сказал:

1. Я не пойму, а зачем у вас все блоки  имеют либо position:absolute, либо position:relative? Их никаким другим способом разместить нельзя?

2. А этот кусок кода - вообще жесть: http://prntscr.com/ainy4c

3. Слишком подробно расписан селектор - http://prntscr.com/aio11w, .top-menu a - достаточно, и половину свойств можно убрать, а font-family, font-size и line-height - записать одной сторчкой

2. Там лишний только display, float с relative вполне может быть, если у него внутри absolute

3. Он мог писать стили через какой-нибудь LESS, тот их сам так разворвачивает потом, и это, по большому счёту, не имеет значения.

[alejandro13]

7 часов назад, Int сказал:

Подробно не разбирал.

Почему такой странный доктайп?
"font-family:times new roman;"  — название шрифта скорее всего в кавычки нужно взять. И помнить, что не во всех операционках этот шрифт есть, нужно вместе с ним или указать какой-нибудь serif/sans-serif или загрузить шрифт и объявить @font-face

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

Блоки 125x125 можно было и без флоатов сделать, но тут уж хозяин-барин.

Зачем блок .middle абсолютно спозиционирован, вообще не понятно. А если заголовок станет выше или ниже?
И лично я левый-правый блоки делал бы через флексы. Как минимум флоатами, но не абсолютами.

 

2. Там лишний только display, float с relative вполне может быть, если у него внутри absolute

3. Он мог писать стили через какой-нибудь LESS, тот их сам так разворвачивает потом, и это, по большому счёту, не имеет значения.

Я понимаю, что там лишний только display, но зачем давать position:relative, если position:absolute у потомков нет?

[codeliner]

В 22.03.2016 в 00:57, alejandro13 сказал:

. Я не пойму, а зачем у вас все блоки  имеют либо position:absolute, либо position:relative? Их никаким другим способом разместить нельзя?

Просто не люблю position:static, даже если внутри нет absolutов. Вдруг они потом появятся? Поэтому мне проще назначить сразу relative, тем более что внутри такого блока потомки (если они не absolute) позиционируются точно так же, как и внутри static. Вообще, выступаю за то, чтобы position:relative было бы по умолчанию у любого блока.

 

В 22.03.2016 в 00:57, alejandro13 сказал:

А этот кусок кода - вообще жесть: http://prntscr.com/ainy4c

В принципе, display:block идет по умолчанию и его можно не указывать. Просто я все равно делаю это - в учебных целях. Чтобы в отношении каждого блока (или даже каждого строчного элемента) не забыть продумать, какой у него должен быть display  в данном случае, и почему. То же самое касается и других свойств, которые идут по умолчанию, но все равно указаны (например, width:auto и.т.д.) А насчет position уже выше отписался.

 

В 22.03.2016 в 00:57, alejandro13 сказал:

font-family, font-size и line-height

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

 

В целом - спасибо за ответ!

 

В 24.03.2016 в 14:13, Int сказал:

Почему такой странный доктайп?

Да это PSpad такой doctype вставляет автоматом, а менять было лень

В 24.03.2016 в 14:13, Int сказал:

Зачем блок .middle абсолютно спозиционирован, вообще не понятно. А если заголовок станет выше или ниже?

По-другому не получалось растянуть его на всю высоту страницы.

По поводу остального - не поспоришь! Спасибо за ответ!