Смещается горизонтальное меню вниз в Opere

Newbie · September 1, 2010

Сделал шапку и горизонтальное меню.

Во всех броузерах (Ghrome,IE,Ffox) отображается как и задумывалось ровно, а в opere смещается вниз

во всех броузерах кроме oпeры:

в опере:

html-код:

 

<body>

   <div id="header-null">
				<div id="header">
						<div id="rosa">	   
						   <h1>Розы</h1>
						   <span>искуственные</span>
						</div> 
			   </div>


				 <div id="navigation">	   
					  <div id="mymenu">
						   <a href="#">Главная</a>
						   <a href="#">Цветы</a>						  
						   <a href="#">Контакты</a>		   
					  </div>	   
				 </div>	  

  </div>


</body>

сss-код:

 

a		 {text-decoration: none}
a:link	{color: #f83a5a}
a:visited {color: #f83a5a}
a:active  {color: #f83a5a}
a:hover   {color: #a0182e}


body {
font: 13px/18px Arial, Helvetica, sans-serif;
margin : 0 0 0 0;
}

/**  шапка **/

#header-null {

	 background:url(background.png)  0 0 repeat-x;  
	 width: 100%;  
	 border: 3px solid blue;	
	 padding-right: 20px;
}

#header  {
	  width : 100%;
	  height : 128px;  
	  float: right;
	  background : url(img/rose.png) no-repeat right top;
	  border: 2px solid yellow;
	  }



#rosa  {
	 padding: 10px;
	 height: 110px;
	 font-size: 120%;
	 color: #fff;
	 margin : 37px 0 0 81px;
}
#rosa h1 {
  font-size: 165%;
  border: 0px solid black;
  margin-bottom: 18px;
}



/** навигация **/

#navigation {
	  background: #ececec;
	  border: 0px solid black;
	  width: 100%;
	  clear: both;
	  margin-top: -17px;
	  }


#mymenu {
	 padding: 5px;
	 border-bottom: 0px solid #b7b7b7;
	 clear : both; 
	 margin-left :190px; 
	 height: 20px;
}

#mymenu a {

	  padding-left: 15px;
	  padding-right: 15px;
	  font-weight: bold;
	  padding-top: 5px;
	  padding-bottom: 7px;
}

#mymenu a:hover {
	  background: #f6f6f6;
}

/** конец навигации**/
/**  и конец шапки **/

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

Или, возможно, у меня структурно неправильный подход.

swetlana · September 1, 2010

Казалось бы, простейшая задача.

Но и здесь умудрились намудрить.

Скажите пожалуйста, может я действительно чего не понимаю, но зачем делать блоку #header высоту больше, чем надо, а затем блок #navigation придвигать на место отрицательным маргином?

Почему-то не удивительно, что в таких нагромождениях возникают ошибки.

нате вот: ничего нигде не смещается. Посмотрите в код и сравните.

Вообще, как показывает практика, около 95% бед от того, что нагромождается лишнее. Вот кто не хочет делать проще, тот и получает соответствующий результат: баги на ровном месте.

Edited September 2, 2010 by swetlana

Newbie · September 2, 2010

Спасибо Большое.

Сейчас буду разбираться

P.S. Всё четко, но зачем яваскрипт? Уж очень бы хотелось сделать всё без яваскрипта

Edited September 2, 2010 by Newbie

Newbie · September 2, 2010

Странно

Скопировал у Вас "Вашу версию моего сайта"

Запускаю...

Во всех броузерах загружаются стили а в IE такая картина:

хотя по вышеуказанной вами ссылке на Вашем сайте работает в IE

Edited September 2, 2010 by Newbie

swetlana · September 2, 2010

Newbie, а яваскрипт там исключительно для поддержки html5 в безнадёжно устаревших и отсталых браузерах. В нормальных он даже не подключается. В принципе это из кода очевидно. А для IE он просто создаёт незнакомые ему элементы. В данном случае можно было не универсальным скриптом пользовтаься, а обойтись простеньким

document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');

Хотите совсем без яваскрипта — не вопрос. Пишете по старому стандарту, например xhtml 1.0, и скрипт не нужен.

В минусах по большому счёту только некрасивый код и некоторые неоправданные ограничения спецификации.

Во всех броузерах загружаются стили а в IE такая картина:

ничего странного.

Вы забыли файл /js/html5shiv.js.

