Критикуйте и ругайте

[binomer]

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

 

Вот ссылка на работу, вот на jpg c макета

 

А вот исходный код (НЕминифицированный): HTML, CSS

 

Что было сделано плохо:

 

1. Не разобрался с фоновыми изображениями, конкретно в этом макете. К скругленным внутрь углам, еще добавляется тень, поэтому с помощью радиальных градиентов сделать не смог.. Потом попытался поделить фон контента порезать на три части и среднюю повторять по вертикали, но тоже как-то не удалось. Отсюда получился жестко фиксированная высота контента, что очень плохо

 

2. Не разобрался пока с jQuery, JS и каруселями. Начал было делать по чужому образцу, но понял, что далеко так не уеду, надо брать в руки книгу и изучать с самого начала.

 

3. Заголовки картинками. Шрифт в макете оказался платным или то, что находил в интернете под этим названием, - оказывалось совсем другим. Поэтому заголовки оказались картинками.

 

Что было сделано хорошо:

 

1. Хорошо пощупал в процессе градиенты и тени.

 

2. Забацал свой первый в жизни спрайт

 

3. HTML, CSS проверены валидатором - без ошибок

 

4. Изображения и файлы минифицированы

 

Кажется, что плохого больше, чем хорошего.

 

Вот по тому, что я сделал плохо, я бы точно хотел услышать ваши советы

Edited March 15, 2014 by binomer

[Bassline]

А если понадобится добавить пару строчек текста или вообще картинку, что произойдет? И так каждый раз будешь переделывать фоновое изображение bg_content.png?

[binomer]

А если понадобится добавить пару строчек текста или вообще картинку, что произойдет? И так каждый раз будешь переделывать фоновое изображение bg_content.png?

Меня тот же вопрос интересует. Как грамотные люди делают-то?

[Bassline]

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

Edited March 15, 2014 by Bassline

[binomer]

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

    background-image:        url(../img/bg_top_content.png),        url(../img/bg_medium_content.png),        url(../img/bg_bottom_content.png);    background-repeat: no-repeat, repeat-y, no-repeat;    background-position: 50% 0, 50% 10%, 50% 100%;

Такой способ ожидаемо не взлетел. repeat работает, а position - нет. Я же говорю, пытался сделать именно так. Хоть в процентах, хоть в пикселях.

 

В принципе, в процентах по вертикали вообще неправильно писать, я же не знаю, сколько это будет занимать при разном количестве контента

Edited March 15, 2014 by binomer

[Bassline]

Я совсем не это имел ввиду.

 

Самый простой и грубый вариант:

<div class="main">	<div class="top"></div>	<div class="center">Контент</div>	<div class="bottom"></div></div>

На .top вешаете верхнюю часть фона, на .center среднюю полоску и здесь же будет контент, на .bottom нижнюю часть фона.

Edited March 15, 2014 by Bassline

[binomer]

А еще варианты не подскажете?

[vera17]

Css не модифицированный не открывается. 

Клеарфикс с пустым дивом не используют.

Уголки вогнутые можно повесить по старинке картинками http://www.yanajy.com/sdelay-sam/borders-and-corners-using-html-and-css.html

А макет конечно витиеватый 

[binomer]

Css не модифицированный не открывается. 

Клеарфикс с пустым дивом не используют.

Уголки вогнутые можно повесить по старинке картинками http://www.yanajy.com/sdelay-sam/borders-and-corners-using-html-and-css.html

 

Спасибо, теперь открывается.

 

То есть класс clearfix надо добавлять к предыдущему блоку, для которого он должен работать. Спасибо.

 

И за уголки спасибо. Думал об этом. Но хотелось как-то сделать посовременнее, а в итоге не вышло.

[binomer]

Спасибо всем за советы.

 

Исправлено:

 

1. Фоновое изображение поделено на части, избавлено от фиксированной высоты

2. Клеарфикс теперь, как и положено, применяется для родителя блока с float