Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centering a CSS layout that Photoshop created 1

Status
Not open for further replies.

kylebellamy

Programmer
Jan 24, 2002
398
US
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:
Code:
<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>

 
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:

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

Realized that first example was my playing around with it. :)

 
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.
 
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]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top