Help needed!! Centering my site using css

tez30 · Jan 7, 2009

i tried a wrapper tag; centering it with a container table with a fixed width and every other method i came across. none worked for me. can somebody help me please as this is getting frustrated, i'm learning css

.

here's my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>template.jpg</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="FW MX CSS Layer" />

<style type="text/css">
</style>
<link href="css/gshd.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#ffffff">

<div id="wrapper">
  <div id="lefttopside"><img src="images/lefttopside.jpg" name="lefttopside_img" width="13" height="318" border="0" id="lefttopside_img" /></div>
  <div id="banner"><img src="images/banner.jpg" name="banner_img" width="800" height="117" border="0" id="banner_img" /></div>
  <div id="righttopside"><img src="images/righttopside.jpg" name="righttopside_img" width="13" height="318" border="0" id="righttopside_img" /></div>
  <div id="navbar"><img src="images/navbar.jpg" name="navbar_img" width="800" height="24" border="0" id="navbar_img" /></div>
  <div id="topframe"><img src="images/topframe.jpg" name="topframe_img" width="800" height="6" border="0" id="topframe_img" /></div>
  <div id="loginheader"><img src="images/loginheader.jpg" name="loginheader_img" width="186" height="21" border="0" id="loginheader_img" /></div>
  <div id="leftframe"><img src="images/leftframe.jpg" name="leftframe_img" width="5" height="529" border="0" id="leftframe_img" /></div>
  <div id="adverheader"><img src="images/adverheader.jpg" name="adverheader_img" width="417" height="21" border="0" id="adverheader_img" /></div>
  <div id="rightframe"><img src="images/rightframe.jpg" name="rightframe_img" width="5" height="529" border="0" id="rightframe_img" /></div>
  <div id="futarheader"><img src="images/futarheader.jpg" name="futarheader_img" width="187" height="21" border="0" id="futarheader_img" /></div>
  <div id="logincontent"><img src="images/logincontent.jpg" name="logincontent_img" width="186" height="129" border="0" id="logincontent_img" /></div>
  <div id="advcontent"><img src="images/advcontent.jpg" name="advcontent_img" width="417" height="121" border="0" id="advcontent_img" /></div>
  <div id="futarcontent"><img src="images/futarcontent.jpg" name="futarcontent_img" width="187" height="129" border="0" id="futarcontent_img" /></div>
  <div id="tournheader"><img src="images/tournheader.jpg" name="tournheader_img" width="417" height="20" border="0" id="tournheader_img" /></div>
  <div id="upcoheader"><img src="images/upcoheader.jpg" name="upcoheader_img" width="186" height="19" border="0" id="upcoheader_img" /></div>
  <div id="hotaheader"><img src="images/hotaheader.jpg" name="hotaheader_img" width="187" height="19" border="0" id="hotaheader_img" /></div>
  <div id="tourncontent"><img src="images/tourncontent.jpg" name="tourncontent_img" width="417" height="367" border="0" id="tourncontent_img" /></div>
  <div id="upcocontent"><img src="images/upcocontent.jpg" name="upcocontent_img" width="186" height="129" border="0" id="upcocontent_img" /></div>
  <div id="hotacontent"><img src="images/hotacontent.jpg" name="hotacontent_img" width="187" height="129" border="0" id="hotacontent_img" /></div>
  <div id="leftbottumside"><img src="images/leftbottumside.jpg" name="leftbottumside_img" width="13" height="682" border="0" id="leftbottumside_img" /></div>
  <div id="rightbottumside"><img src="images/rightbottumside.jpg" name="rightbottumside_img" width="13" height="682" border="0" id="rightbottumside_img" /></div>
  <div id="tcheader"><img src="images/tcheader.jpg" name="tcheader_img" width="186" height="20" border="0" id="tcheader_img" /></div>
  <div id="tsheader"><img src="images/tsheader.jpg" name="tsheader_img" width="187" height="20" border="0" id="tsheader_img" /></div>
  <div id="tccontent"><img src="images/tccontent.jpg" name="tccontent_img" width="186" height="211" border="0" id="tccontent_img" /></div>
  <div id="tscontent"><img src="images/tscontent.jpg" name="tscontent_img" width="187" height="211" border="0" id="tscontent_img" /></div>
  <div id="spacer"><img src="images/spacer.jpg" name="spacer_img" width="800" height="1" border="0" id="spacer_img" /></div>
  <div id="league"><img src="images/league.jpg" name="league_img" width="800" height="288" border="0" id="league_img" /></div>
  <div id="footer"><img src="images/footer.jpg" name="footer_img" width="800" height="35" border="0" id="footer_img" /></div>
</div>
</body>
</html>

css code:

Code:

