Hi this is the first time I've tried position with CSS, its mostly working OK
but at a certain point in the scroll, a white area comes and covers the top images up, sorry for the sloppy code, but its the equivelent of sketching
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/2.jpg);
background-attachment: fixed;
background-position: 0% 100%;
background-repeat: no-repeat;
}
.right_shadow {
background-image: url(../images/4.jpg);
background-attachment: fixed;
background-position:728px 0%;
background-repeat: no-repeat;}
.top_image {
height: 410px;
width: 364px;
background-image: url(../images/1.jpg);
background-attachment: fixed;
background-position:0% 0%;
background-repeat: no-repeat;
}
p { background-image: none }
.avenues {
position: fixed; bottom:4px; left:75px;background-image: none;}
a.avenueslink:visited {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #FF6600;}
a.avenueslink:link {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #FF6600;
}
a.avenueslink:hover {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #ffffff;
}
a.avenueslink:active {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #FF6600;
}
.grey {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #ffffff;}
.scroll {
position: absolute;
bottom:1px;
left:365px;
background-image: none;
width: 364px;
height: 100%;
float: left;
background-image: none;
}
I know you are not supposed to nestle divs but its the only way that it seems to work in the html
<div class="right_shadow">
<div class="top_image">
<div class="scroll">
<p><img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/3.jpg" width="364" height="80" />
dfdfdfdf
df</p>
<p>fdfddf</p>
<p>fddfdf</p>
oh and the test site url
<!-- m --><a class="postlink" href="http://www.avenuescomputers.co.uk/guardian/temp/index.php">http://www.avenuescomputers.co.uk/guard ... /index.php</a><!-- m -->
but greatful if you could give some pointers on whats causing it or the better ways to approaching something like this
where the text is, there is going to be a module placed from Joomla CMS application, this is just one of a few templates I am working on
cheersjust notice a few errors not cleaned up from a earlier idea (the bottom position rather then top on the scroll)
was going to have the text area scrollable with the menu area fixed, but couldn't get it to work right, ok when I set it for the screen I was working on, but shrink it down and the bottom of the scoll bar would tend to disappear so I went for the easier option
but at a certain point in the scroll, a white area comes and covers the top images up, sorry for the sloppy code, but its the equivelent of sketching
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/2.jpg);
background-attachment: fixed;
background-position: 0% 100%;
background-repeat: no-repeat;
}
.right_shadow {
background-image: url(../images/4.jpg);
background-attachment: fixed;
background-position:728px 0%;
background-repeat: no-repeat;}
.top_image {
height: 410px;
width: 364px;
background-image: url(../images/1.jpg);
background-attachment: fixed;
background-position:0% 0%;
background-repeat: no-repeat;
}
p { background-image: none }
.avenues {
position: fixed; bottom:4px; left:75px;background-image: none;}
a.avenueslink:visited {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #FF6600;}
a.avenueslink:link {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #FF6600;
}
a.avenueslink:hover {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #ffffff;
}
a.avenueslink:active {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #FF6600;
}
.grey {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #ffffff;}
.scroll {
position: absolute;
bottom:1px;
left:365px;
background-image: none;
width: 364px;
height: 100%;
float: left;
background-image: none;
}
I know you are not supposed to nestle divs but its the only way that it seems to work in the html
<div class="right_shadow">
<div class="top_image">
<div class="scroll">
<p><img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/3.jpg" width="364" height="80" />
dfdfdfdf
df</p>
<p>fdfddf</p>
<p>fddfdf</p>
oh and the test site url
<!-- m --><a class="postlink" href="http://www.avenuescomputers.co.uk/guardian/temp/index.php">http://www.avenuescomputers.co.uk/guard ... /index.php</a><!-- m -->
but greatful if you could give some pointers on whats causing it or the better ways to approaching something like this
where the text is, there is going to be a module placed from Joomla CMS application, this is just one of a few templates I am working on
cheersjust notice a few errors not cleaned up from a earlier idea (the bottom position rather then top on the scroll)
was going to have the text area scrollable with the menu area fixed, but couldn't get it to work right, ok when I set it for the screen I was working on, but shrink it down and the bottom of the scoll bar would tend to disappear so I went for the easier option