Верстка, CSS и разрыв в IE6

[tuls]

Буду благодарен за любые комментарии и рекомендации по верстке сайта:

http://www.fugees.ru

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

Я использую IE7, FF2, Opera9 и очень сложно тестировать.

Прошу не обсуждать дизайн сайта, так как это слишком субъективная тема.

Спасибо.

[Цветков Антон]

По поводу разрыва - все очень просто...

<div id="logo">
 <a href="http://www.fugees.ru/"><img src="http://www.fugees.ru/images/logo_top1.gif" width="220" height="165" border="0" alt="Fugees.ru .:. Стволовые клетки Рунета" /></a>
</div>

Рассмотрим, что в данном коде является выводимым на экран (на данном слое): это рисунок и... пробел... От чего пробел? У вас стоит перенос после закрывающего тега . А перенос (как и прочие непечатные символы) интерпретируется в пробел. Так вот суть в том, что если после рисунка идет еще какой-либо текст, то в IE6 под рисунком появляется отступ. Короче, убираем в данном куске кода все табуляторы и переносы между "" и "" и радуемся жизни...

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

На счет css-файла:

1) "margin: 0 0 0 0;" - не есть хорошо...

2) "left: 0px;" и т.п. - у нуля "px" не ставят... Ноль он в любых единицах ноль... И зато без px выглядит читабельнее.

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

[tuls]

Антон,

1) Большое спасибо за подсказку, я бы точно рыл не в том направлении

2) По поводу абсолютных путей - во всех файлах у меня программно (PHP) подключается шапка и переменная, которая хранит абсолютный путь, поэтому изменение домена займет несколько секунд - исправить значение переменной. Но абсолютные пути очень помогают в программировании и, насколько я знаю, благотворно влияют на SEO

3) По CSS - понял, буду чистить.

Спасибо за столь полезные советы!

[yopopt]

Про дизайн не буду (хотя есть что сказать), а по коду...

1. Почему доктайп не на первой строке? Возможны проблемы с ие.

2. Два слеша в http://www.fugees.ru//favicon.ico" /> Ерунда, но вс?-таки...

3.

Зачем body пропсывать идентификатор? Не проще обращаться просто к body?

4. Абсолютные пути лучше заменить относительными. Или просто от корня. Бесполезная трата трафика пользователя.

5.

- не красиво.

6. А зачем

? Пользуйтесь отступами. Это не сложно при таком большом количестве id.

В целом код страницы аккуратен и каких-то больших ошибок не видно.

Про css:

1. body#regular - ж?стко. Тоже про margin: 0 0 0 0;

2. background-image: url(../images/header_bkg.gif); - лучше пишите полное описание с позицированием, повторением и фоном.

3. Вот это: font-family: Verdana; font-size: 8pt; font-weight: bold; можно записать как font: bold 8pt Verdana;

4. Использование отрицательных значений говорит скорее о недостаточно продуманной структуре. Скорее всего несколько перестроив код можно обойтись и без них. Это оправданно только если хотите скрыть что-то. Но это мо? субъективное мнение. Не люблю я их.

В целом неплохо, но стоит почистить.

[tuls]

yopopt,

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

1. Почему доктайп не на первой строке? Возможны проблемы с ие

У меня впереди идет код php - для читаемости сделал отступ, уже исправил, спасибо

2. Два слеша в http://www.fugees.ru//favicon.ico" />

Исправил, благодарю

3. Абсолютные пути лучше заменить относительными. Или просто от корня. Бесполезная трата трафика пользователя.

Я уже писал выше - это мне на будущее, для удобной интеграции с PHP и mode_rewrite

4.

- не красиво.

Если у Вас будет свободная минут - напишите как красиво, потому что я думал, что итак сделал все как надо

5. А зачем

? Пользуйтесь отступами. Это не сложно при таком большом количестве id.

Каюсь - исправлю

CSS

1. body#regular - ж?стко. Тоже про margin: 0 0 0 0;

Прошу немного подробнее объяснить, потому что я не понимаю в чем ошибки (про margin я посмотрю в поисковиках, но что плохого в id для body?)

2. Вот это: font-family: Verdana; font-size: 8pt; font-weight: bold; можно записать как font: bold 8pt Verdana;

Все сократил

3. Использование отрицательных значений говорит скорее о недостаточно продуманной структуре.

Вы правы - буду исправлять

[tuls]

Антон, yopopt,

я хотел бы вас отблагодарить за ваше время и отзывчивость

если вам будет интересно - я с удовольствием отправлю свою книгу (естественно бесплатно) на указанный вами email

(оглавление и описание: http://www.fugees.ru/products/book.php)

[Цветков Антон]

но что плохого в id для body?

Плохого - ничего... Это вообще просто бессмысленно - зачем обращаться к "body#regular", когда можно аналогично обращаться к просто "body"? Ведь тег уникальный - зачем его идентифицировать еще и уникальным идентификатором (предложение не очень получилось, но суть, думаю, понятна)...

про margin я посмотрю в поисковиках

А что смотреть - напишите просто "margin: 0"...

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

Ну давайте, с удовольствием гляну - как раз занимаюсь фрилансингом (и как раз обитаю на Weblancer'е)... Слать сюда: aats88(а)gmail(.)com

[tuls]

Антон,

по поводу body - а если в перспективе динамическое изменение стиля body? но не через JavaScript, а через php:

есть два body - regular и unregular,

значение id для body вычисляется для каждой страницы - за странице A - это regular, на странице Б - unregular

есть смысл?

Антон, я встречал Вас на форуме Weblancer, книга будет выслана Вам в течение 24 часов.

[shkoda]

Посмотрите, пожалуйста, на сайт без картинок. Там же меню исчезло. Может и неплохо без него, но хотелось бы с ним

[tuls]

shkoda, спасибо - исправлю

[shkoda]

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

[yopopt]

4.

- не красиво.

Если у Вас будет свободная минут - напишите как красиво, потому что я думал, что итак сделал все как надо

Не красиво потому-что для такого случая достаточно использовать css. Прописав в стилях вот это:

#menu a {
 display:block;
 width:100%;
 height:100%;
}
#menu a:hover {
 background-image:url(../images/but_bkg.gif);
}

Вы полностью повторите действие яваскрипта. Да и создавать две функции ни к чему. Можно создать одну и вторым параметром передавать show/hide.

[Цветков Антон]

tuls, благодарю - книжко получил... Правда, не сразу про пароль сообразил - само сообщение забыл прочитать...