vera17

ответила на почту)

Как Ваши успехи? В товарищах ещё есть потребность, могу предложить свою кандидатуру?

потому что ширина блока с жёлтой рамкой = ширина+маргин+паддинг+бордер, что выходит 534 px

Что бы блочный элемент выровнять по центру margin:0 auto; и прописать ему ширину.

Если добавить текст или какой либо контент, например в  <div class="container"> , то текст или контент будет вылазить за края абсолютно позиционированного фона,а верстка должна предполагать изменение контента.

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

И обратите внимание на логику своего кода, на чрезмерную вложенность ( для этого ознакомитесь с вёрсткой  более квалифицированных верстальщиков ).В навигации активная ссылка на тег  <a> вешается, а не где то сбоку и абсолютом, ссылки  должны ховериться, h1 в таком количестве  не используется.

Проверяйте свою вёрстку с помощью валидатора http://validator.w3.org/

Совмещайте практику с теорией и будет всё хорошо!Удачи!

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

Много вставляете картинками , то что можно сделать через код бэкграундом. 

Использование relative и absolute не по назначению плохая практика.

Я бы посоветовала верстать простые макеты с готовым кодом, а потом заглядывать в код, и запоминать, что как верстается http://web.archive.org/web/20120419005535/http://divhack.com/

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

http://jsfiddle.net/7hyLL/3/

В этой статье всё  детально рассматривают http://habrahabr.ru/post/189252/

http://jsfiddle.net/7hyLL/1/

У Вас ссылка не работает.

Как то так http://jsfiddle.net/vf94k/1/ , выше правильно говорят-фоновая картинка короткая

Я бы добавила  clearfix к блоку обёртке maincontent  http://jsfiddle.net/euv56/1/ 

О clearfix   http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html

можно с помощью псевдоклассов, если есть логическое чередование http://htmlbook.ru/css/nth-child или http://htmlbook.ru/css/nth-of-type

“Красота- спасёт мир! 

Ф. Достоевский”

Мож не в тему, но цитату нужно брать в кавычки, без автора

Например:

«Для истинного художника — где жизнь, там и поэзия» , — указывает великий русский критик. 

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

Видоизменила вёрстку, теперь есть проблема с ховером для блока товара.

Вставлю свои пять копеек, тоже учусь.

Цитату зря в h1, h1 обычно заголовок сайта. Можно было ей ширину прописать, тогда все перенеслось как надо, а для переносов <br> используют.

Бэкграунд вставляется тоненькой полосочкой в 1px и репитится по х, или же повторяющимся квадратом по х и у, в зависимости от фона. Градиенты можно делать кодом.

В mainContent надо было делать две колонки: левую и правую, тогда не было бы таких больших паддингов, у правой колонки полосочку потеряли.

Для текста с картинкой и текста с кнопкой нужно общую обёртку, они же взаимосвязаны.

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

 

.product-wrapper {

     border: 1px dotted #fff;

     margin:0 0 10px 0;

     padding: 10px;

    display: inline-block;   

}

 

А если так попробовать? вам это нужно?

 

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

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

Переделываю список товаров. Выравняла изображение и название товара поверху, а цену и кнопку купить понизу, как тут http://chikuyonok.ru/2011/04/inline-vertical-align/

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

Ссылка http://jsfiddle.net/vera17/kk459/1/

Вот по этой ссылке http://web.archive.org/web/20120419005535/http://divhack.com/  есть 9 макетов по нарастающей сложности, с примерами вёрстки ( но лучше подсматривать в пример только в крайнем случае, а то обучение затянется).

Удачи в начинаниях!

Спасибо, за замечание    . Я с JavaScript, честно говоря на Вы.

Если речь идёт об этом куске 

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

то видимо я просто его не удалила, так как Modernizr у меня не подключён

Здравствуйте, форумчане. Нахожусь в процессе обучения, хочется свежего взгляда со стороны.

Прошу покритиковать мою вёрстку, указать на ошибки.

Хотелось так же узнать, что делать со шрифтом, например Century Gothic, который при кегле до 22px отображается "ёлочкой" http://pokazal.ru/2013_09_b/3868b5b89ace106d57a184f79c9339fd.png

Ссылка на работу  тут

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

Изменила вёрстку тыц

Может кто-нибудь знает как сделать ховер для блока с товаром?

Я бы посоветовала тебе сразу учиться писать class вместо id http://frontender.info/when-using-ids-can-be-a-pain-in-the-class/

Так же не стоит прописывать высоту у элементов, при добавлении контента вёрстка ломается.

Отличная статья о float http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/

Хотелось бы посоветовать почитать книгу Седерхольма CSS ручной работы, в интернете можно спокойно скачать, там описывается приём cleafix, то есть очищение потока после применения плавающего элемента, а так же много других полезных вещей.

Для простенького каркаса сверстано вполне хорошо  .

Переводы полезных забугорных статей о вёрстке и не только.

http://frontender.info/