No vertical scroll option when banner image is 100% width

**kbanta11** · 05-09-2011, 12:36 PM

I have a site which has a banner image that I have set to span the width of the window, but to do this, the only way I know how is to set the position of the image to fixed (without it fixed, it doesn't span the entire width). However, when the image is set to fixed, it takes away the scroll bar so I can't scroll down to see the rest of the content on my page. Any suggestions?

Here's my code:

Code:

<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	background-image: url(../images/Page.jpg);
	background-repeat: no-repeat;
}

#header {position:fixed; width:100%;}
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}
a:link {
	color: #000000;
}
.style2 {font-family: Arial, Helvetica, sans-serif}
</style>

Code:

<body onload="MM_preloadImages('../images/buttons/districtRO.png','../images/buttons/jacksonRO.png','../images/buttons/tibbetsRO.png','../images/buttons/westsideRO.png','../images/buttons/middleRO.png','../images/buttons/HighRO.png')">
<div id="header">
  <p align="center"><img src="../images/header2.jpg" alt="Elkhorn Area School District" width="100%" height="256" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../images/buttons/districtRO.png',1)"><img src="../images/buttons/district.png" name="Image6" width="160" height="35" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../images/buttons/jacksonRO.png',1)"><img src="../images/buttons/jackson.png" name="Image5" width="160" height="35" border="0" id="Image5" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images/buttons/tibbetsRO.png',1)"><img src="../images/buttons/tibbets.png" name="Image8" width="160" height="35" border="0" id="Image8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../images/buttons/westsideRO.png',1)"><img src="../images/buttons/westside.png" name="Image9" width="160" height="35" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../images/buttons/middleRO.png',0)"><img src="../images/buttons/middle.png" name="Image10" width="160" height="35" border="0" id="Image10" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../images/buttons/westsideRO.png',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../images/buttons/middleRO.png',1)"></a><a href="../pages/High School/Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../images/buttons/HighRO.png',1)"><img src="../images/buttons/High.png" name="Image7" width="150" height="35" border="0" id="Image7" /></a></p>
  <table width="100%" border="0">
    
    <tr>
      <td width="161" rowspan="2" align="left" valign="top" bgcolor="#FFFFFF"><span class="style2">News<br />
Registration Guide<br />
Bell Schedule<br />
Family Access<br />
Announcements<br />
Athletics<br />
Co-curricular <br />
Summer  School<br />
Calendar<br />
Educational  Resources<br />
Lunch Menu<br />
Contact<br />
Staff  Directory</span></td>
      <td width="579" align="center" valign="top" bgcolor="#FFFFFF"><!-- TemplateBeginEditable name="Header" --><span class="style2">Header</span><!-- TemplateEndEditable --></td>
    </tr>
    <tr>
      <td align="left" valign="top" bgcolor="#FFFFFF"><!-- TemplateBeginEditable name="Content" --><span class="style2">Content</span><!-- TemplateEndEditable --></td>
    </tr>
  </table>
  <p align="center"><span class="style1">District</span> | <span class="style2">Jackson | Tibbets | West Side<br />
    Middle School | <a href="../pages/High School/Index.html">High School</a></span> </p>
</div>
</body>

**deathbycheese** · 05-09-2011, 06:31 PM

Try adding this:

Code:

html {
     overflow:scroll;
}

dbc

---------------------------------------------------------
If this was helpful, don't forget to click the 'thanks' button.

**kbanta11** · 05-13-2011, 12:33 PM

Thanks, but now, when the window isn't full size, the banner still spans 100%, but the buttons beneath are wider than beneath and so there is a horizontal scroll. This is fine, except that when I scroll over, the banner image doesn't scroll over and it doesn't look very nice. Any ideas as to get the banenr image to be fixed vertically, but always stretched out to the width of the content on the page?

**deathbycheese** · 05-13-2011, 07:30 PM

Can you share a link so we can see it?

dbc

---------------------------------------------------------
If this was helpful, don't forget to click the 'thanks' button.

**kbanta11** · 05-18-2011, 12:46 PM

http://www.elkhorn.k12.wi.us/STAFFWE...ool/index.html

There's the link. When you view it in a window that isn't as wide, the header image still spans 100% of the window but there is a horizontal scroll to see the rest of the menu buttons.

**deathbycheese** · 05-18-2011, 04:50 PM

I looked at the page source of your link and it seems your header image is now before the header div instead of within it. You might try putting it back in. Also, I think you're missing the </div> for the header div.

