alignment of website

87dave87 · October 20, 2008

How would I go about aligning the following website? I have tried containers and the like with no result - it stays on the left.

Thanks in advance.

<html>
<head>
<title>craftingsites</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body
{
text-align: center;
}

#cf-01 {
position:absolute;
left:0px;
top:0px;
width:996px;
height:46px;
}

#cf-02 {
position:absolute;
left:0px;
top:46px;
width:241px;
height:101px;
}

#cf-03 {
position:absolute;
left:241px;
top:46px;
width:331px;
height:101px;
}

#cf-04 {
position:absolute;
left:572px;
top:46px;
width:194px;
height:101px;
}

#cf-05 {
position:absolute;
left:766px;
top:46px;
width:230px;
height:71px;
}

#cf-06 {
position:absolute;
left:766px;
top:117px;
width:80px;
height:30px;
}

#cf-07 {
position:absolute;
left:846px;
top:117px;
width:106px;
height:20px;
}

#cf-08 {
position:absolute;
left:952px;
top:117px;
width:44px;
height:30px;
}

#cf-09 {
position:absolute;
left:846px;
top:137px;
width:106px;
height:10px;
}

#cf-10 {
position:absolute;
left:0px;
top:147px;
width:27px;
height:51px;
}

#cf-11 {
position:absolute;
left:27px;
top:147px;
width:46px;
height:51px;
}

#cf-12 {
position:absolute;
left:73px;
top:147px;
width:2px;
height:51px;
}

#cf-13 {
position:absolute;
left:75px;
top:147px;
width:89px;
height:51px;
}

#cf-14 {
position:absolute;
left:164px;
top:147px;
width:2px;
height:51px;
}

#cf-15 {
position:absolute;
left:166px;
top:147px;
width:110px;
height:51px;
}

#cf-16 {
position:absolute;
left:276px;
top:147px;
width:2px;
height:51px;
}

#cf-17 {
position:absolute;
left:278px;
top:147px;
width:94px;
height:51px;
}

#cf-18 {
position:absolute;
left:372px;
top:147px;
width:2px;
height:51px;
}

#cf-19 {
position:absolute;
left:374px;
top:147px;
width:94px;
height:51px;
}

#cf-20 {
position:absolute;
left:468px;
top:147px;
width:2px;
height:51px;
}

#cf-21 {
position:absolute;
left:470px;
top:147px;
width:76px;
height:51px;
}

#cf-22 {
position:absolute;
left:546px;
top:147px;
width:2px;
height:51px;
}

#cf-23 {
position:absolute;
left:548px;
top:147px;
width:74px;
height:51px;
}

#cf-24 {
position:absolute;
left:622px;
top:147px;
width:2px;
height:51px;
}

#cf-25 {
position:absolute;
left:624px;
top:147px;
width:63px;
height:51px;
}

#cf-26 {
position:absolute;
left:687px;
top:147px;
width:2px;
height:51px;
}

#cf-27 {
position:absolute;
left:689px;
top:147px;
width:35px;
height:51px;
}

#cf-28 {
position:absolute;
left:724px;
top:147px;
width:40px;
height:51px;
}

#cf-29 {
position:absolute;
left:764px;
top:147px;
width:212px;
height:51px;
}

#cf-30 {
position:absolute;
left:976px;
top:147px;
width:20px;
height:51px;
}

#cf-31 {
position:absolute;
left:0px;
top:198px;
width:996px;
height:23px;
}

#cf-32 {
position:absolute;
left:0px;
top:221px;
width:23px;
height:535px;
}

#cf-33 {
position:absolute;
left:23px;
top:221px;
width:730px;
height:421px;
}

#cf-34 {
position:absolute;
left:753px;
top:221px;
width:8px;
height:421px;
}

#cf-35 {
position:absolute;
left:761px;
top:221px;
width:214px;
height:35px;
}

#cf-36 {
position:absolute;
left:975px;
top:221px;
width:21px;
height:535px;
}

#cf-37 {
position:absolute;
left:761px;
top:256px;
width:214px;
height:88px;
}

#cf-38 {
position:absolute;
left:761px;
top:344px;
width:214px;
height:43px;
}

