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

[axigreat]

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

Вот ОНО

Задание намбер ту с divhack

Условия:

• Верстаем под браузеры: Firefox любой версии и Internet Explorer 8.
  

• Текст главного меню должен быть сделан картинками-ссылками.
  

• В главном меню, при наведении на пункт – цвет текста перекрашивается в более тёмный – пример – пункт webhosting. Перекрашиваются все, кроме первого выделенного пункта “Home”.
  Ноутбук с картинками по бокам должен быть вставлен одной картинкой.
  

• В контенте заголовки: WebDesign and WebCoding, Testimonials, Networks, Online support и в содержимое футра должно быть сделано отдельными картинками.
  

Прошу обратить внимание на работу с фоновыми изображениями, в частности меню и центральный блок с градиентом. Последний кстати в ie7 кривит, поянсите с чем связано или другой вариант реализации.

Edited February 24, 2012 by axigreat

[Yazon_Nile]

Понеслась)))

Ну, во-первых, должен быть самый главный оборачивающий див. Боди не для этих целей.

2 Тег <hr> некроссбраузерный. Такие вещи лучше делать бордерами.

3 Див лого - пуст. Текст, который заменяется картинкой должен быть прописан, как ты сделал в заголовах.

4 Обертка для ссылок в навигации сделана неправильно. Сначала ссылка, потом спан.

5 Большую центральную картинку лучше имагой сделать, а не бг

6 В блокквоте должная быть q

7 спан с классом аутор - тег cite

8 В списке сошиалс можно обойтись без классов - просто имаги вставлять.

9 футер - см п3

Что за куча скриптов непонятных?)

Это без особой вчитки - основные ошибки. Не будет их - можно двигаться дальше. Искать какие-то более тонкие вещи. Пока так.

ЗЫ. Код невалиден!

[ablay2009]

Доктайп HTML 5 указали только из-за того, что он короче? Все сделано простыми дивами, когда есть столько красивых тегов (header, section, aside, footer, nav, articls и т.д.).

Скрипт баннера внизу страницы? Зачем, а главное где он?

Картинка в центре весит 342 килобайта, можно было сделать фон и сохранить в jpg. Размер картинки в jpg составляет всего 142 килобайта.

Yazon_Nile, никто не запрещает использовать body в качестве контейнера, а на html5boilerplate.com советуют:

- Вы можете использовать body, как обертку вместо div#container.

[axigreat]

здорово, спасибо!!! скоро поправлю, а скрипты - это бонус от бесплатного хостинга, закинул, даже не посмотрел. перенесу.

ablay2009, с красивыми тегами просто ещё мало знаком, буду навёрстывать упущенное! а доктайп действительно указал по этой причине, с него начал переход на HTML 5

Edited February 24, 2012 by axigreat

[Yazon_Nile]

Yazon_Nile, никто не запрещает использовать body в качестве контейнера, а на html5boilerplate.com советуют

Да знаю)

Кого, как учили, похоже.

запрета нет. Есть "нежелательно" )

[davell]

Верстаем под браузеры: Firefox любой версии и Internet Explorer 8.

Доктайп HTML 5 указали только из-за того, что он короче? Все сделано простыми дивами, когда есть столько красивых тегов (header, section, aside, footer, nav, articls и т.д.).

Если мне не изменяет память то IE 8 не поддерживает данные теги.

[ablay2009]

Можно занести их в dom и сделать блочными, это всего пара строчек.

[Searcher]

Можно занести их в dom и сделать блочными, это всего пара строчек.

Будте добры кроссбраузерный пример.

[ablay2009]

Например:

<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>

<style>header, nav, section, article, aside, footer{display:block}

Я проблем не встречал

[axigreat]

ссылку на страничку поменял, теперь ничего лишнего на странице!!

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

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

и кстати при такой реализации при масштабировании странички, фон центрального блока слегка съезжает, стоит ли обращать внимание и с чем связано такое поведение?

картинку в центре поменял на полегче. хотя не хотелось привязываться к основному фону.

Большую центральную картинку лучше имагой сделать, а не бг

- уточните пожалуйста из каких соображений? ввиду того. что это возможно не фон, а часть контента страницы, так? или тут что-то другое?

В блокквоте должная быть q

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

В списке сошиалс можно обойтись без классов - просто имаги вставлять.

- использование доп элементов на странице предпочтительней доп классов??

и остался вопрос по поводу фона блока с контентом, его кривизной в ie7, и вообще нужно ли было его растягивать на ширину экрана(смотрится такой градиент по-моему не очень, или я неправильно сделал) Вот ошибка в ie7:

Например:

<script>

document.createElement('header');

document.createElement('nav');

document.createElement('section');

document.createElement('article');

document.createElement('aside');

document.createElement('footer');

</script>

<style>header, nav, section, article, aside, footer{display:block}

Я проблем не встречал

а кто-нибудь встречал?? если всё ровно. то следующее задание уже буду пробовать с html5

[SelenIT]

В блокквоте должная быть q

Пруфлинк или бред собачий.

спан с классом аутор - тег cite

В HTML4 допустимо, но в HTML5 — уже нет. Cite — только для названий цитируемых произведений.

Можно занести их в dom и сделать блочными

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

[Kerny]

axigreat ну, нафиг этот ie(((

[axigreat]

Cite — только для названий цитируемых произведений.

ясно, спасибо!!

ну, нафиг этот ie(((

, так конечно проще всего, но сначала хотелось бы разобраться, а потом уже нафиг

[ablay2009]

Я вообще для старых версий ие только самое главное оставляю, а всякие градиенты, закругленные углы и т.п. только последним мажорным. Ведь самое главное - это контент. А костылями, типа pie, мы только ухудшаем положение пользователей с ие, как правило ие установлен у людей, которые не знают, что такое быстрый интернет и человеческая работа в сети, и уж лучше быть без закругленных уголков, чем скачивать этот pie.

Edited February 26, 2012 by ablay2009

[axigreat]

мысль понял, но не очень понял к чему это, Вы хотите сказать, что проблему без костылей не решить, и лучшим выходом будет убрать для ie фон с градиентом, чтобы не портить

положение пользователей

, так?!