I got some problems with a website I'm busy on and I can't seem to figure or beable to saught out the problem.
Go to www.testing123.co.za and please see my problem with the main big photo I have, that flashes from photo to photo (it just flashes to the same photo at the moment):
- Notice that the image doesn't fill up flush to the left-hand margin / page ... whereas it does on the right-hand side.
- Notice how the image isn't flush against the top - theres a small gap (THE PALM TREE FRON IS SUPPOSE TO LINE UP)
- But notice how the text that slides up from the bottom or from the top is the correct width (flushes to the right and left) BUT when it slides from the bottom up, theres no padding between "content text ..." and the beginning of the page
Right click and click VIEW SOURCE and see the css styles... can anyone help me fix this problem as I am creating this website for a client???
Any extra css codes I need to add to get everything lined up and saughted above?
Heres the css style below:
CODE
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
width: 1050px; /* important to be same as image width */
height: 508px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 1050px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 1050px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
a img {border:none;}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
<style type="text/css" media="screen">
#slider {
width: 1050px; /* important to be same as image width */
height: 508px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 1050px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 1050px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
a img {border:none;}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
IF you need the javascript files (jquery.js and s3slider.js) .. then please let me know
Dee.
Answers