Без него естественно в IE такой бардак. Либо докопируте уж и его, либо добавьте те три строчки из моего предыдущего поста, либо используйте старинную спецификацию.

psywalker · September 2, 2010

Свет, а я не понял, зачем нужен вообще этот файл ЖС? Ведь по идее он просто присваивает блокам ID?

Newbie · September 2, 2010

Свет, а я не понял, зачем нужен вообще этот файл ЖС? Ведь по идее он просто присваивает блокам ID?

Да вот именно . Я и его скопировал, но все равно для IE стили не применились

Edited September 2, 2010 by Newbie

swetlana · September 2, 2010

Нет, Макс, чуть забавнее всё.

Во-первых, такой js нужен только для IE версии 8 и ниже, чтобы он сумел отобразить страницу, написанную на html5.

Что делает браузер, когда встречает незнакомый элемент? Он полагает так: это элемент, он обладает всеми признаками нормального элемента, просто я такого не знаю, что ж, буду отображать.

Что делает IE, когда встречает незнакомый элемент: фи! это несовместимая со мной хрень! Не буду я это отображать.

И вот для того, чтобы IE так не выделывался, мы ему и пишем:

document.createElement('новый_элемент');

И после этого он уже знает такой элемент и не артачится.

Newbie, а где посмотреть на результат трудов?

Наверняка ошибка какая-то глупая мелочёвая типа неверных путей например.

Edited September 2, 2010 by swetlana

psywalker · September 2, 2010

Нет, Макс, чуть забавнее всё.
Во-первых, такой js нужен только для IE версии 8 и ниже, чтобы он сумел отобразить страницу, написанную на html5.
Что делает браузер, когда встречает незнакомый элемент? Он полагает так: это элемент, он обладает всеми признаками нормального элемента, просто я такого не знаю, что ж, буду отображать.
Что делает IE, когда встречает незнакомый элемент: фи! это несовместимая со мной хрень! Не буду я это отображать.
И вот для того, чтобы IE так не выделывался, мы ему и пишем:
document.createElement('новый_элемент');
И после этого он уже знает такой элемент и не артачится.

Да, но смотри. Выходит, что ты создаёшь дополнительный элемент, а старые тогда куда деваются?

Great Rash · September 2, 2010

Еще рекомендуют для всех этих вновь созданных элементов display: block; назначать...

Newbie · September 2, 2010

Newbie, а где посмотреть на результат трудов?

Пожалуйста

файл index.htm

 <!DOCTYPE html>
<html>
<head>
	<title>всё ведь везде работает</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<!--[if lte IE 8]><script src="/js/html5shiv.js"></script><![endif]-->
	<style type="text/css" >
		@import url(rose.css);  
	</style>
</head>

<body>
<header>
	<hgroup class="sitetitle">
		<h1>Розы</h1>
		<h2>искусственные</h2>
	</hgroup>
	<nav>
		<ul>
			<li><a href="">Главная</a></li>
			<li><a href="">Цветы</a></li>
			<li><a href="">Контакты</a></li>
		</ul>
	</nav>
</header>
</body>
</html>

файл стилей rose.css тоже скопировал в папку с indexом

и на скрине видно, что вроде бы все файлы имеются

swetlana · September 2, 2010

Да, но смотри. Выходит, что ты создаёшь дополнительный элемент, а старые тогда куда деваются?

А почему они должны куда-то деваться? Где были, там и остаются.

Еще рекомендуют для всех этих вновь созданных элементов display: block; назначать...

Это по необходимости.

В данном случае display: block просто записан в css, в реальных проектах всё равно используется обнуление стилей, так можно туда записать display.

А потом не все же из новых элементов блочные. Приведённый в этой теме пример является весьма частным случаем.

Newbie, а вот эта папочка, что на скрине, является корнем сервера?

Newbie · September 2, 2010

Newbie, а вот эта папочка, что на скрине, является корнем сервера?

Нет

А можно как-то попроще,- чтобы без ЖС?

Great Rash · September 2, 2010

А можно как-то попроще,- чтобы без ЖС?

Забейте на HTML5 или на ИЕ.

Newbie · September 2, 2010

Забейте на HTML5 или на ИЕ.

такой вариант никатит

Great Rash · September 2, 2010

Тогда без скрипта никак.

Newbie · September 2, 2010

тоже никатит

(т.к. не у всех включен яваскрипт)

Edited September 2, 2010 by Newbie

psywalker · September 2, 2010

