Отстык=пы в меню

Zeeeya · November 24, 2011

Здравствуйте! Помогите, пожалуйста, разобраться с отступами в меню.

При задании для текста меню padding-top:10px;

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

И еще не могу понять, откуда появислся отступ в хроме и эксплорере сверху шапки сайта.

Высота блока меню и хедера задана такаяже, как изображения.

На всякий случай код:

index.php

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="head" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link href="index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>

<link rel="icon" href="/templates/persik/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/templates/persik/favicon.ico" type="image/x-icon" />

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/menu.css" type="text/css" />
<?php

if($this->countModules('left and right') == 0) $contentwidth = "100";

if($this->countModules('left or right') == 1) $contentwidth = "80";

if($this->countModules('left and right') == 1) $contentwidth = "60";

?>
</head>
<?php
  //$Itemid = JRequest::getInt( 'Itemid', 1, 'get' );
  //echo $Itemid;
?>
<body>
<!--оформление страницы сайта-->
<div id="wrap">
		<!--блок шапки сайта header -->
		<div id="header">
			<jdoc:include type="modules" name="top" style="xhtml" />
</div>

		<!--вывод модуля горизонтального меню в позиции user2-->
		<div id="topmenu" align="center">
	          <jdoc:include type="modules" name="user2" style="xhtml" />
		</div>
<!--вывод содержимого страницы-->
		<div id="pole">
<!--вывод модуля языков в позиции user3-->	  
		      <div id="user3">
	    <jdoc:include type="modules" name="user4" style="xhtml" />
	   </div> 

<!--вывод модуля верхней навигации в позиции user4-->	  
		      <div id="user4">
	    <jdoc:include type="modules" name="user3" style="xhtml" />
	   </div> 

<!--вывод модуля контактов в позиции user5-->	  
		      <div id="user5">
	    <jdoc:include type="modules" name="user5" style="xhtml" />
	   </div> 


<!--вывод содержимого контента-->
			<div id="content">
	              <jdoc:include type="component" style="xhtml" />
		  	</div>
</div>

<!--вывод сведений модуля с информацией об авторских правах в позиции footer -->
	<div id="bottom">
		<jdoc:include type="modules" name="bottom" style="xhtml" /
<p>Copyright: "Persik Bis Smak",2011
		<p>Web design: <a href="malito: Ramus20@yandex.ru"> Ramus20@yandex.ru </a>




	</div>
          </div>

</body>
</html>

template.css

* {
margin:0;
padding:0;
}

/*стандартные оформление ссылок и заголовков*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}
/*оформление всех ссылок на сайте*/
a{
  text-decoration: underline;
  color:#759b14 ;
}
/*непосещенная ссылка*/
a:link{
  text-decoration: underline;
  color: #759b14;
}
/*посещенная ссылка*/
a:visited, a.visited{
  color:#759b14;
}
/*ссылка при наведении*/
a:hover, a.hover{
  text-decoration: none;
  color: #b75554;
}

/*заголовки 1 уровня*/
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover{
font:bold 18px Arial, Helvetica, sans-serif ;
font-style:italic;
color: #759b14;
text-align:center;
}
/*заголовки 2 уровня*/
h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover{
  font-size:bold 16px;
  color: #0c3e29;
  font-style:italic;
text-align:center;
}
/*заголовки 3 уровня*/
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover{
  font-size: 18px;
  color: #80a218;
  text-align:center;
}
/*заголовки 4-6 уровня*/
h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover,h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover,h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover{
  font-size: 125%;
  color: #3b98b0;
}
/*оформление изображений в контенте*/
img {
	border: 2px double #b8c97b; /* Параметры границы */
}
p img {
margin-right:10px;
}

/*оформление абзацев текста*/
p {
	margin: 5px 0 10px 0x;
}

LI {
    color: #265239; /* Цвет маркеров */
   }

