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

[alexforce2]

Всем привет, после изучения хтмл и цсс, сверстал первую страницу, правда из старого макета. Прошу оценить вёрстку по ссылке http://alexforce2.6te.net/.

Заранее спасибо.

[wildhind]

как там у правоверных…

Нет тэга кроме <div>!

а дальше?

а зачем столько id? И почему ссылки не реагируют на наведение?

Представим себя на месте контент-менеджера, которому потом с этим сайтом работать.

Нужно разместить информацию о тарифе, но в ней на две строчки больше текста, чем предусмотрел верстальщик.

Что ж делать-то? Всё пропадает!

Но до этого ещё дожить надо.

Сначала эту вёрстку дают программисту с крепкими нервами, чтобы он интегрировал её с CMS.

Особо отмечу: программист должен быть действительно с крепкими нервами, способный философски отнестись к разнесённым в разные части кода частям контента одной смысловой группы и к вывернутому наизнанку порядку следования элементов.

[Nanto]

Как открыл - у меня первое ощущение, что это одна большая картинка, на которую спозиционировали прозрачные блочные ссылки... А что? Как вариант!

[wildhind]

а у меня первое ощущение было: «здравствуй, детство!» Эдакая ностальгия по 2000 году

[Searcher]

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

[cyklop77]

валидатор говорит о нескольких незакрытых тегах

для первой вёрстки нормально по моему

Edited March 15, 2012 by cyklop77

[alexandr_v-vich]

<div class="vline-1"></div>

Зачем это? Ставьте бордер пунктирный и можно дальше у менюшек класс убрать

[alexforce2]

wildhind, большое спасибо за замечания, как я понял - мне надо работать над систематизацией цсс кода; поменьше использовать айди, а применять классы; вместо множества дивов применять строчные элементы, заданные как строчно-блочные.

Вот только не понял, что вы имели в ввиду - ссылки не реагируют на наведение, курсор же изменяется на поинтер?

И еще, если не затруднит, подскажите как реализовать блок с тарифами так, чтобы при разном кол-ве контента все три блока были равны по высоте, есть ли ещё какое-нибудь решение кроме таблиц?

[alexandr_v-vich]

alexforce2, Не к вопросам, но так, к теме

Из этого http://jsfiddle.net/tgMkm/1/

можно так http://jsfiddle.net/tgMkm/31/

как минимум и css вам говорили уже

Это наверное про это будет

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

И еще, если не затруднит, подскажите как реализовать блок с тарифами так, чтобы при разном кол-ве контента все три блока были равны по высоте, есть ли ещё какое-нибудь решение кроме таблиц?

Три блока в див и у него height: auto;

У блоков height: 100%;

С width`ом работает, тут может и нет, но попробуйте.

Edited March 16, 2012 by alexandr_v-vich

[alexforce2]

alexandr_v-vich за меню спасибо, чёт я сам не догадался

Чтобы работала высота в процентах - надо задать всем родителям высоту в процентах либо фиксированную высоту, правильно?

[wildhind]

wildhind, большое спасибо за замечания, как я понял - мне надо работать над систематизацией цсс кода; поменьше использовать айди, а применять классы;

Над систематизацией — да. Но не только css, а и html. Притом html даже в первую очередь, он гораздо более серьёзно страдает.

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

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

http://htmlbook.ru/html — оцените богатство языка html.

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

Через год попробуйте понять, что имелось в виду под конструкцией вида

<div><div></div><div><div></div></div><div><div><div><div><div></div></div></div></div></div></div></div>

Вот только не понял, что вы имели в ввиду - ссылки не реагируют на наведение, курсор же изменяется на поинтер?

Работаете над ошибками — хорошо.

Отвечаете в лучших традициях служб техподдержки — почему бы это?

И еще, если не затруднит, подскажите как реализовать блок с тарифами так, чтобы при разном кол-ве контента все три блока были равны по высоте, есть ли ещё какое-нибудь решение кроме таблиц?

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

Когда почувствуете себя настолько уверенно, чтобы не бояться таблиц на основании того, что «пацаны с htmlbook'а не поймут», применяйте таблицы там, где они уместны и целесообразны. Если всё же какой-нибудь злой паразит внутри будет твердить «таблицы — зло!», добавьте к таблице атрибут role="presentation" для успокоения совести

[alexforce2]

попробуйте понять, что имелось в виду под конструкцией вида

<div><div></div><div><div></div></div><div><div><div><div><div></div></div></div></div></div></div></div>

Конструкция похожа на вложенные списки, но в приведённом вами коде либо лишний закрывающий тэг </div>, либо пропущен открывающий тэг <div>.

[wildhind]

попробуйте понять, что имелось в виду под конструкцией вида

<div><div></div><div><div></div></div><div><div><div><div><div></div></div></div></div></div></div></div>

Конструкция похожа на вложенные списки, но в приведённом вами коде либо лишний закрывающий тэг </div>, либо пропущен открывающий тэг <div>.

Срочно брть мозги в руки!

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

Списки, в том числе вложенные — это тэги ul, ol, dl.

[Nanto]

попробуйте понять, что имелось в виду под конструкцией вида

<div><div></div><div><div></div></div><div><div><div><div><div></div></div></div></div></div></div></div>

Конструкция похожа на вложенные списки, но в приведённом вами коде либо лишний закрывающий тэг </div>, либо пропущен открывающий тэг <div>.

Срочно брть мозги в руки!

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

Списки, в том числе вложенные — это тэги ul, ol, dl.

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