Center Photoshop Generated Site

Discussion in 'HTML & Website Design' started by encom, May 27, 2009.

0
  1. #1
    Hi, im new here. How can I center this basic layout:

    
<html>
<head>
<title>homepage_content</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (homepage_content.psd) -->
<style type="text/css">
<!--

#homepage_container {
	position:absolute;
	margin:0 auto;
	top:0px;
	width:919px;
	height:742px;
}

#homepage-content-tl {
	position:absolute;
	left:0px;
	top:0px;
	width:444px;
	height:356px;
	background-image: url(includes/site_images/homepage_content_tl.gif);
	background-repeat:no-repeat;
}

#homepage-content-02 {
	position:absolute;
	left:444px;
	top:0px;
	width:31px;
	height:742px;
}

#homepage-content-tr {
	position:absolute;
	left:475px;
	top:0px;
	width:444px;
	height:356px;
	background-image: url(includes/site_images/homepage_content_tr.gif);
	background-repeat:no-repeat;
}

#homepage-content-04 {
	position:absolute;
	left:0px;
	top:356px;
	width:444px;
	height:30px;
}

#homepage-content-05 {
	position:absolute;
	left:475px;
	top:356px;
	width:444px;
	height:30px;
}

#homepage-content-bl {
	position:absolute;
	left:0px;
	top:386px;
	width:444px;
	height:356px;
	background-image: url(includes/site_images/homepage_content_bl.gif);
	background-repeat:no-repeat;
}

#homepage-content-br {
	position:absolute;
	left:475px;
	top:386px;
	width:444px;
	height:356px;
	background-image: url(includes/site_images/homepage_content_br.gif);
	background-repeat:no-repeat;
}

#textbox {
	padding: 20px 20px 20px 20px;
	font-family: Arial;
	font-size: 16px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#c0cef6; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (homepage_content.psd) -->
<div id="homepage_container">
	<div id="homepage-content-tl">
		<div id="textbox">
        	Content
        </div>
	</div>
	<div id="homepage-content-02">
	</div>
	<div id="homepage-content-tr">
		<div id="textbox">
        	Content
        </div>
	</div>
	<div id="homepage-content-04">
	</div>
	<div id="homepage-content-05">
	</div>
	<div id="homepage-content-bl">
		<div id="textbox">
        	Content
        </div>
	</div>
	<div id="homepage-content-br">
    	<div id="textbox">
        	Content
        </div>
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
    Code (markup):
     
    encom, May 27, 2009 IP
  2. HorseGalleria

    HorseGalleria Peon

    Messages:
    91
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can start off by changing your body tag:

    <body style="background-color:#c0cef6; margin:0 auto;text-align:center;">

    Your div containers are using position attributes to fix the locations. Do you want these locations fixed?
     
    HorseGalleria, May 27, 2009 IP
  3. Voya

    Voya Member

    Messages:
    61
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    45
    #3
    remove position:absolute; from the css parameters and add this codes to the body & divs

    body { text-align:center; }
    divs { margin:0 auto; text-align:left; }
     
    Voya, May 28, 2009 IP
  4. encom

    encom Member

    Messages:
    58
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    Thankyou so much, this has been a great help
     
    encom, May 31, 2009 IP
  5. bernadus

    bernadus Peon

    Messages:
    166
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    thanks, this also help me
     
    bernadus, May 31, 2009 IP
  6. morg

    morg Peon

    Messages:
    90
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    first of all why the hell is your stylesheet in an html comment block?
     
    morg, May 31, 2009 IP