#cf-39 {
position:absolute;
left:761px;
top:387px;
width:214px;
height:86px;
}

#cf-40 {
position:absolute;
left:761px;
top:473px;
width:214px;
height:46px;
}

#cf-41 {
position:absolute;
left:761px;
top:519px;
width:214px;
height:93px;
}

#cf-42 {
position:absolute;
left:761px;
top:612px;
width:214px;
height:30px;
}

#cf-43 {
position:absolute;
left:23px;
top:642px;
width:952px;
height:19px;
}

#cf-44 {
position:absolute;
left:23px;
top:661px;
width:367px;
height:22px;
}

#cf-45 {
position:absolute;
left:390px;
top:661px;
width:177px;
height:90px;
}

#cf-46 {
position:absolute;
left:567px;
top:661px;
width:3px;
height:90px;
}

#cf-47 {
position:absolute;
left:570px;
top:661px;
width:177px;
height:90px;
}

#cf-48 {
position:absolute;
left:747px;
top:661px;
width:228px;
height:41px;
}

#cf-49 {
position:absolute;
left:23px;
top:683px;
width:367px;
height:68px;
}

#cf-50 {
position:absolute;
left:747px;
top:702px;
width:228px;
height:49px;
}

#cf-51 {
position:absolute;
left:23px;
top:751px;
width:952px;
height:5px;
}

#cf-52 {
position:absolute;
left:0px;
top:756px;
width:996px;
height:17px;
}

#cf-53 {
position:absolute;
left:0px;
top:773px;
width:996px;
height:21px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<div id="content">
<body>
<!-- ImageReady Slices (craftingsites.psd) -->