#lefttopside {
	position:absolute;
	left:0px;
	top:0px;
	width:13px;
	height:318px;
	z-index:1;
	visibility:visible;
}
#banner {
	position:absolute;
	left:13px;
	top:0px;
	width:800px;
	height:117px;
	z-index:2;
	visibility:visible;
}
#righttopside {
	position:absolute;
	left:813px;
	top:0px;
	width:13px;
	height:318px;
	z-index:3;
	visibility:visible;
}
#navbar {
	position:absolute;
	left:13px;
	top:117px;
	width:800px;
	height:24px;
	z-index:4;
	visibility:visible;
}
#topframe {
	position:absolute;
	left:13px;
	top:141px;
	width:800px;
	height:6px;
	z-index:5;
	visibility:visible;
}
#loginheader {
	position:absolute;
	left:13px;
	top:147px;
	width:186px;
	height:21px;
	z-index:6;
	visibility:visible;
}
#leftframe {
	position:absolute;
	left:199px;
	top:147px;
	width:5px;
	height:529px;
	z-index:7;
	visibility:visible;
}
#adverheader {
	position:absolute;
	left:204px;
	top:147px;
	width:417px;
	height:21px;
	z-index:8;
	visibility:visible;
}
#rightframe {
	position:absolute;
	left:621px;
	top:147px;
	width:5px;
	height:529px;
	z-index:9;
	visibility:visible;
}
#futarheader {
	position:absolute;
	left:626px;
	top:147px;
	width:187px;
	height:21px;
	z-index:10;
	visibility:visible;
}
#logincontent {
	position:absolute;
	left:13px;
	top:168px;
	width:186px;
	height:129px;
	z-index:11;
	visibility:visible;
}
#advcontent {
	position:absolute;
	left:204px;
	top:168px;
	width:417px;
	height:121px;
	z-index:12;
	visibility:visible;
}
#futarcontent {
	position:absolute;
	left:626px;
	top:168px;
	width:187px;
	height:129px;
	z-index:13;
	visibility:visible;
}
#tournheader {
	position:absolute;
	left:204px;
	top:289px;
	width:417px;
	height:20px;
	z-index:14;
	visibility:visible;
}
#upcoheader {
	position:absolute;
	left:13px;
	top:297px;
	width:186px;
	height:19px;
	z-index:15;
	visibility:visible;
}
#hotaheader {
	position:absolute;
	left:626px;
	top:297px;
	width:187px;
	height:19px;
	z-index:16;
	visibility:visible;
}
#tourncontent {
	position:absolute;
	left:204px;
	top:309px;
	width:417px;
	height:367px;
	z-index:17;
	visibility:visible;
}
#upcocontent {
	position:absolute;
	left:13px;
	top:316px;
	width:186px;
	height:129px;
	z-index:18;
	visibility:visible;
}
#hotacontent {
	position:absolute;
	left:626px;
	top:316px;
	width:187px;
	height:129px;
	z-index:19;
	visibility:visible;
}
#leftbottumside {
	position:absolute;
	left:0px;
	top:318px;
	width:13px;
	height:682px;
	z-index:20;
	visibility:visible;
}
#rightbottumside {
	position:absolute;
	left:813px;
	top:318px;
	width:13px;
	height:682px;
	z-index:21;
	visibility:visible;
}
#tcheader {
	position:absolute;
	left:13px;
	top:445px;
	width:186px;
	height:20px;
	z-index:22;
	visibility:visible;
}
#tsheader {
	position:absolute;
	left:626px;
	top:445px;
	width:187px;
	height:20px;
	z-index:23;
	visibility:visible;
}
#tccontent {
	position:absolute;
	left:13px;
	top:465px;
	width:186px;
	height:211px;
	z-index:24;
	visibility:visible;
}
#tscontent {
	position:absolute;
	left:626px;
	top:465px;
	width:187px;
	height:211px;
	z-index:25;
	visibility:visible;
}
#spacer {
	position:absolute;
	left:13px;
	top:676px;
	width:800px;
	height:1px;
	z-index:26;
	visibility:visible;
}
#league {
	position:absolute;
	left:13px;
	top:677px;
	width:800px;
	height:288px;
	z-index:27;
	visibility:visible;
}
#footer {
	position:absolute;
	left:13px;
	top:965px;
	width:800px;
	height:35px;
	z-index:28;
	visibility:visible;
}
#wrapper {
	margin:0 auto;
}

dmi · Jan 7, 2009

So your site is going to be made out of images only?

You didn't show us the CSS code -- the css/gshd.css file.

DebX420 · Jan 8, 2009

This looks like the culprit:

position:absolute;

Change all to:

position:center;

tez30 · Jan 8, 2009

that did not work the page was all screwed up

nasaboy007 · Jan 8, 2009

try this in your css:

body {
text-align: center;
}

sometimes it works, sometimes it doesnt. it may not since you're using absolute positioning.

if that's the case, then i think you may have to not use absolute positioning and switch to relative. alternatively, you could add left: auto and right:auto but that may not work...

ZeRohiLL · Jan 8, 2009

body {margin: 0 auto; width:1004px;}

width is a parameter, it depends on your target resolution.

-TV- · Jan 8, 2009

#wrapper {

margin-left: auto;
margin-right: auto;

}

Tv

Help needed!! Centering my site using css

Established Member

VIP Member

VIP Member

Established Member

VIP Member

Account Closed

Established Member

Similar threads

We're social

Mindlyzer.com

AllFruitDiet.com

BBWCuddle.com

NewAgeLandscaping.com

InsuranceImmediately.com

HolidayKits.com

00001.xyz

Wenzi.xyz

Koyo.org

sygy.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling