javascript - 顶部栏正文位置太低的 html

标签 javascript html css

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 9 年前。

Improve this question

背景:

我正在制作一个带有顶部栏(菜单)的简单 html 页面，但出现了一个问题:

The text in [body] was too low.

代码:

topbar.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="css/dropdown/themes/mtv.com/images/favicon.ico" />
<link href="css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/mtv.com/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/horizontal-centering.css" media="all" rel="stylesheet" type="text/css" />
<div class="wrapper">
    <div class="container">
        <div class="horizontal-centering"><div><div>
            <ul id="nav" class="dropdown dropdown-horizontal">
                <li>
                    <a>Home</a>
                </li>
                <li><a>About</a>
                <ul>
                    <li><a>Contact</a></li>
                    </ul>
                </li>
            </ul>

        </div></div></div></div></div>
</head>


<body>hello   
</body>
</html>

下拉.css:

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file        dropdown.css
 * @package     Dropdown
 * @version     0.8
 * @type        Transitional
 * @stacks      597-599
 * @browsers    Windows: IE6+, Opera7+, Firefox3+
 *              Mac OS: Safari2+, Firefox3+
 *
 * @link        http://www.lwis.net/free-css-drop-down-menu
 * @copyright   2008-2012 Live Web Initiatives, http://www.lwis.net, http://www.lwis.net
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

默认.css:

@charset "UTF-8";

/** 
 * MTV.com CSS Drop-Down Menu Theme
 *
 * @file        default.css
 * @name        MTV
 * @version     0.1
 * @type        transitional
 * @browsers    Windows: IE6+, Opera7+, Firefox3+
 *              Mac OS: Safari2+, Firefox3+
 *
 * @link        http://www.lwis.net/free-css-drop-down-menu
 * @copyright   2008-2012 Live Web Initiatives, http://www.lwis.net
 *
 */


/* -- Base drop-down styling -- */

ul.dropdown {
 font: bold 17px/normal Arial, Helvetica, sans-serif;
}

    ul.dropdown li {
     padding: 5px;
     background-color: #333;
     color: #fff;
    }

    ul.dropdown a:link,
    ul.dropdown a:visited { color: #fff; text-decoration: none;}
    ul.dropdown a:hover {
     border-top-color: #5db1e0 !important;
     border-left-color: #5db1e0;
     background-color: #4498c7;
     color: #fff;
    }

    ul.dropdown ul a.dir:hover {
     background-color: #4698ca;
     background-image: url(../../../../images/mtv.com/comnav-arrowon.png);
     color: #fff;
    }

    ul.dropdown a:active {
     background: #058acf url(../../../../images/mtv.com/nav-sub-press.png) 0 0 repeat-x !important;
     color: #fff;
    }

    /* -- level mark -- */

    ul.dropdown ul {
     left: auto;
     right: 0;
     width: 150px;
     margin-top: -1px;
     border-top: 1px solid #1a1a1a;
     border-left: solid 1px #4c4c4c;
     font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif;
    }

        ul.dropdown ul li {
         background-color: #3a3a3a;
        }

        /* -- level mark -- */

        ul.dropdown ul ul {
         top: 0;
         right: auto;
         left: 100%;
         margin-top: 0;
         border-top: none;
         border-left: none;
         font-weight: normal;
        }

            ul.dropdown ul ul li {
             background-color: #4c4c4c;
            }

            /* -- level mark -- */

                ul.dropdown ul ul ul li {
                 background-color: #595959;
                }


/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 30px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

    /* -- level mark -- */

    ul.dropdown ul *.dir {
     padding-right: 15px;
     background-image: url(../../../../images/mtv.com/nav-arrow-right.png);
     background-position: 100% 50%;
     background-repeat: no-repeat;
    }

    ul.dropdown ul ul *.dir {
     background-image: url(../../../../images/mtv.com/nav-arrow-right2.png);
    }


/* -- Components override -- */

ul.dropdown-vertical *.dir {
 background-image: url(../../../../images/mtv.com/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 15px;
 background-image: url(../../../../images/mtv.com/nav-arrow-left.png);
 background-position: 0 50%;
}


/* -- Mixed -- */

ul.dropdown li a,
ul.dropdown *.dir {
 border-style: solid;
 border-width: 1px;
 border-color: #404040 #1a1a1a #1a1a1a #505050;
}

ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }

ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }

ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }


/* -- Custom elements -- */

#n-movies { width: 250px; text-align: center; }
#n-movies ul { right: auto; left: 0; width: 249px; text-align: left; }
#n-movies ul ul { left: 249px; width: 150px; }
#n-movies ul a { width: 232px; }
#n-movies ul a.dir { width: 210px; }
#n-movies ul ul a { width: 133px; }
#n-movies ul ul a.dir { width: 111px; }
#n-movies ul ul ul { left: 100%; }

默认.advanced.css:

@charset "UTF-8";

/** 
 * MTV.com Advanced CSS Drop-Down Menu Theme
 *
 * @file        default.advanced.css
 * @name        MTV.com
 * @version     0.1
 * @type        transitional
 * @browsers    Windows: IE6+, Opera7+, Firefox3+
 *              Mac OS: Safari2+, Firefox3+
 *
 * @link        http://www.lwis.net/free-css-drop-down-menu
 * @copyright   2008-2012 Live Web Initiatives, http://www.lwis.net
 *
 */

@import "default.css";


/* -- Base style extension -- */

ul.dropdown li a {
 display: block;
 padding: 5px 30px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
}

ul.dropdown ul a {
 padding: 8px;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown *.dir { /* POI */
 padding: 5px 30px;
}

ul.dropdown ul *.dir {
 padding: 8px 30px 8px 8px;
}


/* -- Custom -- */

ul.dropdown ul li.dir ul {
 margin-top: -1px ;
 margin-left: 1px;
}


/* -- Roll-overs -- */

ul.dropdown li.hover,
ul.dropdown li:hover {
 border-top-color: #5b5b5b;
 background-color: #3d3d3d;
}

    ul.dropdown ul li.hover,
    ul.dropdown ul li:hover {
     background: #4c4c4c url(../../../../images/mtv.com/comnav-arrowover.png) 100% 50% no-repeat;
    }

        ul.dropdown ul ul li.hover,
        ul.dropdown ul ul li:hover {
         background: #595959 url(../../../../images/mtv.com/comnav-arrowover2.png) 100% 50% no-repeat;
        }


/* -- Drop-down open -- */

ul.dropdown ul li:hover > a.dir {
 border-top-color: #5b5b5b;
 background-image: url(../../../../images/mtv.com/comnav-arrowover.png);
}

ul.dropdown ul ul li:hover > a.dir { /* (?) merge with ul.dropdown ul a.dir:hover */
 border-top-color: #595959;
 background: #595959 url(../../../../images/mtv.com/comnav-arrowover2.png) 100% 50% no-repeat;
 color: #fff;
}

/* POI: Override upper two definitions */
ul.dropdown ul li:hover > a.dir:hover { /* (?) merge with ul.dropdown ul a.dir:hover */
 background: #4698ca url(../../../../images/mtv.com/comnav-arrowon.png) 100% 50% no-repeat;
 color: #fff;
}

默认.ultimate.css:

@charset "UTF-8";

/** 
 * MTV.com Ultimate Horizontal CSS Drop-Down Menu Theme
 *
 * @file        default.ultimate.css
 * @name        MTV.com
 * @version     0.1
 * @type        transitional
 * @browsers    Windows: IE7+, Opera7+, Firefox3+
 *              Mac OS: Safari2+, Firefox3+
 *
 * @link        http://www.lwis.net/free-css-drop-down-menu
 * @copyright   2008-2012 Live Web Initiatives, http://www.lwis.net
 *
 */

@import "default.css";


/* -- Base style extension -- */

ul.dropdown a,
ul.dropdown span {
 display: block;
 padding: 5px 30px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
}

ul.dropdown ul a,
ul.dropdown ul span { /* POI: override abstract a, span */
 padding: 8px;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown *.dir { /* POI */
 padding: 5px 30px;
}

ul.dropdown ul *.dir {
 padding: 8px 30px 8px 8px;
}


/* -- Custom -- */

ul.dropdown ul a {
 width: 133px;
}

ul.dropdown ul a.dir {
 width: 111px;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > *.dir {
 background-color: #3d3d3d;
}

ul.dropdown li:hover > a.dir:hover {
 background-color: #4698ca;
 color: #fff;
}

    ul.dropdown ul li:hover > *.dir {
     background-color: #4c4c4c;
     background-image: url(../../../../images/mtv.com/comnav-arrowover.png);
    }

    ul.dropdown ul li:hover > a.dir:hover {
     background-image: url(../../../../images/mtv.com/comnav-arrowon.png);
     color: #fff;
    }

        ul.dropdown ul ul li:hover > *.dir {
         background-color: #595959;
         background-image: url(../../../../images/mtv.com/comnav-arrowover2.png);
         color: #fff;
        }

helper.css:

@charset "UTF-8";


* { margin: 0; padding: 0; outline: none; }
body { padding: 50px; border-top: solid 1px #fff; background: #fff url(../images/pattern-wavy-grad.png) 0 0 repeat-x; color: #000; font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; }
p { margin-bottom: 1em; }
body > p, .container > p { margin-bottom: 0; }
h1,h2,h3 { margin-bottom: .5em; font-family: Arial, Helvetica, sans-serif; line-height: normal; }
h1 { margin-bottom: .5em; padding-bottom: 4px; border-bottom: solid 1px #d9d9d9; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 180%; text-indent: 5px; letter-spacing: -1px; }
cite { float: right; }
fieldset { border: none; }
ul.classic { list-style: disc; margin-bottom: 1em; padding-left: 2em; }
div.section { clear: both; padding-top: 50px; }
.dropdown-upward { margin-top: 400px !important; }
.main-site { position: relative; float: right; margin-top: -17px; padding: 15px 45px 15px 0; background: url(../images/arrow1-rightwards-black.png) 100% 50% no-repeat; }
.main-site, .main-site:link, .main-site:visited { color: #000; text-decoration: none; }
.main-site { font-size: 17px; }


/* -- Google Ads -- */

.g-ads { clear: both; overflow: hidden; }
.g-ads-468x15 { width: 100%; height: 15px; margin-top: 2em; padding: 6px 3px; background: #fff; }
.g-ads-234x60 { height: 60px; margin: 1em 0; }
.g-ads-728x90 { width: 728px; height: 90px; margin: 0 auto 1em; }


/* -- Customize themes -- */

body.vimeo-com { border-top: none; background: #86c9ef url(../images/vimeo.com/sun.png) 0 0 no-repeat; color: #000; }
body.vimeo-com h1 { border-bottom-color: #fff; }
body.nvidia-com { border-top: none; background: #4c4c4c url(../images/nvidia.com/grad1.png) 0 0 repeat-x; color: #d9d9d9; }
body.nvidia-com #flash { clear: both; }
body.nvidia-com #flash-wrapper { clear: both; width: 860px; height: 519px; margin: 0 auto; }
body.mtv-com { border-top: none; background: #4c4c4c url(../images/mtv.com/grad1.png) 0 0 repeat-x; color: #d9d9d9; }
body.lwis-celebrity { background: #fff url(../images/pattern-wavy-grad.png) 0 0 repeat-x; }
body.flickr-com { border-top: none; background: #fff url(../images/pattern-wavy-grad.png) 0 0 repeat-x; }
body.flickr-com .main-site { margin-top: -10px; }
body.adobe-com { border-top: none; background: #4c4c4c url(../images/adobe.com/grad1.png) 0 0 repeat-x; color: #d9d9d9; }
body.adobe-com .main-site { margin-top: -2px; }
body.adobe-com .main-site, body.nvidia-com .main-site, body.mtv-com .main-site { background-image: url(../images/arrow1-rightwards-white.png); }
body.adobe-com .main-site, body.adobe-com .main-site:link, body.adobe-com .main-site:visited,
body.nvidia-com .main-site, body.nvidia-com .main-site:link, body.nvidia-com .main-site:visited,
body.mtv-com .main-site, body.mtv-com .main-site:link, body.mtv-com .main-site:visited { color: #fff; }

水平居中.css:

@charset "UTF-8";

html { *overflow-x: hidden; }
body { padding: 0; }
body, html { height: 100%; padding: 0; margin: 0; }
.wrapper { min-height: 100%; min-width: 950px;overflow: hidden; }
.container { padding: 50px; }

.horizontal-centering { position: relative; }
.horizontal-centering > * > * { float: left; width: auto; position: relative; left: 50%; margin: 0; padding: 0; }
.horizontal-centering > * > * > * { float: left; position: relative; right: 50%; }

我不知道发生了什么，但所有元素都离菜单栏很远。
我想要做的是将元素放在菜单栏正下方的 body 标签中。

请帮忙。 default.advanced.css 可能不需要，但它仍然放在这里。 请帮忙。

最佳答案

您的全部内容都在 <body> 之外.尝试将其放入 <body> 中.这可能是浏览器无法按预期应用您的 CSS 的原因。

您也可以应用它来避免 body 过高。 

body {
    box-sizing: border-box;
}

HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" type="image/x-icon" href="css/dropdown/themes/mtv.com/images/favicon.ico" />
    <link href="css/helper.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/dropdown/themes/mtv.com/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/horizontal-centering.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
    <div class="container">
        <div class="horizontal-centering">
            <div>
                <div>
                    <ul id="nav" class="dropdown dropdown-horizontal">
                        <li> <a>Home</a>

                        </li>
                        <li><a>About</a>

                            <ul>
                                <li><a>Contact</a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

关于javascript - 顶部栏正文位置太低的 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22325062/

上一篇：php - 响应速度不适用于 slider

下一篇：jquery - 女儿 div 不跟随父 div

相关文章：

html - 在新行中强制 html 表(只有一个 <tr>)

html - 相对位置不适用于显示表格单元格？

javascript - 表单教程中的 Angular2 诊断示例

javascript - Microsoft Edge 中流的新响应

javascript - jointjs 的缩放问题

html - R 中是否有一种简单的方法可以仅提取 HTML 页面的文本元素？

javascript - 使用 JavaScript 获取数组中表单的所有控件？

jquery - 动态表单元素 Bootstrap

javascript - 每过一分钟就重新加载页面

html - 使用 CSS 时不影响 <select> 的下拉项吗？

©2024 IT工具网  联系我们