CSS Forum

**zarola** · 08-23-2008, 06:26 PM

I have read the sticky, and plenty of other sites, and for some reason i can not get centering to work =(. This is my first attempt at a webiste, so I am not very good at it :P. Here is the code, I hope someone can help

.

Code:

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Shoot Mii</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (animatedv3.psd) -->
<style type="text/css">

body {
  text-align: center;
  }

#container {
  margin: 0 auto;
  width: xxxpx;
  }
#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;
  }
#Table_01 {
	position:center;
	left:0px
	top:0px;
	width:953px;
	height:883px;
}

#animatedv3-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:953px;
	height:15px;
}

#animatedv3-02 {
	position:absolute;
	left:0px;
	top:15px;
	width:95px;
	height:193px;
}

#animatedv3-03 {
	position:absolute;
	left:95px;
	top:15px;
	width:177px;
	height:155px;
}

#animatedv3-04 {
	position:absolute;
	left:272px;
	top:15px;
	width:583px;
	height:155px;
}

#animatedv3-05 {
	position:absolute;
	left:855px;
	top:15px;
	width:98px;
	height:194px;
}

#animatedv3-06 {
	position:absolute;
	left:95px;
	top:170px;
	width:44px;
	height:38px;
}

#animatedv3-07 {
	position:absolute;
	left:139px;
	top:170px;
	width:113px;
	height:22px;
}

#animatedv3-08 {
	position:absolute;
	left:252px;
	top:170px;
	width:116px;
	height:22px;
}

#animatedv3-09 {
	position:absolute;
	left:368px;
	top:170px;
	width:113px;
	height:22px;
}

#animatedv3-10 {
	position:absolute;
	left:481px;
	top:170px;
	width:113px;
	height:22px;
}

#animatedv3-11 {
	position:absolute;
	left:594px;
	top:170px;
	width:1px;
	height:38px;
}

#animatedv3-12 {
	position:absolute;
	left:595px;
	top:170px;
	width:113px;
	height:22px;
}

#animatedv3-13 {
	position:absolute;
	left:708px;
	top:170px;
	width:2px;
	height:38px;
}

#animatedv3-14 {
	position:absolute;
	left:710px;
	top:170px;
	width:111px;
	height:21px;
}

#animatedv3-15 {
	position:absolute;
	left:821px;
	top:170px;
	width:34px;
	height:38px;
}

#animatedv3-16 {
	position:absolute;
	left:710px;
	top:191px;
	width:111px;
	height:17px;
}

#animatedv3-17 {
	position:absolute;
	left:139px;
	top:192px;
	width:455px;
	height:16px;
}

#animatedv3-18 {
	position:absolute;
	left:595px;
	top:192px;
	width:113px;
	height:16px;
}

#animatedv3-19 {
	position:absolute;
	left:0px;
	top:208px;
	width:58px;
	height:653px;
}

#animatedv3-20 {
	position:absolute;
	left:58px;
	top:208px;
	width:37px;
	height:652px;
}

#animatedv3-21 {
	position:absolute;
	left:95px;
	top:208px;
	width:760px;
	height:25px;
}

#animatedv3-22 {
	position:absolute;
	left:853px;
	top:207px;
	width:41px;
	height:652px;
}

#animatedv3-23 {
	position:absolute;
	left:896px;
	top:209px;
	width:57px;
	height:652px;
}

#animatedv3-24 {
	position:absolute;
	left:95px;
	top:233px;
	width:760px;
	height:650px;
}

#animatedv3-25 {
	position:absolute;
	left:58px;
	top:860px;
	width:37px;
	height:1px;
}

#animatedv3-26 {
	position:absolute;
	left:0px;
	top:861px;
	width:16px;
	height:22px;
}

#animatedv3-27 {
	position:absolute;
	left:16px;
	top:861px;
	width:79px;
	height:22px;
}

#animatedv3-28 {
	position:absolute;
	left:855px;
	top:861px;
	width:86px;
	height:22px;
}

