Can't center the page on CSS

HTML & CSS
41

That’s because you have given borders and margins to the list element and the anchor :)Just give it to one of them:

#nav li{
        border-left: 1px solid #7c7c7c;
        margin:0 4px;
    }
42

How did I not see that!
I changed the pics from the slider and now i’m getting a smaller content bar,

300×300 14.3 KB

Ignore the circled nav bar as its fixed lol

43

Hi,

I’d need to see what you’ve been changing but I’m guessing that you have adjusted the class called .left. To get it to the right of that image you would need something like this.


.left {
    [B]left:470px;
    bottom: 0;[/B]
  [B]  width: 110px;[/B]
    height: 290px;
  [B]  position:absolute;[/B]
}
44

I havent’ really changed much, this is what I currently have,

#slider {
   height:200px;
    margin:10px 0;
    padding-top:10px;/*just for demo*/
	position:inherit;
}

#slider1 {
    width: 580px; /* important to be same as image width */
    height: 200px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}

#sliderContent, #slider1Content {
    width: 580px; /* important to be same as image width or wider */
    position: absolute;
    position: absolute;
    top: 0;
    left:0;
    margin:0;
    padding:0;

}
.sliderImage, .slider1Image {
    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;
}

.slider1Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 694px;
    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, .slider1Image span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
.left {
    left:470px;
    bottom: 0;
    width: 110px;
    height: 290px;
    position:absolute;
}
.right {
	right: 0;
	bottom: 0;
	width: 90px !important;
	height: 290px;
}
ul { list-style-type: none;}
45

That seems to be working for me. is it still broken your end?

46

Yes, most of them work but I believe on 4 and 5 it moves to the side.
I’m also trying to add a table and as you can see it overlaps,

300×300 14.3 KB

I tried adding it to the slide div and use that as a wrapper there is no p or br tag that would make it go down.

47

I was with you up until post #85 and then you lost me :slight_smile:

We’d need to see another zip (or perhaps you could put it online for testing).

48

Sorry for my lack of detail, here is the zip thanks.
http://www.mediafire.com/?mihzwht2om4

49

Hi, if you want a vertical space between the tables just set a bottom margin on the top one :slight_smile:

50

As Ryan said just apply a bottom margin to the top table.

I’m not sure why you have the same sort of data in 2 tables as they seem to be just one list. If they are different lists then at least give them a heading to differentiate.