Need help with image slider please :)

On my website; http://reward9.com/
I have an image slider. It's too low and I need to change the css to bring it up.

Here is the CSS code:

Code:

<style type="text/css">
body {
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
*{outline: none;}
img {border: 0;}
.container {
width: 790px;
padding: 0;
margin: 0 auto;
}
.folio_block {
position: absolute;
left: 50%; top: 100%;
margin: -140px 0 0 -395px;
}


/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>

I'd greatly appreciate some help,
thanks Anthony1994.

Btw to make the image slider i use this tut;
http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

 

You have this :

.folio_block {
position: absolute;
left: 50%; top: 100%;
margin: -140px 0 0 -395px;
}

You don't need to use position:absolute to put a block in the center of the page. Do these :

1. Remove the <center> element.
2. Remove the lots of <br> tags there.

That will bring the sliders to almost correct position, but next you'll need to do some more adjustments.

Do those and we'll see.

 

I added the code you said and removed the <br> tags and had no luck
thanks for the reply though.

 

Anthony please pay attention.

First remove :

.folio_block {
position: absolute;
left: 50%; top: 100%;
margin: -140px 0 0 -395px;
}

from your CSS file.

Second delete the <center>,<br> tags from your HTML file.

Do these two things first, save/upload and let me check. And then there will be more things to do before we can fix this 100%.

 

Also the <div id="facebook"> is not closed properly, do that too.

 

okay i did that and it helped a lot,. though i couldn't find the br tags and center tags

 

what do i do with <div id="facebook">

delete it?

 

Yep already making difference. Those should be in the index.php code, can you paste the contents of index.php in some place like pastie.org and provide the link here?

 

The <div id="facebook"> it seems like it is not closed properly. So you need to add a </div> for it in the proper place.

 

I deleted it, it's not needed

 

thank-you for your help. you're very good at this

 

PS: If you add .folio_block { overflow:hidden; } then you can get rid of lots of <br> tags on the page.