<div id="cf-01">
<img src="images/cf_01.png" width=996 height=46 alt="">
</div>
<div id="cf-02">
<img src="images/cf_02.png" width=241 height=101 alt="">
</div>
<div id="cf-03">
<img src="images/cf_03.png" width=331 height=101 alt="">
</div>
<div id="cf-04">
<img src="images/cf_04.png" width=194 height=101 alt="">
</div>
<div id="cf-05">
<img src="images/cf_05.png" width=230 height=71 alt="">
</div>
<div id="cf-06">
<img src="images/cf_06.png" width=80 height=30 alt="">
</div>
<div id="cf-07">
<img src="images/cf_07.png" width=106 height=20 alt="">
</div>
<div id="cf-08">
<img src="images/cf_08.png" width=44 height=30 alt="">
</div>
<div id="cf-09">
<img src="images/cf_09.png" width=106 height=10 alt="">
</div>
<div id="cf-10">
<img src="images/cf_10.png" width=27 height=51 alt="">
</div>
<div id="cf-11">
<img src="images/cf_11.png" width=46 height=51 alt="">
</div>
<div id="cf-12">
<img src="images/cf_12.png" width=2 height=51 alt="">
</div>
<div id="cf-13">
<img src="images/cf_13.png" width=89 height=51 alt="">
</div>
<div id="cf-14">
<img src="images/cf_14.png" width=2 height=51 alt="">
</div>
<div id="cf-15">
<img src="images/cf_15.png" width=110 height=51 alt="">
</div>
<div id="cf-16">
<img src="images/cf_16.png" width=2 height=51 alt="">
</div>
<div id="cf-17">
<img src="images/cf_17.png" width=94 height=51 alt="">
</div>
<div id="cf-18">
<img src="images/cf_18.png" width=2 height=51 alt="">
</div>
<div id="cf-19">
<img src="images/cf_19.png" width=94 height=51 alt="">
</div>
<div id="cf-20">
<img src="images/cf_20.png" width=2 height=51 alt="">
</div>
<div id="cf-21">
<img src="images/cf_21.png" width=76 height=51 alt="">
</div>
<div id="cf-22">
<img src="images/cf_22.png" width=2 height=51 alt="">
</div>
<div id="cf-23">
<img src="images/cf_23.png" width=74 height=51 alt="">
</div>
<div id="cf-24">
<img src="images/cf_24.png" width=2 height=51 alt="">
</div>
<div id="cf-25">
<img src="images/cf_25.png" width=63 height=51 alt="">
</div>
<div id="cf-26">
<img src="images/cf_26.png" width=2 height=51 alt="">
</div>
<div id="cf-27">
<img src="images/cf_27.png" width=35 height=51 alt="">
</div>
<div id="cf-28">
<img src="images/cf_28.png" width=40 height=51 alt="">
</div>
<div id="cf-29">
<img src="images/cf_29.png" width=212 height=51 alt="">
</div>
<div id="cf-30">
<img src="images/cf_30.png" width=20 height=51 alt="">
</div>
<div id="cf-31">
<img src="images/cf_31.png" width=996 height=23 alt="">
</div>
<div id="cf-32">
<img src="images/cf_32.png" width=23 height=535 alt="">
</div>
<div id="cf-33">
<img src="images/cf_33.png" width=730 height=421 alt="">
</div>
<div id="cf-34">
<img src="images/cf_34.png" width=8 height=421 alt="">
</div>
<div id="cf-35">
<img src="images/cf_35.png" width=214 height=35 alt="">
</div>
<div id="cf-36">
<img src="images/cf_36.png" width=21 height=535 alt="">
</div>
<div id="cf-37">
<img src="images/cf_37.png" width=214 height=88 alt="">
</div>
<div id="cf-38">
<img src="images/cf_38.png" width=214 height=43 alt="">
</div>
<div id="cf-39">
<img src="images/cf_39.png" width=214 height=86 alt="">
</div>
<div id="cf-40">
<img src="images/cf_40.png" width=214 height=46 alt="">
</div>
<div id="cf-41">
<img src="images/cf_41.png" width=214 height=93 alt="">
</div>
<div id="cf-42">
<img src="images/cf_42.png" width=214 height=30 alt="">
</div>
<div id="cf-43">
<img src="images/cf_43.png" width=952 height=19 alt="">
</div>
<div id="cf-44">
<img src="images/cf_44.png" width=367 height=22 alt="">
</div>
<div id="cf-45">
<img src="images/cf_45.png" width=177 height=90 alt="">
</div>
<div id="cf-46">
<img src="images/cf_46.png" width=3 height=90 alt="">
</div>
<div id="cf-47">
<img src="images/cf_47.png" width=177 height=90 alt="">
</div>
<div id="cf-48">
<img src="images/cf_48.png" width=228 height=41 alt="">
</div>
<div id="cf-49">
<img src="images/cf_49.png" width=367 height=68 alt="">
</div>
<div id="cf-50">
<img src="images/cf_50.png" width=228 height=49 alt="">
</div>
<div id="cf-51">
<img src="images/cf_51.png" width=952 height=5 alt="">
</div>
<div id="cf-52">
<img src="images/cf_52.png" width=996 height=17 alt="">
</div>
<div id="cf-53">
<img src="images/cf_53.png" width=996 height=21 alt="">
</div>
</body>
</html>

dropfaith · October 20, 2008

make a container

with this css

margin:0 auto;

will center it

87dave87 · October 20, 2008

I have: -

#content
{
width: 800px;
margin: 0 auto
}

and then ive wrapped: -

<div id="content"></div>

around the content with no result.

dropfaith · October 20, 2008

your using absolute posistioning for all your elements

which is going to override a container

87dave87 · October 20, 2008

thats how photoshop is outputting the css - how should I be doing them?

jcombs_31 · October 20, 2008

Without a photo editing program creating css for you. You were just told how to do it above. Don't use absolute positioning unless you really need to.

haku · October 20, 2008

Ya, you really need to stay away from the auto generated code by photoshop. It produces code that is absolute garbage, as you are coming to realize I'm sure.

You can center that code by wrapping all those hundreds of divs in a wrapper, giving the wrapper a set width, and an auto left and right margin, and setting the position on the wrapper to relative.

<div id="wrapper">
// all the divs
</div>

#wrapper
{
   width: ___px; //set the width here
   margin: 0 auto;
   position: relative;
}

Sign In

alignment of website

Recommended Posts

87dave87

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

87dave87

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

87dave87

Link to comment

Share on other sites

jcombs_31

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information