导航栏不跨越页面宽度
这是我第一次组建一个网站，我希望你们中的一些人能够帮助我，因为这里似乎有丰富的知识。我正在努力让导航栏延伸到整个网页的长度。此外，照片标题和导航栏之间还有一个空间，我想摆脱它。我现在把它变成了白色，但是当我盘旋时，你可以看到白色空间。
我收录了所有代码（对不起，我很抱歉，但我不确定什么是重要的，什么不是我正在调整它不再使用我实验室的用户的当前代码，我将非常感谢能得到的所有帮助。
非常感谢你！
更新：chandan建议我做了一个小提琴 http://jsfiddle.net/amchen/rzdmytqz/
我希望建立一个类似于我所看到的教程的网站： https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
上面的图片是我在测试网页时看到的内容。
我希望这能让您更好地了解我在设计方面的需求。
谢谢！
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav">
<img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
<li><a href="index.htm">HOME</a></li>
<li><a href="research.htm">RESEARCH</a></li>
<li><a href="susantaylor.htm">SUSAN TAYLOR</a></li>
<li><a href="LabMembersRecent.htm">LAB MEMBERS</a></li>
<li><a href="publications.htm">PUBLICATIONS</a></li>
<li><a href="links.htm">LINKS</a></li>
<li><a href="contact.htm">CONTACT US</a></li>
<li><a href="reagents.htm">REAGENT REQUESTS</a></li>
</ul>
</nav>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
</div>
</body>
</html>
3 个答案:
答案 0 :(得分：0)
尝试将#wrapper中的宽度设置为100％。此外，我不知道这是否重要，但你的整个风格部分看起来像是被评论出来了。因为你的图像都不可见，所以很难看清楚发生了什么。
答案 1 :(得分：0)
这是因为你在主包装内有导航和### wrapper＆＃39;宽度为1400px。将导航从主包装中取出，它将伸展100％;
<head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>
<div id="header"></div>
<nav id="mainnav">
<img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
<li><a href="index.htm">HOME</a></li>
<li><a href="research.htm">RESEARCH</a></li>
<li><a href="susantaylor.htm">SUSAN TAYLOR</a></li>
<li><a href="LabMembersRecent.htm">LAB MEMBERS</a></li>
<li><a href="publications.htm">PUBLICATIONS</a></li>
<li><a href="links.htm">LINKS</a></li>
<li><a href="contact.htm">CONTACT US</a></li>
<li><a href="reagents.htm">REAGENT REQUESTS</a></li>
</ul>
</nav>
<div id="wrapper">
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
您的样式代码中存在一些错误。确保在要实现的每种样式后输入分号。背景颜色也应该在其间有连字符（请参阅样式标记中的#footer部分）。您将无法将导航栏扩展到屏幕的100％并将图像放在同一平面上，除非您将两个项目都放在一个平面中。我现在已经尽力了。您可以在增加图像大小时减小#mainnav的宽度。您还需要增加标题的高度。标题的2％高度隐藏了大部分内容。我使用display:inline-block将导航栏和图像放在同一平面上：
<head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min-height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 100px;
width: 100%;
}
#mainnav{
height:50px;
display:inline-block;
width:1300px;
}
#mainnav img{
display:inline-block;
width:50px;
height:50px;
position:absolute;
}
#mainnav a {
display: inline-block;
width: 12%;
float:right;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background:#357f7f;
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg');">
<div id="header">
<img src="images/NewTitle copy.jpg" align="middle">
<nav id="mainnav">
<ul style="list-style: none;">
<li><a href="index.htm">HOME</a></li>
<li><a href="research.htm">RESEARCH</a></li>
<li><a href="susantaylor.htm">SUSAN TAYLOR</a></li>
<li><a href="LabMembersRecent.htm">LAB MEMBERS</a></li>
<li><a href="publications.htm">PUBLICATIONS</a></li>
<li><a href="links.htm">LINKS</a></li>
<li><a href="contact.htm">CONTACT US</a></li>
<li><a href="reagents.htm">REAGENT REQUESTS</a></li>
</ul>
</nav>
</div>
<div id="wrapper">
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？