Question

I have been trying to center the slider that I have inside the header. The header and the whole container is neatly centered, with just margin: 0 auto; Then I tried to include a slideshow inside the header, and tried by many ways to place it correctly. Yes, I succeeded for my own configuration by using position:aboslute and then playing with coordinates, but that will not work for the rest of the world.

The site (under construction) is http://www.hrcprojectconsulting.com

Since you ll be able to see all the CSS stuff, do you know how in heaven that can be positioned? I tried all margin combinations but I am kind out of options that I could think of.

A good news is that Internet Explorer 10 is also available now for Windows 7 so, CSS3 stuff and html5 placeholders work so I ll never code for backwards things anymore.

Note: if you happen to see everything ok, this is because you have the same kind of monitor and resolution than I do.

thank you

The code for the slider:

 <style type="text/css" media="screen">
#slider {
    width: 960px; /* important to be same as image width */
    height: 150px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}
#sliderContent {
    width: 960px; /* important to be same as image width or wider */
    position: absolute;
    top: 125px;
    left:265px;

    margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
    display: none;
}
.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

The code for my homepage:

<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }



body{

    background:url('../assets/uploads/miweb/gradient2.png');
    background-repeat:repeat-x;
    font: 13px/20px normal Helvetica, Arial, sans-serif;
    color: #4F5155;
    margin:0;
    padding:0;
    line-height: 1.5em;

}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 960px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
height: 300px; /*Height of top section*/
}

Answer 1

This is because the ul has a default padding. You will have to set the padding for your ul#sliderContent to 0:

 #sliderContent {
    padding:0;
    margin:0;
 }

Then you should remove the position: absolute from your stylesheet.

To place the sliderContent at the bottom you could do like this:

 #topsection {
    position: relative;
 }
 #slider {
    position: absolute;
    bottom: 0;
 }
 #sliderContent {
    padding: 0;
    margin: 0;
 }