А я не понял, нахрена тебе HTML5 ?

Newbie · September 2, 2010

Точно. Сейчас попробую сделать <divами>

(вместо nav header hgroup)

Edited September 2, 2010 by Newbie

Newbie · September 2, 2010

Работает

Спасибо, Ребята!

Позаменял на дивы три вышеуказаных элемента html5

вот он код

<!DOCTYPE html>
<html>
<head>
	<title>всё ведь везде работает</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />	
<!--	<style type="text/css" >
	 	@import url(rose.css);  
	</style>  -->
	<link rel="stylesheet" href="rose.css" type="text/css" media="screen" />
</head>

<body>
<div id="header">
	<div id="hgroup">
		<h1>Розы</h1>
		<h2>искусственные</h2>
	</div>
	<div id="nav">
		<ul>
			<li><a href="">Главная</a></li>
			<li><a href="">Цветы</a></li>
			<li><a href="">Контакты</a></li>
		</ul>
	</div>
</div>
</body>
</html>

и в css произвел аналогичную замену (header на #header)

Newbie · September 2, 2010

Но только Светлана сделала по хитрому

Она убрала мой фонофый рисунок шириной в 1px

и вместо него указала фоновый цвет:

#header {

display: block;

background: #765D11 url(rose.gif) right 1em no-repeat;

}

а интересует можно ли сделать, чтобы не указывать фоновый цвет, а использовать в качестве фона рисунок, сохранив также изображение в правой части (в данном случае розу)?

psywalker · September 2, 2010

Можно один рисунок повесить на херед, а второй на <div id="hgroup">

swetlana · September 2, 2010

Нет
А можно как-то попроще,- чтобы без ЖС?

Читайте внимательнее мои сообщения. Там всё сказано.

Но только Светлана сделала по хитрому
Она убрала мой фонофый рисунок шириной в 1px
и вместо него указала фоновый цвет:
#header {
display: block;
background: #765D11 url(rose.gif) right 1em no-repeat;
}
а интересует можно ли сделать, чтобы не указывать фоновый цвет, а использовать в качестве фона рисунок, сохранив также изображение в правой части (в данном случае розу)?

во первых зачем равномерный фон делать рисунком?

Да даже если градиент там будет, то всё равно рисунки не нужны, всё в css делается.

во вторых кто мешает для разных элементов указать разные фоны?

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

Newbie · September 2, 2010

во первых зачем равномерный фон делать рисунком?

в данном случае на самом деле рационально указать фону цвет #765D11 как Вы и говорите (нерационально использовать рисунок), всё правильно.

Да я просто подумал, что если понадобится использовать в качестве градиент или фон в полосочку. как Вы сделаете фоном градиент без картинки в 1px?

Вы говорили:

Да даже если градиент там будет, то всё равно рисунки не нужны, всё в css делается.

Интересно как это сделать только с помощью одного css

Можно один рисунок повесить на херед, а второй на <div id="hgroup">

Так и сделал

но заметил, что надо обязательно указать высоту для #hgroup {

height : px; }

если её не указать, то блок будет иметь размер в высоту равный высоте блока

<div id="hgroup">
		<h1>Розы</h1>
		<h2>искусственные</h2>
</div>

с учетом его падингов

Edited September 2, 2010 by Newbie

swetlana · September 2, 2010

в данном случае на самом деле рационально указать фону цвет #765D11 как Вы и говорите (нерационально использовать рисунок), всё правильно.
Да я просто подумал, что если понадобится использовать в качестве градиент или фон в полосочку. как Вы сделаете фоном градиент без картинки в 1px?
Вы говорили:
Интересно как это сделать только с помощью одного css

примерно так

Так и сделал
но заметил, что надо обязательно указать высоту для #hgroup {
height : px; }
если её не указать, то блок будет иметь размер в высоту равный высоте блока
<div id="hgroup">
		<h1>Розы</h1>
		<h2>искусственные</h2>
</div>
с учетом его падингов

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

Newbie · September 2, 2010

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

Возможно в общем да, но в моем случае без height высота шапки уменьшится, как я выше заметил, на незапланированную величину. И хоть я и подозреваю, что указывать явно высоту блока было возможно неправильно, но если Вы знаете какой-нибудь вариант, то подскажите.

Очень не хочется использовать яваскрипт и прочие сложности, когда в этом нет надобности.

Sign In

Смещается горизонтальное меню вниз в Opere

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information