At the moment, I am working on a new website. I have a div where I place images and overlay text on them to describe the images. The issue I am facing is that the text does not scroll even though the scroll bar is visible.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="background">
<h10>.</h10>
</div>
<div id="header">
<div id="logobackground">
<img src="http://localhost/cabinchic/logo.png">
</div>
<div id="navbar">
<a href="http://localhost/cabinchic/home.html">
<div id="homebutton">
<h1> Home </h1>
</div>
</a>
<a href="http://localhost/cabinchic/homedecor.html">
<div id="homedecorbutton" style="border-radius: 8px; color: #00693E;;background-image: url(http://localhost/cabinchic/woodplankgreen.jpg)">
<h1> Home Decor </h1>
</div>
</a>
<a href="http://localhost/cabinchic/askheather.html">
<div id="askheatherbutton">
<h1> Ask Heather </h1>
</div>
</a>
</div>
</div>
<div id="leftbox">
</div>
<div id="mainbox">
<div class="picture" style="background-image: url(http://localhost/cabinchic/stones.jpg)">
<div class="text">
<h1> 26473264738654356427564 gyugfyubyeefwafwaf67erafh6ea7f67webf7bqyeuiewHFUIWhf78whiuNEuiwehui </h1>
</div>
</div>
</div>
<div id="footer">
<div id="footerborder">
<h10>.</h10>
</div>
<center>
<img src="http://localhost/cabinchic/logo.png" style="max-height: 18%; margin-top: -2%">
<div id="footertextcr"> <h1>All Rights Reserved © 2014 Python Daily</h1> </div>
<div id="footertext"> <h1>Logo made by Fatpaint | Site made by Michael Jones</h1> </div>
</center>
</div>
</div>
</body>
</html>
This is my CSS:
/*Dartmouth Green Color Code Is #00693E*/
#background {
background-image: url("http://localhost/cabinchic/flatstone.jpg");
z-index: -10;
height: 160%;
width: 100%;
position: absolute;
}
#wrapper {
height: 100%;
width: 100%;
/*overflow-y: scroll;*/
position: absolute;
}
#header {
height: 100%;
width: 100%;
position: fixed;
}
#logobackground {
width: 100%;
background-image: url("http://localhost/cabinchic/wood.jpg");
text-align: center;
position: fixed;
margin-top: -3.8%;
}
...
...
a, u {
text-decoration: none;
}
I apologize for the lack of spacing in the copied CSS code...