Centering a CSS layout that Photoshop created 1

[kylebellamy]

Essentially, what it did was to absolutely position everything from the corner in a container. Inside of that container are all the divs and images that were sliced. All in all it is tight and good looking but stuck in the upper left hand corner.

I was reading about setting margins to auto and a text-align fix for IE but couldn't seem to get that to work right.

This is really just a test of the process since there is no code savings with all the CSS that Photoshop generated.

Here is the CSS that Photoshop generated:

<style type="text/css">
<!--

div.Table_01 {
	position:absolute;
	margin:auto;
	left:auto;
	top:auto;
	width:1024px;
	height:768px;
}

div.logo-top_ {
	position:absolute;
	left:0px;
	top:0px;
	width:380px;
	height:316px;
}

div.home-02_ {
	position:absolute;
	left:380px;
	top:0px;
	width:644px;
	height:72px;
}

div.home-03_ {
	position:absolute;
	left:380px;
	top:72px;
	width:67px;
	height:696px;
}

div.ARTISTIC_ {
	position:absolute;
	left:447px;
	top:72px;
	width:234px;
	height:257px;
}

div.home-05_ {
	position:absolute;
	left:681px;
	top:72px;
	width:22px;
	height:562px;
}

div.PORTRAITS_ {
	position:absolute;
	left:703px;
	top:72px;
	width:238px;
	height:257px;
}

div.home-07_ {
	position:absolute;
	left:941px;
	top:72px;
	width:83px;
	height:696px;
}

div.logo-mid_ {
	position:absolute;
	left:0px;
	top:316px;
	width:380px;
	height:104px;
}

div.home-09_ {
	position:absolute;
	left:447px;
	top:329px;
	width:234px;
	height:23px;
}

div.home-10_ {
	position:absolute;
	left:703px;
	top:329px;
	width:238px;
	height:23px;
}

div.MUSICAL_ {
	position:absolute;
	left:447px;
	top:352px;
	width:234px;
	height:260px;
}

div.INFORMATION_ {
	position:absolute;
	left:703px;
	top:352px;
	width:238px;
	height:260px;
}

div.logo-bottom_ {
	position:absolute;
	left:0px;
	top:420px;
	width:380px;
	height:348px;
}

div.home-14_ {
	position:absolute;
	left:447px;
	top:612px;
	width:234px;
	height:22px;
}

div.home-15_ {
	position:absolute;
	left:703px;
	top:612px;
	width:238px;
	height:22px;
}

div.HOME_ {
	position:absolute;
	left:447px;
	top:634px;
	width:494px;
	height:90px;
}

div.home-17_ {
	position:absolute;
	left:447px;
	top:724px;
	width:494px;
	height:44px;
}

-->
</style>

http://www.kb-design-studios.com

 

[kylebellamy]

I've noticed that I can push it around by changing the Left to a percentage in the Table CSS. Also, this is the orginal code for the first section:

div.Table_01 {
    position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
    }

Realized that first example was my playing around with it.

http://www.kb-design-studios.com

 

[imeldesign]

You can center a website by adding this rule first:
body {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
background-color: #000000;
margin: 0px;
}

This is where I usually add the base font and font-size as well. You can leave those out.
I also use a Wrapper div to put all my other divs in and set text-align left among other things.
Hope this helps.

 

[Vragabond]

Also, I would strongly advise against structuring the entire website with absolute positioning. This will only cause problems when you add more content to it. Most of the websites I've seen can be easily done without resorting to absolute positioning.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]