logo标签列表

导航栏未覆盖整个页面宽度

cssheadernavigationbar
3
这是我第一次制作网站，希望你们能够给我帮助，因为这里似乎有很多专业的知识。我正在努力让导航栏跨越整个网页的长度，但是遇到了困难。另外，在照片标题和导航栏之间有一段空白，我想要去掉它。我已经把它变成了白色，但是当我悬停时，你可以看到白色的空白处。
我包含了所有的代码（如果代码过于庞大，请见谅，因为我不确定什么是重要的，什么是不重要的，因为我在修改一个不再与我的实验室合作的用户的当前代码），我需要你们所有的帮助。
非常感谢！
更新：我已经按照chandan的建议创建了一个js fiddlehttp://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

这是因为您的导航位于主包装器内，而'#wrapper'的宽度为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>
Chandan，谢谢！我已经创建了一个fiddle，你能看一下吗？我还包括了一个链接，用于我试图模仿的网站设计。非常感谢您的意见！ - angela
嗨，Chandan，我终于搞清楚了！我需要调用#main nav ul并更改参数。我正在努力解决其他问题（页脚和下拉菜单），但感谢您的帮助！ - angela
嗨，安吉拉，非常欢迎，很高兴能帮助你。 - chandan
0

你的样式代码中有几个错误。确保在每个要实现的样式后输入分号。此外，background-color应该在中间加上连字符（请参见样式标记中的#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>
谢谢你为我做出所有这些更正！我实际上将其输入到Adobe Dreamweaver中并得到了一个奇怪的网页。你能帮忙看一下我的JSFiddle和我尝试设计的页面类型链接吗？我非常感激你的建议！ - angela
0

尝试将#wrapper中的宽度设置为100%。另外，我不知道这是否有影响，但你整个样式部分看起来都被注释掉了。由于没有任何图片可见，所以有点难以理解发生了什么。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接