Clever Geek Handbook

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

This is the design I see when I have it in a test webpage 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
css header navigationbar


source to share


3 answers


Try setting the width in #wrapper to 100%. Also, I don't know if it matters, but the entire style section looks like it is commented out. It's hard to see what's going on since none of your images are visible.



0


source to share


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






More articles:


All Articles
Loading...
X
Show
Funny
Dev
Pics