CSS table right aligning while I did align center

**linux1880** · 10-13-2007, 12:35 PM

I did ceate a page using CSS, the first big table I made is on the centre of the screen. When I check with other computer some shows it in cetre but most of the computer shows on the right side and it beacomes really bad.

Is there any ways to define CSS table to force it to align centre no matter what resolution what tyope of screen ? I would be really tankful in anyone can sort this silly problem out

**linux1880** · 10-13-2007, 12:40 PM

my css of the main table is like this

#Layer1 {
position:absolute;
left:0px;
top:0px;
width:899px;
height:1200px;
z-index:1;
left: 174px;
top: 8px;
background-color: #FFFFFF;

**jscheuer1** · 10-13-2007, 02:56 PM

First make sure you are using an HTML 4.01 Transitional DOCTYPE with valid URL or stricter as your DOCTYPE. Once you have that, just set the width of the element and margin:0 auto;.

Code:

#table1 {
width:899px;
margin:0 auto;
}

However, at 899px, it will be too wide to center on smaller screens. If you were to use a percentage width it could scale to the user's screen/view port. If you were to use em width, it could scale to the user's default text size, which is usually smaller on smaller screens.

**linux1880** · 10-14-2007, 09:39 AM

It didn't work

**linux1880** · 10-14-2007, 09:40 AM

forgot to mention that designed it on the dreamweaver.

**jscheuer1** · 10-14-2007, 03:27 PM

What DOCTYPE are you using?

Please post a link to the page on your site that contains the problematic code so we can check it out.

**jscheuer1** · 10-17-2007, 04:32 PM

You PM'ed me a link to the page. Your layout depends heavily upon absolute positioning. That's not the best approach. But I am not here to completely redesign your page. Making the following modifications to two of your style selectors seems to work out:

Code:

#Layer1 {
	position:absolute;
	table-layout: automatic
	width:899px;
	height:1200px;
	z-index:1;
	top: 8px;
	left: 50%;
        margin-left:-450px;
	background-color: #FFFFFF;
}

and:

Code:

#header {
	position:absolute;
	width:898px;
	height:115px;
	z-index:3;
	left: 50%;
	top: 7px;
        margin-left:-455px;
	background-image:url(logo/2.jpg);
}

Oh, and I see that throws off vcadmuni, so:

Code:

#vcadmuni {
	position:absolute;
	border:1px solid #C0C0C0;
	width:300px;
	height:115px;
	z-index:2;
	left: 50%;
	top: 508px;
        margin-left:132px;
	background-color: #FFFFFF;
	background-image: url(chat1.jpg);
}

One of the problems with this sort of set up is that browsers may vary slightly in where they see things falling. Particularly IE. For that browser, conditional comments may be used to tweak the style.

**linux1880** · 10-18-2007, 11:42 AM

Many thanks jscheuer1 ,

It looks much better now with your help, I am glad and thankful to you for this. Btw, The absolute positioning you are talking about was the coding generated by the dreamweaver itself. I am beginner on CSS,

So do you mean I should do the relative positioning from the next time ? As a genuine helper that I have seen on you, how would you advise me to start on this ? Obviously I am a beginner on CSS, I did make a lot of websites before with tables but the page I made was my first CSS page in fact. Any suggestion with you will be a great help for me.

Thanks and regards
Linux

**jscheuer1** · 10-18-2007, 06:04 PM

Actually, static positioning (which is default and need not be specified) is best. You cannot use the top, right, bottom, or left properties with it, but with margins and padding, one shouldn't need to. Relative, absolute, and fixed positioning all have drawbacks, and are best reserved for special effects, not for the entire overall layout of a page. Of these three, relative positioning is generally the least problematic, but does have its pitfalls.

As I said originally, and perhaps should have prefaced with "if using default (static) positioning":

First make sure you are using an HTML 4.01 Transitional DOCTYPE with valid URL or stricter as your DOCTYPE. Once you have that, just set the width of the element and [sic:a margin of] margin:0 auto;.

Code: