【发布时间】：2013-08-16 20:30:43
【问题描述】：
我通过 SSI 插入页面的 html 菜单向左延伸，超出了页面的硬编码宽度，我不知道为什么...
如果您查看我的代码，#menu id 就是问题所在，因为它可以正确浮动（float:right;）但它的宽度似乎被某些东西覆盖了......我不知道是什么正在覆盖它......我已经检查了所有会影响#menu的属性，但没有任何影响......
这里是清楚的网页：http://unifiedforunifat.com/redesign/homepage.html
这是插入菜单的主页的css：
body{
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 10px;
}
html{
height: 100%;
}
#wrapper{
width: 900px;
min-height: 100%;
height: auto;
margin: 0 auto -4em;
}
#header{
position: relative;
top: 0;
left: 0;
margin-bottom: 1px;
}
这里是对应的html：
<body>
<div id="wrapper">
<div id="header">
<!--#include virtual="/menus/menu.html" -->
</div>
这里是菜单页面的css：
#menu-wrapper{
position: relative;
width: 900px;
margin: 0 auto;
height: 140px;
}
#logo{
background:url('http://www.unifiedforuganda.com/resources/u4ulogo.jpg') no-repeat;
height: 108px;
width: 200px;
position: relative;
top: 3px;
background-position: 0 0;
float: left;
}
#logo span{
position: absolute;
top:0; left:0; bottom:0; right:0;
background:url('file:///Volumes/Despotos/Users/nojohnny101/Documents/Dropbox/Unified%20for%20UNIFAT/website/resources/u4ulogo.jpg') no-repeat;
background-position: -200px 0;
}
#logo:hover span{
opacity: 1;
}
.social{
position: relative;
margin: 50px 0 0 0;
width: 136px;
float: right;
overflow: hidden;
display: block;
}
#menu{
position: relative;
top: 0;
right: 0;
list-style: none;
display: block;
overflow: hidden;
width: 100%;
margin-top: 0;
padding-top: 4px;
border-top: 1px solid black;
float: right;
}
然后这里是菜单页面的html：
<div id="menu-wrapper">
<div class="menu-header">
<a href="http://unifiedforunifat.com/redesign/homepage.html" id="logo" class="imglink"><span></span></a>
</div>
<div class="social">
<a href="https://www.facebook.com/UnifiedforUNIFAT" id="facebook" target="_blank"><span></span></a>
<a href="https://twitter.com/unified4unifat" id="twitter" target="_blank"><span></span></a>
<a href="http://unifiedforunifat.wordpress.com/" id="wordpress" target="_blank"><span></span></a>
<a href="https://vimeo.com/u4u" id="vimeo" target="_blank"><span></span></a>
</div>
<div>
<ul id="menu">
<li class="active"><a href="#">DONATE</a></li>
<li class="active"><a href="#">ABOUT US</a></li>
<li class="active"><a href="#">MEDIA</a></li>
<li class="active"><a href="#">US MOVEMENT</a></li>
<li class="active"><a href="http://unifiedforunifat.com/redesign/ugandaprograms.html">UGANDA PROGRAMS</a></li>
</ul>
</div>
任何帮助将不胜感激！
【问题讨论】：
-
您的包含文件不应是完整的 HTML 文件。 SSI 不是那样工作的。结果应该是一个正确的 HTML 文档，有一个 DOCTYPE 声明，一个
<html>元素等等。坦率地说，我很惊讶它的效果如此之好。 -
@MrLister 哦，我从来不知道.....但是 标签应该在那里正确吗？造型呢？我必须在 中有一些引用的 css，因为那是正确的样式？你能更具体地说明什么是不需要的吗？
-
HTML 文档（即 SSI 文件的输出，您的浏览器可以看到它）必须遵循基本的 HTML 规则。一个 DOCTYPE 声明，后跟一个包含一个
<head>和一个<body>元素的<html>元素，按此顺序。因此，如果您在正文中包含某些内容，则您包含的内容不能包含<html>和<body>自己的元素。您在此处发布的内容，作为“菜单页面的 html”，that 应该是包含文件的内容，仅此而已。 -
另外，ID 必须是唯一的；你不能有两个 id="wrapper" 的 div。但我们稍后会谈到。
-
gotcha....完全有道理......我只是在学习这些东西（大约 4 天前开始），所以代码效率并不是我考虑的问题尽管我正在尝试，但永远不会这样做....好吧，我从 homepage.html 链接了 menu.css，然后从 menu.html 页面中删除了所有不必要的 html，然后也进行了更改，因此没有 id冲突......我已经更新了问题代码......