Проблема верстки

[CroaToa]

Верстаю вот это - http://www.testx.bl.ee/

 

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

 

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

 

Мне кажется слишком много css кода у меня, с виду страница не сложная, простая, а кода дофига выходит..

[Yazon_Nile]

  On 5/15/2014 at 3:44 PM, CroaToa said:

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

а никак. скриптом.

[cyklop77]

а почему иконки в блоке "выбор рессор по марке" дёргаются при наведении?

[CroaToa]

  On 5/15/2014 at 4:12 PM, Yazon_Nile said:

а никак. скриптом.

Поделитесь пожалуйста, я в них 0 пока что

  On 5/15/2014 at 4:21 PM, cyklop77 said:

а почему иконки в блоке "выбор рессор по марке" дёргаются при наведении?

 

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

[cyklop77]

это кривость рук дизайнера) но люлей за такое получает обычно верстальщик)

 

upd:

ууууууу...............

/*=============    MARKS==============*/.bmw {background: url(../images/bmw.png) no-repeat;}.bmw:hover {background: url(../images/bmw-hover.png) no-repeat;}.mitsu {background: url(../images/mitsub.png) no-repeat;}.mitsu:hover {background: url(../images/mitsu-hover.png) no-repeat;}.ww {background: url(../images/ww.png) no-repeat;}.ww:hover {background: url(../images/ww-hover.png) no-repeat;}.peugeot {background: url(../images/pegout.png) no-repeat;}.peugeot:hover {background: url(../images/pegout-hover.png) no-repeat;}.mers {background: url(../images/mercedes.png) no-repeat;}.mers:hover {background: url(../images/mercedes-hover.png) no-repeat;}.nissan {background: url(../images/nissan.png) no-repeat;}.nissan:hover {background: url(../images/nissan-hover.png) no-repeat;}.reno {background: url(../images/reno.png) no-repeat;}.reno:hover {background: url(../images/reno-hover.png) no-repeat;}.kia {background: url(../images/kia.png) no-repeat;}.kia:hover {background: url(../images/kia-hover.png) no-repeat;}.skoda {background: url(../images/skoda.png) no-repeat;}.skoda:hover {background: url(../images/skoda-hover.png) no-repeat;}.toyota {background: url(../images/toyota.png) no-repeat;}.toyota:hover {background: url(../images/toyota-hover.png) no-repeat;}.opel {background: url(../images/opel.png) no-repeat;}.opel:hover {background: url(../images/opel-hover.png) no-repeat;}.chevy {background: url(../images/chevy.png) no-repeat;}.chevy:hover {background: url(../images/chevy-hover.png) no-repeat;}

вот это совсем ужасненько. как минимум спрайтами надо было... ну или на одну большую картинку накладывать маленькие при наведении. очень рекомендую хотя бы основы jquery изучить, поможет во многих случаях(к тому же не сложно)

 

 

 

и это... есть уж html5 используешь, то заморачиваться с заголовками типа h6 особого смысла нет. просто выделяешь блок articlе или section и прописываешь тег заголовка с любым номером, парсер сам построит иерархию. таким образом при внесении изменений в шаблон не нужно следить за изменением порядка заголовков

 

и ещё я не понял зачем тег label использовать не в форме?

<label for="catalog-hidden"></label>

у тебя на нём стрелочка висит О_о

ты, надеюсь, не выводишь любой текст в стилизованном теге textarea?.. а то, помню, были тут и такие верстальщики

 

далее. при наведении на стрелочку около ссылки "скачать прайс" она тоже дёргается. тут уже на дизайнера не свалишь

 

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

Edited May 15, 2014 by cyklop77

[CroaToa]

  On 5/15/2014 at 5:43 PM, cyklop77 said:

вот это совсем ужасненько. как минимум спрайтами надо было... ну или на одну большую картинку накладывать маленькие при наведении. очень рекомендую хотя бы основы jquery изучить, поможет во многих случаях(к тому же не сложно)

Ну дык я написал, что работа не закончена и спрайты обязательно будут))

 

  On 5/15/2014 at 5:43 PM, cyklop77 said:

и это... есть уж html5 используешь, то заморачиваться с заголовками типа h6 особого смысла нет. просто выделяешь блок articlе или section и прописываешь тег заголовка с любым номером, парсер сам построит иерархию. таким образом при внесении изменений в шаблон не нужно следить за изменением порядка заголовков

 Вот спасибо, не знал.

 

  On 5/15/2014 at 5:43 PM, cyklop77 said:

у тебя на нём стрелочка висит О_о

