PDA

View Full Version : Cannot get scroll bar out of main content <div>, code + screenshot included


damonk1
03-13-2011, 12:52 PM
Hello,

I am currently making a website and used the http://www.cssstickyfooter.com/ sticky footer. Everything went well, the footer is at the bottom and the main contents background goes to the bottom. The problem now is the scroll bar that has appeared, It has appeared within the main content <div>. I need it to be on the outside in the main body

If anyone could help I would be very grateful, here is the code:

CSS:
@charset "utf-8";
html, body {
height: 100%;
}
body {
color: #CBA867;
background-color: #2A2A69;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-attachment: scroll;
background-image: url(images/texture5.jpg);
background-repeat: repeat;
margin: 0;
padding: 0;
text-align: center;
overflow:auto;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0px;
color: #856A10;
font-size: x-small;
text-align: center;
}
a img {
border: none;
}
a:link {
color:#423509;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.wrap {
width: 750px;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 100%;
background-image: url(images/shadowtile.jpg);
background-repeat: repeat-y;
min-height: 100%;
background-image: url(images/shadowtile.jpg);
overflow:auto
}
.header {
width: 750px;
margin-left: auto;
margin-right: auto;
text-align: center;
text-align: center;
padding-bottom: 150px;
margin: 0 auto -40px;
overflow:auto;
}
*/ .content {
margin: 0 auto background-color: #F8ECC2;
padding: 50px;
position: relative;
text-align: center;
vertical-align: middle;
}
.content ul, .content ol {
padding: 0;
/
}
.footer {
background-color: #E1B96C;
width: 750px;
margin-left: auto;
margin-right: auto;
text-align: left;
text-indent: 0;
background-image: url(images/shadowsfooter.jpg);
background-repeat: repeat-y;
padding-top: 0px;
line-height: 15px;
position: relative;
margin-top: -40px; /* negative value of footer height */
height: 40px;
clear:both;
}
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.logo {
display: block;
margin-right: auto;
margin-left: auto;
position: static;
text-align: center;
}
.header .footer .footer {
text-align: center;
}
* {
margin: 0;
}
.poshfont {
font-family: AdineKirnberg-Script;
}

.footertext {
text-align: left;
}



HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Kilcawley Family</title>
<link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
hr {
height:1.5em color:#B39851;
background-color:#B39851;
height:1px;
border:none;
}
body {
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>

<body>
<div class="wrap">
<div class="header">
<p><img src="images/topofwebsite.jpg" width="750" height="30" alt="top" />
<p><a href="index.html"><img src="images/websiteheader.jpg" alt="header" width="600" height="150" class="logo" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no"/></a>
<hr align="center" class="logo" style="width:94%; text-align:center color:#88733c;background-color:#88733c;height:1.5em;height:1px;border:none;">
</p>
<p align="center"> <a href="index.html"><img src="images/links/portrait2.jpg" width="94" height="50" alt="portrait" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no" /></a> <a href="shows.html"><img src="images/links/shows1.jpg" width="76" height="50" alt="shows" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no"/></a> <a href="music.html"><img src="images/links/music1.jpg" width="86" height="50" alt="music" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no"/></a> <a href="photographs.html"><img src="images/links/photograph1.jpg" width="132" height="50" alt="photograph" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no"/></a> <a href="story.html"><img src="images/links/story1.jpg" width="70" height="50" alt="story" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no"/></a> <a href="artwork.html"><img src="images/links/artwork1.jpg" width="98" height="50" alt="artwork" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no"/></a> <a href="contact.html"><img src="images/links/contact1.jpg" width="97" height="50" alt="contact" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no"/></a>
<hr align="center" class="logo" style="width:94%; text-align:center color:#88733c;background-color:#88733c;height:1.5em;height:1px;border:none;">
</p>
<div class="content">
<p><img src="images/lowres.jpg" width="350" height="350" alt="kilcawley family" unselectable="on" ondragstart="return false" selectable = "false" galleryimg="no"/>
<p>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello h
</div>
</div>
</div>
</div>
<div class="footer">
<p class="footertext">
<p class="footertext">
<p class="footertext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Copyright 2011 <a href="www.kilcawleyfamily.com" target="_top">The Kilcawley Family</a>
<p class="footertext"> <span class="header"><span class="footertext"></span></span><img src="images/footerbottom.jpg" width="750" height="25" />
</div>
</div>
</body>
</html>



Screenshot:
http://i55.tinypic.com/24ozsys.jpg
Thanks very much for reading, if you can help I will be extremely grateful :grin: .
Damon Kilcawley.

Corrosive
03-13-2011, 01:08 PM
It's probably got something to do with your overflow: auto; style on the wrap. Giving it a height of 100% calls the scroll-bars into action.

damonk1
03-13-2011, 01:18 PM
Thanks for your swift reply,

here is what happens when I remove the overflow in the wrap.

http://i54.tinypic.com/29yrw3d.jpg

Do you know how I can get the footer to the bottom and the content background to follow?

Damon Kilcawley

Corrosive
03-13-2011, 01:52 PM
Try overflow: hidden;

damonk1
03-13-2011, 02:03 PM
Thanks,
I tried overflow hidden, it gets rid of the scroll button, but then I'm back to the drawing board. I can't get to the content under and below the footer. What do you think?

Screenshot:
http://i56.tinypic.com/rhvejm.gif

Cheers again, Damon.

DWcourse
03-13-2011, 06:11 PM
Don't use an overflow property on the wrap at all.

damonk1
03-13-2011, 09:02 PM
Thanks for the reply but now I am back to the second screenshot.
This is really frustrating :(
Damon Kilcawley

DWcourse
03-13-2011, 09:44 PM
sorry, and get rid of the height property

damonk1
03-13-2011, 09:45 PM
Thanks for both of your help, I finally found the solution, I started simplifying the code as much as I could. And removed the header and content div so I just had the wrap and footer to deal with. Not sure exactly what I did wrong, but I think I just overcomplicated it as I was figuring it out.

Cheers guys! Damon

Corrosive
03-14-2011, 07:55 AM
This is really frustrating :(


Welcome to web design. You get a lot if that :wink: