|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
08.12.2010, 05:03 | #11 |
Заблокирован
Форумчанин
Регистрация: 30.12.2009
Сообщений: 544
|
http://browsershots.org/ - онлайн-сервис для проверки на кроссбраузерность. Можете увидеть как будет выглядеть Ваш сайт в самых разных,даже самых экзотических браузерах - от IE, Firefox и Opera до Dillo и т.п.
Насчёт различных "хаков" - их обычно не рекомендуется использовать,т.к. нет гарантии,что в новой версии браузера данные "фокусы" не будут исправлены. Обычно "хаки" - это типа как просчёты разработчиков браузера. А вот условные стили типа <!--[if IE 6]> ... <![endif]--> и т.п. для IE - одобрены Microsoft. Вот пример JS кода для определения браузера (Chrome/Safari, Opera или IE). Версию корректно отображает только для IE,но это уже из особенностей содержимого UserAgent. Код HTML:
var LoadEvent = (function() { var userAgent = navigator.userAgent.toLowerCase(); var browser = { version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1], webkit: /webkit/.test(userAgent), opera: /opera/.test(userAgent), msie: /msie/.test(userAgent) && !/opera/.test(userAgent), mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent) }; if (browser.webkit) { alert('webkit '); } if (browser.opera) { alert('opera '); } if (browser.msie) { alert('ie ' + browser.version); } if (browser.mozilla) { alert('mozilla '); } })(); Код HTML:
document.getElementById('ID стиля').disabled = true;/*false*/ Код HTML:
<link rel="stylesheet" type="text/css" href="ie.css" id="ID стиля"/>
Темы для WordPress. Русские WordPress шаблоны
|
08.12.2010, 16:01 | #12 |
Форумчанин
Регистрация: 11.10.2010
Сообщений: 116
|
Paladast, Alexei91, благодарю Вас!
Подключаю стиль и использую "хаки" отдельно для каждого браузера, не только для версий IE, потому как.. вот например позиция моей кнопки в css (в хтмл она вызывается div'om): Код:
p.s. скриншот меню прилагаю внизу. кнопки (красная, желтая, зеленая) идут НЕ подрят, т.е. расположить просто дивами с параметрами лишь width & height & align - НЕ получится. Что делать? Последний раз редактировалось zlo_999; 08.12.2010 в 16:10. |
08.12.2010, 19:47 | #13 |
Заблокирован
Форумчанин
Регистрация: 30.12.2009
Сообщений: 544
|
Почитайте вот это. Возможно поможет.
Темы для WordPress. Русские WordPress шаблоны
|
08.12.2010, 23:41 | #14 |
Пользователь
Регистрация: 09.08.2009
Сообщений: 66
|
Проще было, если бы вы просто выложили исходники.
К сожалению не все советы написанные по ссылке которую дал Alexei91 верны, но в одном написанном я абсолютно согласен, старайтесь не только на тексте, а везде использовать px, а не %, pt и em. margin:-10px; - Уже само по себе не самое правильное описание. Меню старайтесь делать списком, например: Код HTML:
<div class="nav"> <ul> <li><a href="#">Button1</a></li> <li><a href="#">Button2</a></li> <li><a href="#">Button3</a></li> </ul> </div> Код:
Если же ничего из выше описаного вас не устраивает то просто вешайте на блок position:relative; http://htmlbook.ru/ - думаю это вам поможет.
Со мной бог и два пулемёта
Последний раз редактировалось Paladast; 08.12.2010 в 23:48. |
09.12.2010, 15:50 | #15 |
Форумчанин
Регистрация: 11.10.2010
Сообщений: 116
|
Вообщем, в опере и мозилле у меня по-разному марджин позиционирует дивы-кнопки (#button) и блок дива с текстом (#text)...
Выкладываю исходники: ( @-moz-document url-prefix() { } - идет ксс для мозиллы ) ( @media all and (min-width: 0px) { } - идет ксс для оперы ) Код HTML:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>under construction</title> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="ie8.css" /> <![endif]--> <style type="text/css"> @-moz-document url-prefix() { @charset "utf-8"; html { height:100%; } body { background-image:url(fon.jpg); background-repeat:repeat; overflow:auto; width:100%; height:100%;} * { margin:0; padding:0; } #global_div { margin:0 auto; min-height:100%; width:100%; height:100%; border:dashed; } #menu_div { background-image:url(main.jpg)!important;; background-repeat:no-repeat; width:734px; height:470px;border:groove; margin-top:0px!important; } #button_1 { border:double; width:169px!important; height:37px!important; margin: 1em 0em 0em -48.3em !important; display:block; padding-top:7px; font-size:16px; } #button_2 { border:double; width:169px!important; height:37px!important; margin: -3.1em 0em 0em -24.9em!important; display:block; padding-top:7px; font-size:16px; } #button_3 { border:double; width:169px!important; height:37px!important; margin: -3.1em 0em 0em -1.09em!important; display:block; padding-top:7px; font-size:16px; } #text {margin:3em 0em 0em -20em!important;font-family:Verdana, Arial, Helvetica, sans-serif; width:500px; height:300px; font-size:22px; border:dashed;} a:link {color:#000000;text-decoration: none; outline: none; } a:active {color:#000000;text-decoration: none; outline: none; } a:visited {color:#000000;text-decoration: none; outline: none; } a:hover {color:#000000;text-decoration: none; outline: none; } } </style> <style type="text/css"> @media all and (min-width: 0px) { @charset "utf-8"; html { height:100%; } body { background-image:url(fon.jpg); background-repeat:repeat; overflow:auto; width:100%; height:100%;} * { margin:0; padding:0; } #global_div { margin:0 auto; min-height:100%; width:100%; height:100%; border:dashed; } #menu_div { background-image:url(main.jpg); background-repeat:no-repeat; width:1000px; height:512px;border:groove; margin-top:50px; } #button_1 { border:double; width:169px; height:38px; margin: 1em 0em 0em -38.5em; display:block; padding-top:7px; } #button_2 { border:double; width:169px; height:38px; margin: -2.7em 0em 0em -19.7em; display:block; padding-top:7px; } #button_3 { border:double; width:169px; height:38px; margin: -2.5em 0em 0em -0.9em; display:block; padding-top:7px; } #text {margin:3em 0em 0em -20em;font-family:Verdana, Arial, Helvetica, sans-serif; width:400px; height:300px; } a:link {color:#000000;text-decoration: none; outline: none; } a:active {color:#000000;text-decoration: none; outline: none; } a:visited {color:#000000;text-decoration: none; outline: none; } a:hover {color:#000000;text-decoration: none; outline: none; } } </style> </head> <body> <div id="global_div" align="center"> <div id="menu_div"> <a href="index.html"> <div id="button_1"> кнопка 1 </div> </a> <a href="reklamodatelyam.html"> <div id="button_2"> кнопка 2 </div> </a> <a href="kontakti.html"> <div id="button_3"> кнопка 3 </div> </a> <div id="text"> текст </div> </div> </div> </body> </html> Последний раз редактировалось zlo_999; 09.12.2010 в 15:52. |
10.12.2010, 00:42 | #16 |
Пользователь
Регистрация: 09.08.2009
Сообщений: 66
|
Посмотрел код, улыбнуло )
Вам уже говорилось что нужно делать что бы было корректное отображение. За вас никто не будет это делать, учите css и если спрашиваете то хотя бы пользуйтесь советами которые вам дают. Вот пример меню о котором я говорил ранее, сделанный на основе вашего: Код:
Со мной бог и два пулемёта
|
10.12.2010, 02:13 | #17 | |
Форумчанин
Регистрация: 11.10.2010
Сообщений: 116
|
Paladast, благодарю!
просто Вы написали: Цитата:
Все рекомендации сохранил и изучаю и тормозов в изучении нет нигде, кроме как со свойством марджин. если бы гугл\яндекс и литература отвечали полно по этому свойству, я бы не задал вопрос здесь. увы, не отвечают. Именно благодаря пользованию советам, я подключил отдельно стили для IE 6,7,8 а также FF & opera. Приношу извинения, если не догадался везде в комментах к коду подписать где какой-совет используется из данной темы использовал. вопрос без изменений: благодаря чему значения заданные margin отображаются на одних-и тех же координатах точных во всех браузерах? Возможно есть какие-либо стандартные процедуры, которые каждый верстальщик прописывает в коде, для марджина? или нет? может быть сброс отступов, обнуление? или доктайп какой-то универсальней? можно, конечно, тыбзить простейшие разметки страниц и редактировать их и всё упрощалось бы но, я хочу действительно понимать что откуда растет, почему и как работает. хочу научиться. |
|
10.12.2010, 02:19 | #18 | |||
Пользователь
Регистрация: 09.08.2009
Сообщений: 66
|
1.
Цитата:
2. Цитата:
3. Цитата:
Со мной бог и два пулемёта
|
|||
10.12.2010, 02:37 | #19 | |
Форумчанин
Регистрация: 11.10.2010
Сообщений: 116
|
Цитата:
p.s. в коде в посте #16 всё отображается хорошо в ИЕ 8 и мозилле 3.6 и 2 но... - в опере 9 и 10 и сафари - отсутствует "отступ" сверху, который присутствует в ИЕ 8 и ФФ 3 и 2. - в ИЕ 6 дивы значительно меньше чем во всех остальных браузерах.. пробывал дописать margin-top и margin-bottom - ноль эффекта. |
|
10.12.2010, 02:47 | #20 |
Пользователь
Регистрация: 09.08.2009
Сообщений: 66
|
Что б такого не было в css пишут
Код:
Повторюсь, за вас никто ничего делать не будет и учить вряд ли кто то возьмется, задавайте конкретный вопрос, получите конкретный ответ. Удачного обучения.
Со мной бог и два пулемёта
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Верстка в DIV | Suamo | HTML и CSS | 5 | 10.11.2010 18:28 |
верстка | NecRoMat | HTML и CSS | 5 | 02.10.2008 01:03 |
Верстка сайтов | Ромыч | Помощь студентам | 1 | 07.05.2008 16:31 |