Log in

View Full Version : 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:


<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>


<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:



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/STAFFWEB/High_School2/pages/High%20School/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):



<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.