#animatedv3-29 {
	position:absolute;
	left:944px;
	top:861px;
	width:12px;
	height:22px;
}
.style1 {
	color: #FFFFFF;
	overflow: auto;
	position: static;
	z-index: auto;
	height: auto;
	width: auto;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	clip:  rect(auto auto auto auto);
}
.style2 {color: #808080}

-->
</style>
<!-- End ImageReady Styles -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><!-- TemplateParam name="mr" type="text" value="" -->
</head>
<body style="background-color:#000000; margin-top: 0px auto; margin-bottom: 0px auto; margin-left: 0px auto; margin-right: 0px auto;">
<!-- ImageReady Slices (animatedv3.psd) -->
<div id="container">
	<div id="animatedv3-01">
		<img src="../images/animatedv3_01.gif" width="953" height="15" alt="">
	</div>
	<div id="animatedv3-02">
		<img src="../images/animatedv3_02.gif" alt="" width="95" height="193" align="middle">
	</div>
	<div id="animatedv3-03">
		<img src="../images/animatedv3_03.gif" width="177" height="155" alt="">
	</div>
	<div id="animatedv3-04">
		<img src="../images/animatedv3_04.gif" alt="" width="583" height="155" align="absmiddle">
	</div>
	<div id="animatedv3-05">
		<img src="../images/animatedv3_05.gif" width="98" height="194" alt="">
	</div>
	<div id="animatedv3-06">
		<img src="../images/animatedv3_06.gif" width="44" height="38" alt="">
	</div>
	<div id="animatedv3-07">
		<img src="../images/home.png" width="113" height="21" alt="">
	</div>
	<div id="animatedv3-08">	  <a href="../forums"><img src="../images/forums.png" alt="" width="113" height="21" border="0"></a>
  </div>
	<div id="animatedv3-09">
		<a href="../chat"><img src="../images/Chat.png" alt="" width="113" height="21" border="0"></a>
	</div>
	<div id="animatedv3-10">
		<img src="../images/games.png" width="113" height="21" alt="">
	</div>
	<div id="animatedv3-11">
		<img src="../images/animatedv3_11.gif" width="1" height="38" alt="">
	</div>
	<div id="animatedv3-12">
		<img src="../images/guides.png" width="113" height="21" alt="">
	</div>
	<div id="animatedv3-13">
		<img src="../images/animatedv3_13.gif" width="2" height="38" alt="">
	</div>
	<div id="animatedv3-14">
		<img src="../images/tournaments.png" width="113" height="21" alt="">
	</div>
	<div id="animatedv3-15">
		<img src="../images/animatedv3_15.gif" width="34" height="38" alt="">
	</div>
	<div id="animatedv3-16">
		<img src="../images/animatedv3_16.gif" width="111" height="17" alt="">
	</div>
	<div id="animatedv3-17">
		<img src="../images/animatedv3_17.gif" width="455" height="16" alt="">
	</div>
	<div id="animatedv3-18">
		<img src="../images/animatedv3_18.gif" width="113" height="16" alt="">
	</div>
	<div id="animatedv3-19">
		<img src="../images/animatedv3_19.gif" width="58" height="653" alt="">
	</div>
	<div id="animatedv3-20">
      <table width="37" height="652" border="0" background="../images/animatedv3_20.gif">
        <tr>
          <th scope="col"><!-- TemplateBeginEditable name="lp" --><!-- TemplateEndEditable --></th>
        </tr>
      </table>	
    </div>
	<div id="animatedv3-21">
		<img src="../images/animatedv3_21.gif" width="760" height="25" alt="">
	</div>
	<div id="animatedv3-22">
		<table width="41" height="652" border="0">
            <tr>
              <th background="../images/animatedv3_22.gif" scope="col"><!-- TemplateBeginEditable name="rp" --><!-- TemplateEndEditable --></th>
            </tr>
      </table>
	</div>
	<div id="animatedv3-23">
		<img src="../images/animatedv3_23.gif" width="57" height="652" alt="">
	</div>
  <div id="animatedv3-24" mr="@@(mr)@@">
    <!-- TemplateBeginEditable name="mr" --><!-- TemplateEndEditable -->
    <p>&nbsp;</p>
	  <p>&nbsp;</p>
  </div>
	<div id="animatedv3-25">
		<img src="../images/animatedv3_25.gif" width="37" height="1" alt="">
	</div>
	<div id="animatedv3-26">
		<img src="../images/animatedv3_26.gif" width="16" height="22" alt="">
	</div>
	<div id="animatedv3-28">
	</div>
	<div id="animatedv3-29">
		<img src="../images/animatedv3_29.gif" width="12" height="22" alt="">
	
	</div>
</div>
</div>
</div>
<!-- End ImageReady Slices -->
</body>

</center>
</html>

**wayfarer07** · 08-24-2008, 09:20 AM

What's this?

Quote:

width: xxxpx;

for the #container rule. Of course it won't center if it doesn't have a width.
Also, what is this?

Quote:

</body>
</center>

A closing </center> tag, after the closing </body> tag?? This tag is depreciated anyway, and shouldn't be used, but even if it was ok, it definitely doesn't belong here.

**zarola** · 10:05 AM

The center tag was a suggestion from someone else, I forgot to remove that.

I filled in the width (width of page), and the page still wont center

Also removed extra container tag.

**wayfarer07** · 10:21 AM

link?
BTW,

Code:

position:center;

is meaningless, and all of that

Code:

position: absolute

is totally uneeded...

**zarola** · 10:40 AM

http://one.xthost.info/shootmii/site...animatedv3.dwt is the file in question, this is a template im making in dw.

Anything from /site will be pages on my website. I have a general layout down but decided not to do much writing until I get the template down

.

I removed all abolute tags, and now it seems like it will only put one image per line. So now i have a bunch of images running down the page, and the images are not able to be placed on the same line. Does this mean I sliced it wrong in photoshop?

**wayfarer07** · 08-24-2008, 10:39 AM

I'm about to leave... I guess I was hoping to see an actual live link of exactly how the site is displaying in the browser. I can help you later today, but in the meantime, if you can post the site to the web so we can look at it, that would be very helpful...

**zarola** · 08-24-2008, 11:06 AM

http://one.xthost.info/remake/Templa...imatedv3uc.htm

Thats what it looks like now.

http://one.xthost.info/remake/should.htm

Thats what it should look like.

Thanks for you help

**LadynRed** · 08-24-2008, 02:02 PM

1 - your DOCTYPE is in the wrong place, it belongs at the very TOP of your document, even before the HTML declaration.

2 - Get RID of all the absolute positioning, it's not necessary and causes problems, particularly with IE. Typical DW garbage code I'm afraid. Learn to use the normal document flow and floats for your layout.

3 - position:center - invalid, get rid of it.

4 - Set #container to position:relative and that should be the only positioning you need for the layout. Then with margin: 0 auto; on #container it will center.

You've got that layout all chopped up like you would with a table and that is the wrong approach. I suggest you try reading this: http://www.cssslicingguide.com