当前位置： 文江博客话题详情

ddsmoothmenu 中标题上方的空格

发布于 2024-12-29 20:56:32 字数 7328 浏览 0 评论 0原文

我正在为一些朋友编写一个网站，我使用 ddsmoothmenu 作为下拉菜单。但是现在标题和正文顶部之间有一个奇怪的间距，并且它只出现在某些页面上。这很奇怪，并且当通过chrome开发者选项检查它时，我根本找不到这个间距的原因。顺便说一句，我用的是 960 g。标题渐变是正文背景图像。

编辑

我现在知道问题是什么了。 head 标签中的所有内容都被移动到 body 中，在页面上有奇怪的间距。我不知道为什么或如何。

没有奇怪的间距，正如它应该的那样。 https://i.sstatic.net/fuQMK.jpg

奇怪的间距！ https://i.sstatic.net/u5zQB.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 &copy; - 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>
原文

i'm coding a website for some friends where i'm using ddsmoothmenu for dropdowns.. BUT now it there's a weird spacing between the header and top of the body, and it only appears on some pages.. It is very weird, and when checking it out through chromes developer options, i simple cannot find the reason for this spacing. BTW, i'm using 960 gs. The header gradient is body background image.

EDIT

I now know WHAT the problem is. Everything in the head tag gets moved into body, on the pages with weird spacing. I have no idea why or how.

No weird spacing, exactly as it should be.
https://i.sstatic.net/fuQMK.jpg

Weird spacing!
https://i.sstatic.net/u5zQB.png

Here is the rendered source of one of the pages without the error:

<!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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

情话已封尘 2025-01-05 20:56:32

这可能是一个空白问题，您的 html、css 在纸上看起来不错（在 chrome 开发人员中），但没有按应有的方式解释。为了检测是否确实如此，我会丑化我的 html 并删除 html 问题区域中的所有空白。

如果事实证明这是真的，这里有针对此主题的各种方法，尽管大多数方法它们有一些小缺点（长而丑陋的 html 行、不必要的注释、不常见的换行符，..）。

It might be an white-space issue, where your html, css looks good on paper (in chrome developer), but isn't interpreted as it should be. To detect, if this is really the case, I would uglify my html and strip all whitespace in the html problem area.

If it turns out to be true, here are various approaches to this topic, even though most of 'em have small drawbacks (long uglified html lines, unnecessary comments, uncommon line breaks, ..).

回复 原文
入怼 2025-01-05 20:56:32

将我的 index.php 转换为 UTF-8 Without BOM 后，空格问题就消失了。所以我现在是一个快乐的露营者了！ :D

我发现这篇文章关于使用 Notepad++ 时在 Wordpress 中出现的相同问题。
http://wordpress.org/support/topic/head -scriptslinks-showing-up-inside-body-tag

After converting my index.php to UTF-8 Without BOM the whitespace issue dissappeared. So i'm a happy camper now! :D

I found this post about the same problem appearing in Wordpress when using Notepad++.
http://wordpress.org/support/topic/head-scriptslinks-showing-up-inside-body-tag

回复 原文
~没有更多了~

关于作者

浪漫之都

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

紫罗兰の梦幻

文章 0 评论 0

-2134

文章 0 评论 0

liuxuanli

文章 0 评论 0

意中人

文章 0 评论 0

○愚か者の日

文章 0 评论 0

xxhui

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文