Centering website using css

W

wiileg3nd

New Member
Messages
103
Reaction score
0
Points
0
My website template was built in photoshop, optimzed, sliced, and generated using photoshop. It made the images CSS. I am trying to make my template centered, I have followed tutorials on numerous sites and It has never worked. I must be doing somthing wrong.

I would appreciate it if someone could help me :cool:

Code: 
<html>

<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">

#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:941px;
	top:861px;
	width:12px;
	height:22px;
}
.style1 {color: #FFFFFF}
.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="wrap">

<div id="Table_01">
	<div id="animatedv3-01">
		<img src="http://forums.x10hosting.com/images/animatedv3_01.gif" width="953" height="15" alt="">
	</div>
	<div id="animatedv3-02">
		<img src="http://forums.x10hosting.com/images/animatedv3_02.gif" alt="" width="95" height="193" align="middle">
	</div>
	<div id="animatedv3-03">
		<img src="http://forums.x10hosting.com/images/animatedv3_03.gif" width="177" height="155" alt="">
	</div>
	<div id="animatedv3-04">
		<img src="http://forums.x10hosting.com/images/animatedv3_04.gif" alt="" width="583" height="155" align="absmiddle">
	</div>
	<div id="animatedv3-05">
		<img src="http://forums.x10hosting.com/images/animatedv3_05.gif" width="98" height="194" alt="">
	</div>
	<div id="animatedv3-06">
		<img src="http://forums.x10hosting.com/images/animatedv3_06.gif" width="44" height="38" alt="">
	</div>
	<div id="animatedv3-07">
		<img src="http://forums.x10hosting.com/images/home.png" width="113" height="21" alt="">
	</div>
	<div id="animatedv3-08">	  <a href="http://forums.x10hosting.com/forums"><img src="http://forums.x10hosting.com/images/forums.png" alt="" width="113" height="21" border="0"></a>
  </div>
	<div id="animatedv3-09">
		<a href="http://forums.x10hosting.com/chat"><img src="http://forums.x10hosting.com/images/Chat.png" alt="" width="113" height="21" border="0"></a>
	</div>
	<div id="animatedv3-10">
		<img src="http://forums.x10hosting.com/images/games.png" width="113" height="21" alt="">
	</div>
	<div id="animatedv3-11">
		<img src="http://forums.x10hosting.com/images/animatedv3_11.gif" width="1" height="38" alt="">
	</div>
	<div id="animatedv3-12">
		<img src="http://forums.x10hosting.com/images/guides.png" width="113" height="21" alt="">
	</div>
	<div id="animatedv3-13">
		<img src="http://forums.x10hosting.com/images/animatedv3_13.gif" width="2" height="38" alt="">
	</div>
	<div id="animatedv3-14">
		<img src="http://forums.x10hosting.com/images/tournaments.png" width="113" height="21" alt="">
	</div>
	<div id="animatedv3-15">
		<img src="http://forums.x10hosting.com/images/animatedv3_15.gif" width="34" height="38" alt="">
	</div>
	<div id="animatedv3-16">
		<img src="http://forums.x10hosting.com/images/animatedv3_16.gif" width="111" height="17" alt="">
	</div>
	<div id="animatedv3-17">
		<img src="http://forums.x10hosting.com/images/animatedv3_17.gif" width="455" height="16" alt="">
	</div>
	<div id="animatedv3-18">
		<img src="http://forums.x10hosting.com/images/animatedv3_18.gif" width="113" height="16" alt="">
	</div>
	<div id="animatedv3-19">
		<img src="http://forums.x10hosting.com/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="http://forums.x10hosting.com/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="http://forums.x10hosting.com/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="http://forums.x10hosting.com/images/animatedv3_25.gif" width="37" height="1" alt="">
	</div>
	<div id="animatedv3-26">
		<img src="http://forums.x10hosting.com/images/animatedv3_26.gif" width="16" height="22" alt="">
	</div>
	<div id="animatedv3-28">
	</div>
	<div id="animatedv3-29">
		<img src="http://forums.x10hosting.com/images/animatedv3_29.gif" width="12" height="22" alt="">
	</div>
</div>
</div>

<!-- End ImageReady Slices -->
</body>
</center>
</html>

Thank you :)
 
Last edited:
E

EdwardJH

New Member
Messages
1
Reaction score
0
Points
0
The problem is, from what I can see, that you are using "absolute" positioning, thereby plonking each image in an exact location regardless of any margin settings or what it is contained within.

eg. left:95px; top:15px; - this is telling the image to be positioned 15px from the top and 95px from the left.

To "center" the site, you would need to change the position type.


I have never used PhotoShops website generation tool, but is there an option there to change how it is positioned? It's just that the CSS at the moment means it could take a while to fix.

I would try and fix it for you, but it is so hard without images... So sorry about that.

Hope that helps though :)
 
leafypiggy

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
nawww

use this:

Code: 
#container {
width: lengthofchoicepx;
margin: 0 auto 0 auto;
text-align: left; 
}

