...

View Full Version : Tried everything - Cant center



spadez
01-07-2010, 12:40 PM
Hi,

Im trying to center something on my website. Im trying to move the black rectangle at the bottom of the page here to sit in the middle:

http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=13

------------------------------------------------------

Ive tried the techniques on this page:

http://www.w3.org/Style/Examples/007/center

------------------------------------------------------

Here is my CSS:


#thumbs-container {
position: relative; /* Opera */
width: 100%;
margin: -110px auto 0;
padding: 6px 40px;
background-color: #000;
z-index: 100;
margin-left: auto;
margin-right: auto;
}

------------------------------------------------------

Can someone explain where I am going wrong please?

abduraooft
01-07-2010, 12:49 PM
The following should do it.
#thumbs-container {/*main.php...itemId=13 (line 31)*/
margin:-110px auto 0 auto;
padding-left:0;
padding-right:0;
text-align:center;
width:680px;
}

At present, you have
#thumbs-container{
width:680px;
margin-left:0px;
padding-left:0px;
padding-right:0px;
text-align:center;
}

spadez
01-07-2010, 12:56 PM
Thank you for the reply. Thats actually done something quite odd on my site. The black box seems to have disappeared, but things are still sitting in the same place. Is there some code conflicting or something?

spadez
01-07-2010, 01:08 PM
Hi,

Quick update. I found that the previous coder has also repeated some of the css in a different template file. I think ive fixed it according to your spec.

It is sitting in the center now but the background black no longer shows. Do you know why this might be happening?

abduraooft
01-07-2010, 01:28 PM
See http://jigsaw.w3.org/css-validator/validator?uri=http://www.zombiemod.com/rm/nina2/themes/ajaxian/theme.css and check the error at line 380

/* Thumbnails

#thumbs-container {
position: relative; /* Opera */
width: 100%;
margin: -110px auto 0;
padding: 6px 40px;
background-color: #000;
z-index: 100;
margin-left: auto;
margin-right: auto;
}


#thumbs-container {
margin:0 auto;
padding-left:0;
padding-right:0;
background-color: #000;
text-align:center;
width:680px;
}
*/ The comments are not closed properly. Better to remove that inner comment.

spadez
01-07-2010, 03:41 PM
Hi,

Sorry to come back again! Well spotted, I fixed the problem and checked the HTML errors again (they are pretty much problems with the moz corners and opacity), but I still cant see the background color.

Is it something to do with the z-index perhaps?

abduraooft
01-07-2010, 03:51 PM
Now, there's no background property applied. Make it like

#thumbs-container {/*main.php...itemId=13 (line 40)*/
background-color:#000;
margin:-110px auto 0;
padding-left:0;
padding-right:0;
text-align:center;
width:680px;
}

PS: Get firebug for your Firefox (http://getfirebug.com), to make your life easier.

spadez
01-07-2010, 04:46 PM
Thank you so much for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum