Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.12.2010, 05:03   #11
Alexei91
Заблокирован
Форумчанин
 
Аватар для Alexei91
 
Регистрация: 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 ');
  } 
  
})();
Подключать/отключать нужные стили можете,используя JS:
Код HTML:
document.getElementById('ID стиля').disabled = true;/*false*/
Код HTML:
<link rel="stylesheet" type="text/css" href="ie.css" id="ID стиля"/>
(для примера)
Темы для WordPress. Русские WordPress шаблоны
Alexei91 вне форума Ответить с цитированием
Старый 08.12.2010, 16:01   #12
zlo_999
Форумчанин
 
Аватар для zlo_999
 
Регистрация: 11.10.2010
Сообщений: 116
Вопрос

Paladast, Alexei91, благодарю Вас!

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

вот например позиция моей кнопки в css (в хтмл она вызывается div'om):

Код:
#button_3

{ border:double; width:169px; height:38px; margin: -2.5em 0em 0em -0.9em; display:block; padding-top:7px;  }
проблема в том, что margin: -2.5em 0em 0em -0.9em; - опера и FireFox - трактуют по-разному, разное позиционирование получается совершенно. как и даже в Хроме, и том же IE. И если размещаю кнопку при помощи margin идеально в мозилле - в опере она обязательно будет на много пикселей уходить вверх или лево\право\низ и т.д. как и в IE.

p.s. скриншот меню прилагаю внизу. кнопки (красная, желтая, зеленая) идут НЕ подрят, т.е. расположить просто дивами с параметрами лишь width & height & align - НЕ получится.

Что делать?



Последний раз редактировалось zlo_999; 08.12.2010 в 16:10.
zlo_999 вне форума Ответить с цитированием
Старый 08.12.2010, 19:47   #13
Alexei91
Заблокирован
Форумчанин
 
Аватар для Alexei91
 
Регистрация: 30.12.2009
Сообщений: 544
По умолчанию

Почитайте вот это. Возможно поможет.
Темы для WordPress. Русские WordPress шаблоны
Alexei91 вне форума Ответить с цитированием
Старый 08.12.2010, 23:41   #14
Paladast
Пользователь
 
Аватар для Paladast
 
Регистрация: 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>
CSS:
Код:

.nav ul{
padding:0;
}

.nav ul li{
list-style:none;
display:inline;
margin-right:10px;
}
Если вам надо что б были разные расстояния на кнопках, то просто вещайте на них разные классы и задавайте разные отступы.

Если же ничего из выше описаного вас не устраивает то просто вешайте на блок position:relative;
http://htmlbook.ru/ - думаю это вам поможет.
Со мной бог и два пулемёта

Последний раз редактировалось Paladast; 08.12.2010 в 23:48.
Paladast вне форума Ответить с цитированием
Старый 09.12.2010, 15:50   #15
zlo_999
Форумчанин
 
Аватар для zlo_999
 
Регистрация: 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.
zlo_999 вне форума Ответить с цитированием
Старый 10.12.2010, 00:42   #16
Paladast
Пользователь
 
Аватар для Paladast
 
Регистрация: 09.08.2009
Сообщений: 66
По умолчанию

Посмотрел код, улыбнуло )
Вам уже говорилось что нужно делать что бы было корректное отображение.
За вас никто не будет это делать, учите css и если спрашиваете то хотя бы пользуйтесь советами которые вам дают.
Вот пример меню о котором я говорил ранее, сделанный на основе вашего:
Код:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>under construction</title>
<style type="text/css">
.nav ul{
padding:0;
}

.nav ul li{
list-style:none;
display:inline;
margin-right:10px;
}

a{
outline:none;
}

.nav a span{
padding:5px 8px;
border:1px solid #000;
}
</style>
</head>
<body>
	<div id="global_div" align="center">
		<div id="menu_div">
			<div class="nav">
				<ul>
					<li><a href="#"><span>кнопка 1</span></a></li>
					<li><a href="#"><span>кнопка 2</span></a></li>
					<li><a href="#"><span>кнопка 3</span></a></li>
				</ul>
			</div>
			
			<div id="text">  текст </div>
			
		</div>
	</div>
