Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
 

   Интернет технологии -> HTML / DHTML -> Как совместить пиксел к пикселу фон и содержимое


Как совместить пиксел к пикселу фон и содержимое во всех браузерах

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

Я нашёл выход и теперь не понимаю, как я раньше не догодался! Работает он с MSIE3, MSIE4, NN3, NC4. Напомню, что 97% юзеров используют один из них (или два (или три, как я)). Сразу предупреждаю, что я не скажу ни слова о CSS, так как мой способ работает для всех броузеров, включая NN3.

Сначала я покажу разницу в том, как работают MSIE и NETSCAPE с margins, а потом напишу code, который нужно использовать. Также я полностью уверен, что другого выхода нет!!!

Речь поведу о третей и четвёртой версиях Нетскейпа. Они обе ничем не отличаются в плане margins, кроме того, что в четвёртой версии введён тэг <BODY MARGINWIDTH=# MARGINHEIGHT=#>, подобный тэгу MSIE <BODY TOPMARGIN=# LEFTMARGIN=#>, который присутствует в третей и четвёртой версиях MSIE. Разумеется Netscape не захотел просто взять и использовать такие же имена для параметров, и использовал параметр когда-то придуманного ими тэга для <FRAME MARGINWIDTH=# MARGINHEIGHT=#>, о загадочности которого я ещё расскажу.

То есть можно подвести маленький итог! Используя <BODY MARHINHEIGHT=0 MARGINWIDTH=0 TOPMARGIN=0 LEFTMARGIN=0> в MSIE3, MSIE4 и NC4, можно абсолютно избавиться от margins.

На этом я мог бы и закончить свою статью, но вы скажите: "А какже NETSCAPE 3? 40% юзеров его используют." Так вот именно поэтому я и пишу эту статью.

В чём главная проблема! Как вы и поняли в NC4 можно контролировать расположение content'а на страничке. Но! В Нетскейпе 3, увы нельзя. Что бы вы не делали, у вас всегда будет margin сверху и слева около 5 пикселов. Я точно не знаю сколько. Достаточно много. Единственный способ от них избавиться, это... использовать фреймы! Да, да, фреймы! Нужно просто напросто создать два фрэйма:

<FRAMESET ROWS="*,0">

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


<HTML></HTML>

Сделав это, вы мне скажите: "Ни фига. Всё равно есть граница. Дело в том, что вы забыли, что главный фрэйм дожен иметь при себе MARGINHEIGHT=0 MARGINWIDTH=0:

<FRAME NAME="home" SRC="home.html" MARGINHEIGHT="0" MARGINWIDTH="0">

Перед тем, как это сделать, проверьте, чтобы в файле HOME.HTML, не было MARGINGHEIGHT и MARGINWIDTH в таге BODY. Иначе вы можете испортить совместимость страницы в NN3 и NC4.

Сделав это, вы заметите проблему. В обоих нетскапах всё выглядит одинаково: вы увидите границу в один пиксел сверху и слева, но в MSIE границ вообще не будет. Поэтому, вам надо поставить

<BODY TOPMARGIN=1 LEFTMARGIN=1>

в HOME.HTML. Теперь похоже, что одинаково. Но нужно кое-что доработать. Во-первых во второй фрэйм нужно поставить

<FRAME ... NORESIZE SCROLLING=NO>

А в FRAMESET:

<FRAMESET ROWS="*,0" BORDER=0>

Если не будет BORDER=0, то у вас появится белая полоска внизу в MSIE. Проблема, которую я не мог устранить, это белая полоска внизу у NN3 и NC4, даже если есть BORDER=0. Чего я только не добавлял в <FRAMESET> и <FRAME>. Я попробовал всё: BORDER=0, FRAMESPACING=0, FRAMEBORDER=0|NO. Если вы найдёте выход, то напишите мне. Но нас это не должно сильно волновать. Нам нужно избавлятся от границ. Цвет той полоски, можно поменять в <BODY BGCOLOR> в пустом файле.

Ну что ж, кажется всё я сказал. И теперь покажу вам код... О! Забыл. Я забыл рассказать, как я до сих пор не могу понять загадачность MARGINWIDTH и MARGINHEIGHT в Нетскапе 3 и 4. Попробуйте сами, и вы упадёте со стула, когда увидите, как Нетскэйп сам себя обманывает.

Попробуйте убрать в тэге <FRAME> параметр MARGINHEIGHT=0. И взгляните на страницу в обоих Нетскэйпах. Верхняя граница вообще исчезнет, а левая останется! Теперь поставьте обратно и уберите MARGINWIDTH=0. Левая граница исчезнет, а сверху будет один пиксел! А теперь прикол, уберите оба параметра! Вы получите ту самую, четырёх-пяти пиксельную границу.

А теперь попробуйте объяснить мне эту закономерность в Нетскейпе! Теперь надеюсь вы поняли, что в Нетскапе 3 невозможно избавиться от обеих границ сразу. Считаю, что самым оптимальным вариантом было бы иметь один пиксел слева и сверху. И вот для этого код:

INDEX.HTML:

<HTML><HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ROWS="*,0" BORDER=0>
<FRAME NAME="home" SRC="home.html" MARGINHEIGHT="0" MARGINWIDTH="0">
<FRAME NAME="empty" SRC="empty.html" NORESIZE SCROLLING=NO>
</FRAMESET>
</HTML>

HOME.HTML:

<HTML><HEAD>
<TITLE></TITLE>
</HEAD>
<BODY TOPMARGIN=1 LEFTMARGIN=1>
Your stuff
</BODY>
</HTML>

EMPTY.HTML:

<HTML>
<BODY BGCOLOR=#FFFFFF> (в зависимости от цвета в главном фрэйме)
</HTML>

С этим кодом, вы можете смело создавать BGэшки и совмещать их с contentом на страничке. Выглядить всё будет одинаково во всех броузерах (97%). Под словом "всё" я подразумеваю границы.

Единственная проблема - эта та полоска внизу в Нетскапах.

Источник: www.infocity.kiev.ua

Ссылки по теме
Тэг FORM в HTML документах
Создание таблиц - приемы и хитрости
Практическое руководство по HTML
Часто задаваемые вопросы ( FAQ ) по HTML
PHP и формы
Введение в HTML
Тэг FORM и всё что с ним связано
 

Компьютерная документация от А до Я - Главная

 

 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.
 
Rambler's Top100