Верстка по шаблону PSD из топика

[lilumi]

Решил попробовать сделать верстку из PSD, того что выложили в топике http://forum.htmlbook.ru/index.php?showtopic=13276

Но есть недочеты — незнаю как сделать чтобы лупа была над бекграундом из хедера (я сделал с помощю отрицательного margin-top, но в IE это не проканало), пробовал еще и через z-index, тоже не удалось. Если вы знаете как сделать, буду признателен если расскажете как.

И еще по-моему получилась слишком большая по размеру шапка: 100кб и сам логотип отличается по цветовому фону от фона под низом и я незнаю как сделать лучше в этом случае.

Ну а если я еще что-то незаметил или сделал неправильно, ткните пальцем, потому что это мой первый опыт и я могу много чего не знать.

В общем заценяйте: http://lilumi.org.ua/other/raira/

[Victor Ananiev]

Лупа обычно приближает

Но есть недочеты — незнаю как сделать чтобы лупа была над бекграундом из хедера (я сделал с помощю отрицательного margin-top, но в IE это не проканало), пробовал еще и через z-index, тоже не удалось. Если вы знаете как сделать, буду признателен если расскажете как.

В хедер вставить еще один див и растянуть на всю высоту его, а потом поставить ему беком картинку)

	  <div>
		Телефоны:<br />
		(495) 432-34-54<br />
		Факс: (433) 434-43-34<br />
		E-mail: raira@raira.ru
	  </div>

Такое делается списком и list-style-type:none;

Футер не прижат)

Edited March 24, 2009 by Victor Ananiev

[lilumi]

добавочный див не помог, бабочка все так же под дивом.

Насчет контактных данных в списке — несогласен. Это нарушение семантики и я никогда не видел чтобы так делали.

А зачем футер прижимать?

[Dimitry Wolotko]

Ну тут нет нарушения семантики, а если и есть - то бог с ней - списками удобней.

Футер тут прижимать абсолютно нет необходимости (тупо по желанию).

Так, теперь по делу:

* Логотип сделать бы кликабельным - ибо самое очевидное средство попасть на главную страницу.

* Допускать такие переносы и разбиения тегов не следует:

<dd>Согласно Лицензии на оценочную деятельность
		  №010257 от 24.11.2004г., мы оказываем следующие <a href=
		  "#">услуги по оценке и экспертизе</a>.</dd>

Может вылезти каким=-нибудь непонятным косяком.

* Слишком много id - ну это уже придирки, я больше классами люблю.

А вообще - очень ровненько и аккуратненько. Мне нравится.

[Victor Ananiev]

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

Насчет контактных данных в списке — несогласен. Это нарушение семантики и я никогда не видел чтобы так делали.

За то делать список контактных данных через <br /> это семантично? О_о

[Dimitry Wolotko]

Ну не симпотично да - но сойдёт Но лучше прибить - или продолжить его

А ещё я бы партнёров при наведении цветными делал бы. Спрайтиками.

И цвет картинки http://lilumi.org.ua/other/raira/images/logo.jpg от фона отличается таки.

[lilumi]

* Логотип сделать бы кликабельным - ибо самое очевидное средство попасть на главную страницу.

* Допускать такие переносы и разбиения тегов не следует

Спасибо за ответ. Логотип сделал кликабельным, переносы убрал, это HTML Tidy так сделал, а я не заметил.

* Слишком много id - ну это уже придирки, я больше классами люблю.

Я использовал id — так как эти елементы уникальны в пределах страницы.

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

Когда он будет посередине? когда текст уменьшится до нечитаемых размеров — кто будет так делать? (хотя я уже его прижал, но при этом пришлось использовать лишний пустой див для clear:both; а другие способы используют некрасивые хаки)

За то делать список контактных данных через это семантично? О_о

Да, через <br /> семантично, и этому есть много примеров (возьми любую работу из студии Лебедева), а списки в данном случае неуместны.

А ещё я бы партнёров при наведении цветными делал бы. Спрайтиками.

Как-то не хочется заморачиваться с расскрашиванием, да и там партнеры одним рисунком идут.

И цвет картинки http://lilumi.org.ua/other/raira/images/logo.jpg от фона отличается таки.

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

И еще, так никто и не посоветовал, как сделать background-image в третьей колонке видимой над шапкой в IE.

[SelenIT]

Почему бы не использовать для адреса специальный тег <address>?

Большие сомнения по поводу трех <dl> по одной паре <dt>-<dd> в каждом. Лично я бы использовал заголовки третьего уровня и обычные абзацы.

Почему бы не задать id="top-menu" прямо списку, без дива-обертки?

Слово "Страхование", имхо, при расширении окна должно сдвигаться вправо, а то дырка между ним и "Экспертизой" уже при 1280px выглядит неестественной. Хотя, имхо, эти слова вообще тут некузяво смотрятся, но это уже к самому дизайну претензия, а не к верстке...

сам логотип отличается по цветовому фону от фона под низом и я незнаю как сделать лучше в этом случае.

Имхо, его фон вполне можно сделать прозрачным (PNG-8 или GIF). На мелких "зубчиках" вокруг букв разница оттенка будет практически незаметна, в отличие от четкой прямоугольной границы.

А так вполне и очень даже

[evgeney]

Попробуйти изменить масштаб в IE. Очень забавная картина наблюдается (Я пробовал в 7-м - все жутко разъезжается...)

[psywalker]

evgeney

Вот именно, что такого не должно быть

[Clayton]

А что именно в 7-м разъезжается? У меня чето все нормально. За исключением 3-й колонки с экспертизой - она немоного обрезается по краям, если совсем уж сузить масштаб.

[psywalker]

Clayton

Откой ИЕ7, Две вкладки , в каждую введи этот адрес и попробуй каждому задать большой размер % и увидишь разницу, всё поймёшь))

http://psywalker.ru/Raira/main-page.html

Edited May 19, 2009 by psywalker

[Clayton]

Хм... Не понятно как это происходит... Но оно и при увеличении, и при уменьшении так разъезжается

[psywalker]

Это всё зависит от качества вёрстки, значит изначально надо было верстать качественнее

[alex72]

А можно вопрос от новичка? А в чем вы это все верстаете?? У меня в Dreamweaver'е все разьезжается, а в FronPage и того хуже.

[AMD]

открываю блокнот и верстаю.

советую php designer.

[psywalker]

alex72

А можно вопрос от новичка? А в чем вы это все верстаете?? У меня в Dreamweaver'е все разьезжается, а в FronPage и того хуже.

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

[rus]

alex72

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

Ээээ..., ты не прав, все совсем наоборот. Некоторые редакторы (в частности дрим, хотя это не совсем редактор), имеют подсказки, а блокнот нет. Так что если ты мастер класс - то блокнот тебе в руки.

[psywalker]

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

И ещё мне кажется, что все подсказки в Дриме - это лишний повод не учить название свойств и тегов..

[rus]

И ещё мне кажется, что все подсказки в Дриме - это лишний повод не учить название свойств и тегов..

Вот ты и сам опроверг свое мнение...

[psywalker]

Рустамыч, так ты не понял, я наоборот имел ввиду, что Новичкам работать в Дриме - это повод не учить название свойств и тегов, тоесть я хочу сказать, что по началу всё лучше делать в блокноте, так как по ходу дела новичёку приходиться правильно писать код и невольно учить его... А когда ты уже имеешь богатый опыт написания кода, тогда уже можно переходить в Дрим, потому что ничего нового, кроме скорости он тебе не даст...