</body>
</html>
Со мной бог и два пулемёта
Paladast вне форума Ответить с цитированием
Старый 10.12.2010, 02:13   #17
zlo_999
Форумчанин
 
Аватар для zlo_999
 
Регистрация: 11.10.2010
Сообщений: 116
По умолчанию

Paladast, благодарю!

просто Вы написали:
Цитата:
"Проще было, если бы вы просто выложили исходники."
Собственно поэтому и решился выложить исходники. Или я Вас не так понял? Извиняюсь тогда.

Все рекомендации сохранил и изучаю и тормозов в изучении нет нигде, кроме как со свойством марджин. если бы гугл\яндекс и литература отвечали полно по этому свойству, я бы не задал вопрос здесь. увы, не отвечают.

Именно благодаря пользованию советам, я подключил отдельно стили для IE 6,7,8 а также FF & opera. Приношу извинения, если не догадался везде в комментах к коду подписать где какой-совет используется из данной темы использовал.

вопрос без изменений:

благодаря чему значения заданные margin отображаются на одних-и тех же координатах точных во всех браузерах?

Возможно есть какие-либо стандартные процедуры, которые каждый верстальщик прописывает в коде, для марджина? или нет? может быть сброс отступов, обнуление? или доктайп какой-то универсальней?

можно, конечно, тыбзить простейшие разметки страниц и редактировать их и всё упрощалось бы но, я хочу действительно понимать что откуда растет, почему и как работает. хочу научиться.
zlo_999 вне форума Ответить с цитированием
Старый 10.12.2010, 02:19   #18
Paladast
Пользователь
 
Аватар для Paladast
 
Регистрация: 09.08.2009
Сообщений: 66
По умолчанию

1.
Цитата:
"Проще было, если бы вы просто выложили исходники."
Я имел ввиду выложили бы сразу.
2.
Цитата:
кроме как со свойством марджин. если бы гугл\яндекс и литература отвечали полно по этому свойству, я бы не задал вопрос здесь.
Уже писал, вам сюда http://htmlbook.ru/css/margin
3.
Цитата:
благодаря чему значения заданные margin отображаются на одних-и тех же координатах точных во всех браузерах?
Не понял вопроса, старайтесь формулировать четче.
Со мной бог и два пулемёта
Paladast вне форума Ответить с цитированием
Старый 10.12.2010, 02:37   #19
zlo_999
Форумчанин
 
Аватар для zlo_999
 
Регистрация: 11.10.2010
Сообщений: 116
По умолчанию

Цитата:
Не понял вопроса, старайтесь формулировать четче.
Хорошо, я попрактикуюсь с марджином больше и если упрусь на очередной косяк который сам не смогу решить с гуглом, отпишусь и вымещу код, так будет лучше.

p.s. в коде в посте #16 всё отображается хорошо в ИЕ 8 и мозилле 3.6 и 2 но...

- в опере 9 и 10 и сафари - отсутствует "отступ" сверху, который присутствует в ИЕ 8 и ФФ 3 и 2.

- в ИЕ 6 дивы значительно меньше чем во всех остальных браузерах..

пробывал дописать margin-top и margin-bottom - ноль эффекта.
zlo_999 вне форума Ответить с цитированием
Старый 10.12.2010, 02:47   #20
Paladast
Пользователь
 
Аватар для Paladast
 
Регистрация: 09.08.2009
Сообщений: 66
По умолчанию

Что б такого не было в css пишут
Код:
*{
margin:0;
padding:0;
border:0;
}
Также семейство IE имеет уникальное количество багов, к примеру ИЕ6 по другому считает расстояния от блоков в отличи от других браузеров, есть известный баг с double margin вплоть до того что у браузеров по разному отображаются шрифты.

Повторюсь, за вас никто ничего делать не будет и учить вряд ли кто то возьмется, задавайте конкретный вопрос, получите конкретный ответ.
Удачного обучения.
Со мной бог и два пулемёта
Paladast вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Верстка в 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