LESTAD

Спс, ушел в изучение семантики... . ( я так понял я попал в разряд ФИГАЧАЩИХ ) Ну а откуда мне было знать что код надо организовывать правильно, и что надо с начало правильно организовать HTML разметку с точки зрения семантической верности и понятности да же при отключении CSS ( я в место этого подстраивал HTML под будующую разметку, что бы было проще оформлять в CSS), короче я в ужасе сколько еще изучать... . Еще раз огромное СПС за критику, 3 дня не спал не ел читаю... .

Не правильное оформление ссылок Home, Service, не как в макете.

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

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

HTML:

<div id="Language">
      <img src="images/lrlinecer.gif" alt="" width="33" height="24" />
      <ul>    
        <li><a class="hoverlang" href="#">rus</a></li>
        <li><a href="#">eng</a></li>

        <li><a href="#">deu</a></li>
      </ul>
    </div><!--id="Language"-->

CSS:

#language {
	position:absolute;
	top:0;
	right:0;
	width:250px;
	height:24px;
	line-height:28px;
	height:89px;
	background:url(images/lincertonc.gif) bottom repeat-x;}
	#language img {
		float:left;}
	#language ul, li {
		display:inline;}	
	#language ul {
		padding-left:20px;
		padding-top:20px;}	
	#language ul li a {
		text-decoration:none;
		padding:0 7px;
		color:#ACACAC;}
	#language ul li a:hover {
		background-color:#EE4428;
		color:#fff;}
	.hoverlang {
		background-color:#EE4428;
		color:#fff !important;}

Ну и соответственно теперь :

HTML:

<ul class="language">    
      <li><a class="hoverlang" href="#">rus</a></li>
      <li><a href="#">eng</a></li>
      <li><a href="#">deu</a></li>
</ul>

CSS:

ul.language {
		position:absolute;
		top:0;
		right:0;
		padding:6px 50px 65px 40px;		
		background: url(images/lrlinecer.gif) top left no-repeat;
		border-bottom:#AEAEAE 2px solid;}

		ul.language li {
			display:inline;}

			ul.language li a {
				text-decoration:none;
				padding:0 7px;
				color:#ACACAC;}
			ul.language li a:hover {
				background-color:#EE4428;
				color:#fff;}
			.hoverlang {
				background-color:#EE4428;
				color:#fff !important;}

Конечно, я мог прийти к этому и через месяц чтения, хотя не вижу гарантии, или понять при живом обсуждении, того что уже сделал. Не ужели я выбрал не правильный подход? Причем я уверен, что и этот код можно еще больше улучшить. Но это придет с опытом, а не чтением... .

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

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

Кстати еще одно спасибо, я не знал о существовании микро форматов, точнее знал, но не знал как же они должны применяться, теперь пополнил свои знания. Каждый пост ценен на 100 %.

СПС, вопрос елси я переделаю ее, то будет ли возможным еще раз просмотреть?

Разрыв строки один из самых старых элементов. Он ведь появился ещё до того, как родились создатели HTML.

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

<p>Многоканальный телефон в Москве: +7 (499) 234-56-78<br />
Электронная почта: <a href="#">info@hrstorange.ru</a></p>

Как вариант, список определений подходит.

я там использовал этот БР, та как не хотел лишний слой вешать, но пришлось так как там составная линия с верху, уже переделал, сделал отдельными абзацами.

Ну что ж, пожалуй приступим:

3. <!--class="Logo"--> - это что за чёрт? Зачем тут этот комментарий и что он означает?

5. <!--id="linck"--> - Снова в конце непонятный коммент

только по одному отпишу, точнее сразу по двум, Это разметка HTML, для себя, что бы не теряться в дивах, подсмотрел в какой то книжке из разряда HTTML + CSS.

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

Но читая отзывы и разборки своей же верстки, я по вашим отзывам собиратю для себя картинку - как надо, из теории именно по CSS2 + HTML4 я прочел уже не одну книжку, + этот форум стараюсь читать и вникать.

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

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

По поводу вёрстки, если мне позволено будет вякнуть. Бросается в глаза обилие <div id="что-то">.

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

Надо думать о возможности замены на что-нибудь другое. Скажем, менюшка под "Кредитной линией на любой вкус" - чем не список?

то же уже обсудили - вердикт моя схема то же может жить.

Вот ищо мелочишко:

<p>Многоканальный телефон в Москве: +7 (499) 234-56-78<br />
Электронная почта: <a href="#">info@hrstorange.ru</a></p>

br - это не труЪ.

Можно узнать почему?? Я же не в оформительских целях его использовал, а для переноса строки (используется в HTML именно для этого), почему он тут не уместен?

П.С. Мой маленький совет, кода делаете свою верстку, мне кажется лучше другие не смотреть, так как теряется тот самый интерес - в набивании шишек. Хотя, может у каждого свой подход, но да же взглянув краем глаза на чужую верстку, вы уже знаете примерный вид решения.

Спасибо за вашу дискуссию, а можно не спорить и просто высказать свое мнение, мне каждое мнение дорого так как это 100% опыт, личный для каждого из вас. Я вот вообще не понимаю зачем картинки отключать, но вот такой довод как 35 мегабайт в неделю, это действительно довод.

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

Serlutin и swetlana Огромное спасибо за пояснения.

ID header подправил.

Я уже 4 раза перечитал ваши ответы, вот наверное для таких пояснений и создавал эту пробную верстку, по поводу ID, с таким примером, как формирования странички CMS, все стало на свои места.

Про img все тоже теперь как 2 * 2, дальнейшее их использование не по назначению уже можно будет считать за мою ошибку.

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

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

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

Еще раз ОГРОМНЕЙШЕЕ СПАСИБО, за такие разъяснения.

Исправил, спасибо за замечание, я просто не воспринял это сразу как ошибку, ну зато 10 минут времени потратил на развлечение, и по пробовал увеличивал шрифт в ИЕ7 на самый крупный - все хорошо. Единственное что хочется добавить, что если бы делал верстку сейчас, сделал бы процентов 80 по другому, может когда то и переделаю, хотя думаю лучше оставлять и потом смотреть на свои первые творения, да же сейчас меня позиционирование заставило улыбнуться .

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

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

А есть же разница между полностью табличной версткой, и "расположить 2 элемента формы". Соори за флейм... .

Просто я так долго парился, над первой резиной, готовился: читал - разбирал чужие коды, где то около 10 дней(ночей) в итоге осилил ее за 6 часов, и уже больше суток сижу жду ваших пояснений, вот что то меня на общение потянуло

Запустил ваш макетик в 7 IE, жесть..., а так ну не знаю смысл тогда вообще было в нем использовать графики??

на 7 IE не работает, а так интересный вариант... . Щас спать уже, завтра надо бует по разбираться, у меня пока только 1 вопрос, он будет работать при тянущемся режиме??

1

Удивило безумное количество id. Зачем? Хотя это быстро проходит, если делать не абстрактную вёрстку, а живые сайты. Интегрировать свою вёрстку с cms, а затем поддерживать сайт, меняя компоновку под вносимые практикой коррективы. Пару раз словишь косяки с несколькими одинаковыми id и запутавшимся в них js например — и вопрос насчёт целесообразности использования id в оформительских целях снимается.

По поводу ID, есть же проверка валидности которая ловит такие огрехи как одинаковые ID. Я согласен, что с опытом все изменится, но вот не знаю сейчас мне показалось это уместным, может потому что я еще не чувствую уверенности в каждом действии. Но был бы рад услышать, как правильно было бы, именно по этому жду с нетерпением ваших ответов, вот здесь уже нужны разъяснения. Так как, я понял использовать ID надо там где будет он использован единожды, так и старался, мне кто то писал тоже что вы про ID, только про Class.

2

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

Я так понял вы про центральное меню, я честно не рассматривал его как меню... . Надо сделать списками? Я так понимаю, так же правильно?. Жду вашего ответа... . Если правильно списками, буду переделывать.

3

<img> для чисто оформительских целей — например, иконки в меню — сомнительное решение. Фоном было бы уместнее.

Хотя <img> более оправдан, если планируется, что разделами будет управлять секретарша с доступом на специальную страничку в админке cms.

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

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

4

Но рамка фоновой картинкой удивила.

Использование position: absolute тоже удивило. Я, кстати, до сих пор не понимаю — зачем?

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

5

Спрятанный под каким-то из блоков телефон тоже удивил.

Перечислить случаи, когда номер телефона нужно скопировать, можно. А вот скопировать его почему-то нельзя. Почему?

И, кстати, почему <sup> выскочил не по макету? Выглядит откровенно коряво.

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

6

Это первое впечатление.

Если нужны пояснения — не вопрос, сделаю. Только какие пояснения? Будут вопросы — отвечу.

ВОт вопросы обозначил, конкретно 1, 2, 3 пункты(очень хочется разъяснений), спасибо за критику.

Еще скажу что CSS код не оптимизировал, что бы было легче находить что и где править, уменьшить его можно где то процентов на 30( не в смысле пробелов а в смысле оптимизации), но пока не буду что бы потом не мучатся.

7IE беда, Сафари тоже беда, фаерфокс - беда (смотри правую сторону, ниже хедера), Опера совсем стращно... что там еще хром = тот же косяк и что и в лисичке, ну это внешние, а если внешне не выглядит как надо, я думаю смотреть код нету смысла... . Советую читать HTMLbook.ru и использовать, CSS2 и HTML 4.

П.С. не в тему :жаль что пока наши браузеры не доросли до всех красивостей CSS3 + HTML 5, и 10 % пользователей умудряются сидеть еще на всяких 7 ишаках а те 2% которые пользуются 6 осликом вообще надо расстреливать

а может и нельзя.

Нормальные-то хостинги не все с первого раза позволяют использовать .htaccess…

utf-8, конечно, форевер, но товарищ на народе размещается

смотрю, Вы, все во круг да около ходите... .

Можно было файлик просто закинуть, как я написал. Имхо, мне не нравится эта кодировка... . утф 8 форевер

там, с файлами все хорошо, просто сам веб сервер настроен на отображение другой кодировки, лечится изменением настроек сервера, или добавлением в каталог к индексному файлу, файла с именем ".htaccess" и содержимым "AddDefaultCharset utf-8", соответственно без кавычек.

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

А выстраивать элементы нужно именно так? нельзя в место построения столбцами использовать строчное построение(ведь куда не ткнись все строится строками, а не столбцами), тогда все упрощается в разы как бы. Просто можно переработать суть задачи, и все будет хорошо.

Я уже не маленький, мне как бы и нужна очень строгая критика, без нее увы ни как... .

Будешь очень жестким, и шарящим заказчиком

Да и если, не ты то кто? Я именно по твоему совету учусь, в том смысле, что в том направлении которое ты мне задал. Лучше приходить к пониманию, + исправлению ошибок, + пополнению простейших недостающих знаний, на стадиях обучающей верстки, чем потом в бешенстве рыть кучи материала.

Обращаюсь к многоуважаемые мною swetlana, psywalker, LunatiK, мне очень нужны ваши оценки и критика моей работы... Прошу вас и всех, не безразличных к судьбе начинающего верстальщика, дать оценку, и показать ошибки, плюс мне надо направление куда дальше читать... и куда развиваться. Я очень сильно жду, всех возможных комментариев. Не ужели все на столько плохо, что мне да же никто ничего не хочет писать...

Самое главное, это разделение оформления и кодержания. Таблицы этим не хвастают, а это сейчас что для поисковиков, что для далеких дяденек является приоритетом.

Но таблицы будут жить всегда!

Я вот сейчас изучаю CSS и HTML, и уже прочитал много за и против, но тенденции таковы что те кто лет 5 назад защищал таблицы, сейчас прекрасно верстают слоями, и приходит все таки понимание, что всему свое - Таблицам табличные данные, Слоям Оформление.

Я думаю каждому верстальщику, надо использовать его "СВОЕ" и не париться, главное что бы это не влияло на качество.

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

Вариантов много, надо знать конкретно что дано, Great Rash - предлагает использовать класс, но бывает так что править HTML нельзя, тогда подойдут варианты с дочерними или соседними тегами. Если вы более полно опишите суть проблемы, то я вам подскажу, если нет то используйте класс.

в CSS:

img {position:fixed; top:100px; left:40px;}

Все изображения зафиксируются, относительно угла браузера, со смещение с верху 100 пикселей, с лева сместится на 40 пикселей.

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

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

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

А разве меню дергается не из за того что браузер пересчитывает размер блоков тянущихся? или есть возможность как то это исправить?

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

Огромное спасибо, пропустил, исправил.

И кое-где <img> необдуманно вставлены, их лучше было бы "засунуть" в background

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

P.S. не знаю было ли дополнительным условием - соблюдение модульной сетки?!

Все условия я написал в первом посте.

ну в ИЕ6 проблемки есть, Но если на него акцента не было, то всё нормуль

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

Проверял на Опере, хроме, Фаерфоксе, ИЕ, Сафари. Пытаюсь учится кроссбраузерности, без хаков.