/*оформление заднего плана и форматирование текста сайта и межстрочного расстояния*/
body {
background-color:#c1dc77;
margin:0 auto;
padding:0;
  font-family:Arial, Helvetica, sans-serif ;
  line-height:1.3;
color: #3d6a55;

}

#wrap{
width: 1006px;
margin:0 auto;
overflow: hidden;
}

#header {
background: url(../images/header.jpg) no-repeat;
width:1006px;
height: 231px;
margin:0 auto;
}




#pole{
overflow: hidden;
background: url(../images/fon.jpg) repeat-y;

}

#user3{
margin:0 25px;
height: 50px;

}


#user4{
text-align:center;
margin:0 25px 0 25px;
height: 40px;
font-size:50px;
font-style: bold;
}

#user5{
margin:0 25px 0 25px;


}


#content {

margin:0 25px 0 65px;
width: 900px;
padding:5px 0 0 0px;
text-align:left;
overflow: hidden;



}

#bottom {
background: url(../images/bottom.jpg) no-repeat;
width:1006px;
height: 154px;
margin:0 auto;
padding-bottom: 35px;
padding-top: 50px;
text-indent: 16em; /* Отступ первой строки */
color: #3d6a55;
font-size: 12px;}
a.visited {
color: #ffffff;
}

menu.css

/*оформление блока меню*/

#topmenu{
background: url(../images/menu_fon.jpg) no-repeat;
width:1006px;
height: 54px;

text-indent:10px;
padding-top:10px;

}
.moduletable-tabs ul li {

 margin-left:10px;
  overflow:hidden;
  margin-top:3px;
}

.moduletable-tabs a 
{color: #365617;
text-decoration:none;
font: bold italic 14px Georgia;
margin-left:5px;

}

.moduletabletabs a:hover{
color:#e98f8e;
text-decoration:underline;
font: bold italic 14px Georgia;
margin-left:5px;

}

Очень жду помощи! :rolleyes:

Svatov · November 24, 2011

При задании поля в меню 10px, следует отнять это же значение от высоты меню. height:54px; так как суммарное значение высоты включает себя отступы, поля, границы и содержимое...в вашем случае вы добавили поля

А пустое поле выше шапки уж очень похоже на ситуацию с UTF8+BOM, но это так на глаз...лучше была бы ссылка на сайт.

Если да, то вам нужно пересохранить документ в UTF8 без BOM

Edited November 24, 2011 by Svatov

Zeeeya · November 24, 2011

При задании поля в меню 10px, следует отнять это же значение от высоты меню. height:54px; так как суммарное значение высоты включает себя отступы, поля, границы и содержимое...в вашем случае вы добавили поля

а при уменьшении в Эксплорере менюшка обрезается.

А пустое поле выше шапки уж очень похоже на ситуацию с UTF8+BOM, но это так на глаз...лучше была бы ссылка на сайт.
Если да, то вам нужно пересохранить документ в UTF8 без BOM

вот сайт: http://persikmops.ru/

Какой именно документ? Сайт на движке, много файлов. Индекс?

Спасибо большое за подсказки!

Edited November 24, 2011 by Zeeeya

Svatov · November 24, 2011

Поставьте DOCTYPE для документа соответственный и будет ок в IE...обратите внимание на мета теги которые вставляли в неизвестной кодировке...смотрите те документы в которых вы вносили изменения

Zeeeya · November 25, 2011

Svatov, спасибо Вам!

Мета-теги поправила, а вот с доктайпом не разберусь, оказалось, его вообще не было...

Добавила вот такой: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - не работает....

Svatov · November 25, 2011

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

Edited November 25, 2011 by Svatov

Sign In

Отстык=пы в меню

Question

Zeeeya

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Svatov

Link to comment

Share on other sites

Zeeeya

Link to comment

Share on other sites

Svatov

Link to comment

Share on other sites

Zeeeya

Link to comment

Share on other sites

Svatov

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information