The navigation bar does not span the page width
This is my first time putting together a website and I was hoping that some of you can help me as there seems to be a lot of knowledge here. My hardest part is trying to stretch the navigation bar across the entire length of a web page. Also, there is a space between the title of the photo and the navigation bar, which I want to get rid of. I made it white for now, but when I find myself, you can see the blank space.
I've included all the code (sorry if it's overwhelming, but I'm not sure what is important and what is not, as I am adapting it from current user code that no longer works in my lab) and I would appreciate all the help. which I can get.
Thank you very much!
UPDATE: I made a js fiddle as chandan suggested http://jsfiddle.net/amchen/rzdmytqz/
I was hoping to make the site look like the one I was looking at: https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
The image above is what I see when I make a test webpage.
Hopefully this gives you a better idea of what I'm looking for in terms of design.
THANK!
<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
source to share
3 answers
This is because you have your navigation inside the main wrapper and the "#wrapper" width is 1400px. Take the nav from the main wrapper and it will stretch 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>
0
source to share
There are several bugs in the style code. Make sure you enter semicolons after each style you want to implement. Also the background color must have a hyphen in between (see the #footer section in the style tag). You cannot extend the nav bar to 100% of the screen AND have the image in the same plane unless you put both elements in a. I've tried as much as I can. You can decrease the #mainnav width while increasing the image size. Also you need to increase the header height. A 2% height for the header hides most of the content. I used display:inline-block
to get navbar and image in one plane:
<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>
0
source to share