Я пишу веб-сайт для некоторых друзей, где я использую ddsmoothmenu для выпадающих меню. НО теперь это странный интервал между заголовком и верхней частью тела, и он появляется только на некоторых страницах. Это очень странно, и при проверке через параметры разработчика chromes, я просто не могу найти причину такого пробела. Кстати, я использую 960 GS. Градиент заголовка - это фоновое изображение тела.
EDIT
Теперь я знаю, в чем проблема. Все в теге head перемещается в тело, на страницах со странным интервалом. Понятия не имею почему или как.
Никаких странных интервалов, как и должно быть.
http://i.imgur.com/5cL7W.jpg
Странный интервал!
http://i.imgur.com/7Gldl.png
Вот визуализированный источник одной из страниц без ошибки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="image/png" href="img/favicon.ico" />
<title>Armilla - Forside</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=960">
<!--////////////////////
//Imports - JS and CSS//
/////////////////////-->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel='stylesheet' id='style-css' href='css/diapo.css' type='text/css' media='all'>
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu-v.css" />
<script type='text/javascript' src='js/jquery.min.js'></script>
<!--[if !IE]><!--><script type='text/javascript' src='js/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]-->
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/diapo.js'></script>
<script type='text/javascript' src='js/ddsmoothmenu.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--///////
//Init JS//
////////-->
<script>
ddsmoothmenu.init({
mainmenuid: "menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
});
</script>
</head>
<body>
<div id="header" class="container_12">
<div id="logo" class="grid_5">
<a href="index.php">
<img src="img/logo.png" width="226" height="65"/>
</a>
</div>
<div id="nav" class="grid_7">
<div id="menu" class="ddsmoothmenu">
<ul>
<li id="prodli"><a href="?p=products"><img src="img/produkter.png"/></a>
<ul style="z-index: 1;">
<li><a href="?p=prod$type="Armb�nd">Armb�nd</a></li><li><a href="?p=prod$type="Overlevelsesudstyr">Overlevelsesudstyr</a></li> </ul>
</li>
<li><a href="?p=armilla"><img src="img/armilla.png"/></a></li>
<li><a href="?p=news"><img src="img/nyheder.png"/></a></li>
<li><a id="lasta" href="?p=contact"><img src="img/kontakt.png"/></a></li>
</ul>
<br style="clear: left" />
</div>
</div>
</div>
<section>
<div style="overflow:hidden; width:960px; margin: auto auto; padding:0 20px;">
<div class="pix_diapo">
<div data-thumb="img/thumbs/megamind_07.jpg">
<img src="img/slides/megamind_07.jpg">
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ccc; text-transform:uppercase">
Armilla
</div>
<div class="caption elemHover fromLeft" style="padding-top:5px;">
Verdensklasses overlevelsesudstyr.Tjek vores nye <a href="?p=products">produkter</a> ud
</div>
</div>
<div data-thumb="img/thumbs/wall-e.jpg" data-time="7000">
<img src="img/slides/wall-e.jpg">
<div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;">
You can also get the same effect as the caption with:
</div>
<div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">
A button
</div>
<div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">
Or two buttons
</div>
<div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(img/demo/arrow_caption.png) no-repeat 230px 30px">
Or any other html element...<br>
and you can decide the transition time of any slide
</div>
</div>
<div data-thumb="img/thumbs/up-official-trailer-fake.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="img/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0">
You can also display videos, but it requires a "fake image"... read the documentation please
</div>
</div>
</div><!-- #pix_diapo -->
</div>
</section>
<script>
$(function(){
$(".pix_diapo").diapo();
});
</script>
<div id="footer" class="container_12">
<div style="text-align:center; color:#333333;" id="copyright" class="grid_12">
<p>Copyright 2012 © - Armilla.dk - Alle rettigheder forbeholdt Armilla - <a href="?p=admin">Kontrolpanel</a> - <a href="?p=logout">Log ud</a> <br />Webdesign af <a href="http://www.doweb.dk" target="_blank">DoWEB</a></p>
</div>
</div>
</body>
</html>