Рассылку представляет сайт BooksPRO - графика и программирование.
BooksPRO - это сайт для дизайнеров и программистов (как начинающих, так и для профессиональных)! Здесь Вы найдете огромное количество самоучителей, статей, исходников, узнаете, что такое easter eggs и сможете весело отдохнуть от работы, читая анекдоты и увлекательные истории! А главное, все бесплатно! www.bookspro.net.ru
От себя:
Всем привет, это снова я! Очень рад новым подписчикам! Пишите письма, болтайте на форуме...
В данной статье я расскажу вам об основных принципах создания «мультибраузерного» сайта: Под словом «мультибраузерный» сайт я подразумеваю сайт, определяющий браузер пользователя и в зависимости от результата, использующий уникальные этому браузеру CSS стили. Так же я расскажу о некоторых проблемах, которые могут возникнуть при работе с браузерами.
Значит так, что нам надо? А нам надо сделать так, что бы сайт отображался в большинстве браузерах по возможности одинаково (к сожалению, абсолюта не добиться).
Перво-наперво необходимо определить в каких браузеров наш сайт должен отлично выглядеть. В моем варианте это: IE, Opera, Netscape и Mozilla.
И сразу совет: старайтесь не использовать атрибуты , переложите эти обязанности на CSS... или на строковые элементы стиля aka style="*". Хотя даже "style" стоит использовать только при крайней необходимости.
Для решения этой интересной задачи я предлагаю следующее: использовать несколько стилей для разных браузеров. Однако, я вам не советую просто универсально писать, т.к. получится хуже, но геморроя меньше:)
Вот кодик, который я написал для своего сайта. Так мы определяем с каким браузером мы имеем дело:
Т.е. если, например, к нам зашли через IE, то у скармливаем CSS файл по имени ie.css. Можно сделать небольшую модернизацию и определять еще и версию браузера, но я в этом большого резона не увидел...
Теперь после того, как мы научились определять браузер юзера и использовать специфичный ему CSS файл, поговорим о различиях между этими браузерами.
Вот наиболее важные нюансы, на которые стоит заострить внимание:
1) Если используете комментарии в CSS файлах, то юзайте конструкцию /* комментарий */, но никак не # и не , т.к. Mozilla и Netscape странно реагируют на них, поэтому следующий за комментарием элемент стиля просто игнорируется, когда же в Opera и IE все ОК.
2) Различное отображение тега <select>. В IE он смотреться наиболее презентабельным образом, а вот в других браузерах, он мало того, что некрасиво выглядит(ИМХО), так он еще и выравнивается несколько странно... Т.е. где-то выше, где-то ниже. Поэтому для решения этой проблемы я использую относительно позиционирование:
position: relative; top: 1px;
Это спасает. НО! В Opera я заметил такую фишку, что при наложении на любой другой элемент (используя выше написанный код), например на бордюр таблицы, то границы просто становятся невидимыми:( Выйти их этого положения можно следующим способом: дописать "z-index" и того у нас получается:
position: relative; top: 1px; z-index: 1;
3) Далее идут различия в кнопках. Т.е. например, где-то текст кнопки располагается выше на 1px, где-то ниже. Короче это безобразие надо отслеживать. А самое прикольное, что в Opera возможен такой глюк, что при использовании DOCTYPE(хотя многие его не используют, но без него валидный код вам будет только сниться:)), размеры кнопок странно отображаются, т.е. для дорогой Opera я указываю "height: 14px;", несмотря на то, что в других браузерах стоит "height: 18px;", который и является реальной величиной.
4) Будьте внимательны с размерами <input> и <textarea>. Мною было найдено некоторые несоответствие в размерах браузеров: Netscape и Opera(7.6).
Самое интересное, что в Opera 8 этого нет!
5) Сокращайте слова в атрибуте "ALT" при <img>, так как в Mozilla этот текст "выйдет" за границы . Эту фишку я заметил толька в Mozilla, в других браузерах все было ОК.
6) Далее хочу напомнить, что использование для оформления скроллбара кода типа:
Будет отображаться только в IE и производных от него. Поэтому не удивляйтесь, что зайдя в Mozilla вместо радостных тонов вы увидите серый скроллбар(в зависимости от темы оформления)
7) Не юзайте следующий код:
leftmargin, marginwidth, topmargin, marginheight
подобные скармливают нам различные визуальные редакторы. Точно знаю про Namo WebEditor(дааавно пользовался)
Используйте для отступов документа код:
BODY { padding: 0; margin: 0; }
Если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишем:
BODY { padding: 1px 0 1px 0; margin: 0; }
Вы, наверное, спросите "А зачем margin: 0 нужен, ведь и без него все нормуль?" А я вам отвечу, что это просто необходимо для Mozilla. А то вы будете ломать голосу, почему же у вас там появились лишние отступы :)
Вот в общем то и все... Дерзайте и у вас все получиться.
P.S. Данная статья может содержать некоторые неточности, но суть я думаю вам понятна: ;-)
Анекдоты:
Приходит мужик к психотерапевту:
- Доктор, мне каждую ночь снятся крысы, которые играют в футбол.
- Вот вам таблетки, выпьете и будете сегодня спать спокойно.
- А можно завтра?
- А почему не сегодня?
- Сегодня у них финал.
***
Объявление на одесском пляже:
Пляж закрыт.
Во-первых, в воде нашли-таки холеру!
Во-вторых, до сих пор не нашли работников санстанции.
В-третьих, - зима.
***
К часовому у оружейного склада подходит инспектирующий полковник:
- Фамилия?
- Иванов.
- Что охраняешь?
- Боеприпасы.
- А что же ты мне все рассказываешь, вдруг я - переодетый шпион?
Автоматная очередь. Часовой задумчиво:
- Ты посмотри какая сволочь!
Полезные ссылки:
www.bigfoto.ru - коллекция клипарта большого разрешения. www.vetton.ru - качественные обои для рабочего стола. www.grammy.ru - много бесплатной музыки.
Ответы на вопросы:
Пока вопросов не поступало. Пишите. Также можно (нужно) общаться на форуме BooksPRO! Вакансия
Думаю все слышали про удаленную работу (телеработу или freelance).
Так вот я предлагаю Вам поработать. Денег у меня не много, поэтому буду расплачиваться ссылками.
Работы хватит всем и она не сложная. Короче, надо делать страницы для моего сайта (статьи, уроки, рассказы, юмор и т.д.)
На каждой сделанной Вами странице будет стоять Ваша ссылка или просто подпись.
Если есть желание, пишите, все объясню и научу, если не умеете... Можно сделать одну и более страниц.