**kbanta11** · 05-19-2011, 12:41 PM

I placed the the image into my header <div> and now the 100% width takes the width of the <div> (which I have set to 950px). When I don't have the width of the <div> set to 950, resizing the window makes the buttons in the <div> fall out of line as they wrap to the next line. Also, the <div> after all the image code for the rollover buttons closes the header <div>, while the <div> before the header <div> code applies to the whole page.

**deathbycheese** · 05-19-2011, 11:37 PM

You're going to need to keep your banner image a fixed size - no %. That's the only way to keep the width AND keep your nav menu from wrapping. Here's an option for you (you'll have to re-link the images to the correct ones):

Code:

<style type="text/css">

body {margin: 0px; padding: 0px; background-image: url(./images/Page.jpg); background-repeat: no-repeat;}

#header {width:100%; height:256px; margin-left:-10px; text-align:center;}

#header>.banner {margin:0px; width:1290px; height:220px;}

#header ul {width:900px; margin:0px; margin-left:25%; list-style:none;}

#header ul li {float:left;}

#header ul li a img {border:none;}


.style1 {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}
a:link {
	color: #000000;
}
.style2 {font-family: Arial, Helvetica, sans-serif}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>

</head>

<body onload="MM_preloadImages('./images/buttons/districtRO.png','././images/buttons/jacksonRO.png','../../images/buttons/tibbetsRO.png','../../images/buttons/westsideRO.png','../../images/buttons/middleRO.png','../../images/buttons/HighRO.png')">


  <div id="header">
  
    <img class="banner" src="./images/header2.jpg" />
  
    <ul>
      <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','./images/buttons/districtRO.png',1)"><img src="./images/buttons/districtRO.png" name="Image6"id="Image6" /></a></li>
      <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','./images/buttons/districtRO.png',1)"><img src="./images/buttons/districtRO.png" name="Image5"id="Image5" /></a></li>
      <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','./images/buttons/districtRO.png',1)"><img src="./images/buttons/districtRO.png" name="Image8"id="Image8" /></a></li>
      <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../../images/buttons/westsideRO.png',1)"><img src="../../images/buttons/westside.png" name="Image9"id="Image9" /></a></li>
      <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','./images/buttons/districtRO.png',0)"><img src="./images/buttons/districtRO.png" name="Image10" id="Image10" /></a></li>
      <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','./images/buttons/districtRO.png',1)"></a></li>
      <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','./images/buttons/districtRO.png',1)"></a></li>
      <li><a href="Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','./images/buttons/districtRO.png',1)"><img src="./images/buttons/districtRO.png" name="Image7" id="Image7" /></a>
  </div>



  <table width="100%" border="0">
    
    <tr>
      <td width="161" rowspan="2" align="left" valign="top" bgcolor="#FFFFFF"><!-- InstanceBeginEditable name="links" -->
        <p class="style2">News<br />
          Registration Guide<br />
          Bell Schedule<br />

          Family Access<br />
          Announcements<br />
          Athletics<br />
          Co-curricular <br />
          Summer  School<br />
          Calendar<br />

          Educational  Resources<br />
          Lunch Menu<br />
          Contact<br />
          Staff  Directory</p>
        <p class="style2">&nbsp; </p>
      <!-- InstanceEndEditable --></td>

      <td width="579" align="center" valign="top" bgcolor="#FFFFFF"><!-- InstanceBeginEditable name="Header" --><span class="style2">Header</span><!-- InstanceEndEditable --></td>
    </tr>
    <tr>
      <td align="left" valign="top" bgcolor="#FFFFFF"><!-- InstanceBeginEditable name="Content" -->
        <p class="style2">Content</p>
        <!-- InstanceEndEditable --></td>
    </tr>
  </table>

  <p align="center"><span class="style1">District</span> | <span class="style2">Jackson | Tibbets | West Side<br />
    Middle School | <a href="Index.html">High School</a></span> </p>
</div>
</body>
<!-- InstanceEnd --></html>

Hope this helps!
dbc

**kbanta11** · 05-20-2011, 01:03 PM

Thanks for the help, I'll make it fixed then I guess and it should still work pretty nicely, I was being asked for a class to see if they could get it to stay 100%. Another option though, would it be possible to get it to stretch to 100% OR the width of content if its smaller? I'm guessing this would involve some scripting.

Thread: No vertical scroll option when banner image is 100% width

Thread Tools

Search Thread

No vertical scroll option when banner image is 100% width

Bookmarks

Bookmarks

Posting Permissions