Estoy haicendo una web html hasta los momentos todo perfecto, pero todo cambia cuando quiero agregar un jquery slider a mi web, mi pagina esta posicionada al centro osea esta centrada y detras tengo un fondo, cuando yo agrego este codigo del slider de muestra imagen y texto la pagina se deja de ver centrada y se acomoda a la izquierda y eso es lo que yo no quiero quiero que la web quede centrada como lo esta antes de haber colocado el codigo.
el codigo del slider es:
<style type="text/css">
<!--
/**
* Slideshow style rules.
*/
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
/**
* Slideshow controls style rules.
*/
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(img/control_left.png) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(img/control_right.png) no-repeat 0 0;
}
/**
* Style rules for Demo page
*/
* {
margin:0;
padding:0;
font:normal 11px Verdana, Geneva, sans-serif;
color:#000000;
}
a {
color: #000000;
font-weight:bold;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#pageContainer {
margin:0 auto;
width:960px;
}
#pageContainer h1 {
display:block;
width:960px;
height:114px;
background:transparent url(img/bg_pagecontainer_h1.jpg) no-repeat top left;
text-indent: -10000px;
}
.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#000000;;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>