then put everything after <body> and before </body> into:

Code: 
<div id="container"> 

<!-- Your Site -->  


</div>
 
R

ryanlwh

New Member
Messages
4
Reaction score
0
Points
0
And get rid of position:center. There's no such value for "position" in CSS. Maybe you meant text-align:center. It works but is not the best way to go. Auto margins is the best.
 
Last edited:
R

rima123

New Member
Messages
9
Reaction score
0
Points
0
put a single row & columned table around your template and center it in <td> like

<table width="100%">
<tr>
<td align="center">

YOUR TEMPLATE CONTENT

</td>
</tr>
</table>

their is not better then this then doing routine circus...


enjoy
bgb76
hydhost.com
 
marshian

marshian

New Member
Messages
526
Reaction score
9
Points
0
@EdwardJH
This is not completely correct. Absolute positioning positions the element according to the position of the first parent element which is not "static". So in this case, you can add a parent element, place it in the center and use "relative" positioning.

@ryanlwh
True, there is no position = center, but automargin doesn't work in all browsers either, so it's best to use multiple methods at the same time.

@rima123
For some reason, people don't tend to like tables a lot...


This is what I'ld do:
Put a <div> around everything which you want centered and give it the following css properties:
Code: 
text-align: left;
display: block;
width: 800px;
margin-left: auto;
margin-right: auto;
Then give the following property to the body:
Code: 
text-align: center;

Explenation:
text-align of the body: some browsers (which do not understand standards) will then position all block elements in the center (which makes no sense, but it works.)
text-align of the div: you might not want all your text centered, so we'll make sure everything goes left again.
display: block should be the standard value, but it never hurts to be extra certain.
width: you need to give a width or some browsers will not be able to find out how wide it should be, and then they just make it 100%... This should be adjusted to your needs, probably the best result would be if you fit it exactly around your content.
margin: according to w3c, this is the way to position a block element in the center: left and right margin auto. This works in browsers who actually know the standards. (eg. FF2, FF3, (IE8))


Unless I've made a mistake somewhere, this should help you to get it as you want it.

- Marshian
 
Last edited:
W

wiileg3nd

New Member
Messages
103
Reaction score
0
Points
0
I tried all of your suggestions and none of them have worked :dunno:. Everyone seems to be complaining about the code though, maybe image ready sucks at outputting css lol, I am going to attempt to do this myself.

Is there any good tutorials on the internet for someone beginning css... I have never seen this language before, I only know the basics of html.
 
W

wiileg3nd

New Member
Messages
103
Reaction score
0
Points
0
Well, I change all the values from absolute to relative, and the template messed up :D.

I think placing things on relative made my template put one image per line, and i need multiple images per line.

Here is my code

Code: 
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>animatedv3</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (animatedv3.psd) -->
<style type="text/css">
<!--

#Table_01 {
text-align: left;
display: block;
width: 953px;
margin-left: auto;
margin-right: auto;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#animatedv3-29 {
	position:relative;
	left:941px;
	top:861px;
	width:12px;
	height:22px;
	}
}
.style1 {color: #FFFFFF}
.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; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Your Site -->  
<!-- ImageReady Slices (animatedv3.psd) -->
<div id="Table_01">
text-align: center;

	<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" width="95" height="193" alt="">
	</div>
	<img src="../images/animatedv3_03.gif" width="177" height="155" alt="">	<div id="animatedv3-03">
	</div>
	<div id="animatedv3-04">
		<img src="../images/animatedv3_04.gif" width="583" height="155" alt="">
	</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">
		<img src="../images/forums.png" width="113" height="21" alt="">
  </div>
	<div id="animatedv3-09">
		<img src="../images/Chat.png" width="113" height="21" alt="">
	</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>
<!-- End ImageReady Slices -->
</body>
</html>

So now for my question.. how do I align this template properly so i can center it?
 
marshian

marshian

New Member
Messages
526
Reaction score
9
Points
0
wiileg3nd said:
Well, I change all the values from absolute to relative, and the template messed up :D.
Click to expand...

I didn't say to change all absolut into relative! If you set the parent to anything but static, the absolute positioning of the children will be relative to the parent instead of the screen.

example (might be not really working, but ok):
HTML: 
<html>
<body>
<div style="position: static;" id="div1">
<div style="position: absolute; left: 50px; top: 50px;" id="div2"></div>
</div>
</div>
</body>
</html>
--> div2 is 50px off the top and 50px off the left side of the screen. (all parents of div2 are static (div1, body, document) so the absolute positioning relative to the browser's view)

HTML: 
<html>
<body>
<div style="position: absolute; top: 50px; left: 50px;" id="div1">
<div style="position: absolute; left: 50px; top: 50px;" id="div2"></div>
</div>
</div>
</body>
</html>
div2 is positioned at left: 100px and top: 100px. (the parent element is not staticly positioned, so the absolute positioning of div2 is relative to div1 instead of the browser's view.)

Hope that made it more clear,
Marshian
 
You must log in or register to reply here.
Top