Ну так это единственное решение которое мне пришло в голову, по пвооду спрятать блок по клику)))

  On 5/15/2014 at 5:43 PM, cyklop77 said:

далее. при наведении на стрелочку около ссылки "скачать прайс" она тоже дёргается. тут уже на дизайнера не свалишь

 Как раз таки свалю, размеры отличаются тоже )))

 

  On 5/15/2014 at 5:43 PM, cyklop77 said:

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

 Только что проверил, отступов нет..

 

Спасибо большое за критику. 

[SelenIT]

  On 5/15/2014 at 5:43 PM, cyklop77 said:

заморачиваться с заголовками типа h6 особого смысла нет. просто выделяешь блок articlе или section и прописываешь тег заголовка с любым номером, парсер сам построит иерархию

 

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

[xzarxzes]

  On 5/15/2014 at 7:02 PM, SelenIT said:

 

  On 5/15/2014 at 5:43 PM, cyklop77 said:

заморачиваться с заголовками типа h6 особого смысла нет. просто выделяешь блок articlе или section и прописываешь тег заголовка с любым номером, парсер сам построит иерархию

 

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

 

Еще заголовки неудобно стилизовать. Если я правильно понял, то эта идея с заголовками введена для удобства "синдикации", так что может быть стоит придерживаться старой иерархии заголовков, а если контент в section или article предназначен для того чтобы размещать его на других сайтах то для этих целей лучше подойдет новая иерархия(section > h1), а то в противном случае получится что в section скажем заголовок h5 и это будет не вписываться в иерархию заголовков на сайте на котором будет размещаться этот sction, хотя с другой стороны вроде как section создает особый контекст и этот h5 будет иметь смысл только внутри этого sction. Или только article служит для "синдикации" ?

Edited May 15, 2014 by xzarxzes

[SelenIT]

Стилизация заголовков с учетом вложенности — да, отдельная тема. По умолчанию в Фоксе и вебкито-блинковом семействе реализована только для H1, через :-*-any (экспериментальный вариант старого черновика селектора :matches).

 

Вообще чехарда с заголовками, насколько я владею вопросом, такая. По умолчанию, без эл-тов section/article/aside/nav, каждый заголовок создает неявную секцию: если он того же или более высокого ранга, чем предыдущий — неявно закрывая предыдующую, если более низкого — в качестве подсекции в предыдущей. При наличии новых элементов это правило продолжает работать (т.е. section с двумя заголовками — логически две секции, а не одна), но ранг заголовков определяется вложенностью этих элементов. Таким образом, в теории, при аккуратной иерархии новых элементов и соблюдении правила «одна явная секция — один заголовок», о рангах заголовков можно не беспокоиться — всю иерархию заголовков выстроит вложенность (даже если у внешней секции поставить H5, а у вложенной H1). Но, увы, только в теории. На практике пока советуют соблюдать иерархию рангов, а также избегать секций без заголовка и мешанины явных секций с неявными.

 

Для синдикации только article.

[xzarxzes]

  On 5/15/2014 at 10:00 PM, SelenIT said:

Стилизация заголовков с учетом вложенности — да, отдельная тема. По умолчанию в Фоксе и вебкито-блинковом семействе реализована только для H1, через :-*-any (экспериментальный вариант старого черновика селектора :matches).

 

Вообще чехарда с заголовками, насколько я владею вопросом, такая. По умолчанию, без эл-тов section/article/aside/nav, каждый заголовок создает неявную секцию: если он того же или более высокого ранга, чем предыдущий — неявно закрывая предыдующую, если более низкого — в качестве подсекции в предыдущей. При наличии новых элементов это правило продолжает работать (т.е. section с двумя заголовками — логически две секции, а не одна), но ранг заголовков определяется вложенностью этих элементов. Таким образом, в теории, при аккуратной иерархии новых элементов и соблюдении правила «одна явная секция — один заголовок», о рангах заголовков можно не беспокоиться — всю иерархию заголовков выстроит вложенность (даже если у внешней секции поставить H5, а у вложенной H1). Но, увы, только в теории. На практике пока советуют соблюдать иерархию рангов, а также избегать секций без заголовка и мешанины явных секций с неявными.

 

Для синдикации только article.

Еще интересно что <blockquote>, <details>, <fieldset>, <figure>, <td> считаются sectioning root и имеют вроде как свой внутренний outline и заголовки в них не отображаются в outline документа, и если сверстать что нибудь таблицей то заголовков не будет видно, если посмотреть в outliner'e, что лишний раз говорит о несемантичности табличной верстки.  

Edited May 16, 2014 by xzarxzes