...
PDA

Please help center my website!

tyolson
01-24-2012, 03:25 AM
Can anyone please tell me what I have to do in order to center my website.

This is what I all did
1) I had a website designed in photoshop
2) I then sliced it up into images
3) I used "save for web and devices"
4) In photoshop settings i generated css for my slices
5) I opened everything up in dreamweaver, it looks like how it is suppose to
6) I then try centering, and NOTHING will work.



Can anyone please take a look at my code and tell me what I got to do in order to center my entire website? I've been searching for hours and hours looking for an answer :(

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

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:600px;
height:800px;
}

#index-mysportbikemods3-01 {
position:absolute;
left:0px;
top:0px;
width:600px;
height:178px;
}

#index-mysportbikemods3-02 {
position:absolute;
left:0px;
top:178px;
width:105px;
height:128px;
}

#index-mysportbikemods3-03 {
position:absolute;
left:105px;
top:178px;
width:135px;
height:128px;
}

#index-mysportbikemods3-04 {
position:absolute;
left:240px;
top:178px;
width:99px;
height:128px;
}

#index-mysportbikemods3-05 {
position:absolute;
left:339px;
top:178px;
width:126px;
height:128px;
}

#index-mysportbikemods3-06 {
position:absolute;
left:465px;
top:178px;
width:135px;
height:128px;
}

#index-mysportbikemods3-07 {
position:absolute;
left:0px;
top:306px;
width:16px;
height:494px;
}

#index-mysportbikemods3-08 {
position:absolute;
left:16px;
top:306px;
width:107px;
height:472px;
}

#index-mysportbikemods3-09 {
position:absolute;
left:123px;
top:306px;
width:12px;
height:494px;
}

#index-mysportbikemods3-10 {
position:absolute;
left:135px;
top:306px;
width:435px;
height:472px;
}

#index-mysportbikemods3-11 {
position:absolute;
left:570px;
top:306px;
width:30px;
height:494px;
}

#index-mysportbikemods3-12 {
position:absolute;
left:16px;
top:778px;
width:107px;
height:22px;
}

#index-mysportbikemods3-13 {
position:absolute;
left:135px;
top:778px;
width:435px;
height:22px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (index_mysportbikemods.psd) -->
<div id="Table_01">
<div id="index-mysportbikemods3-01">
<img src="images/index_mysportbikemods3_01.gif" width="600" height="178" alt="">
</div>
<div id="index-mysportbikemods3-02">
<img src="images/index_mysportbikemods3_02.gif" width="105" height="128" alt="">
</div>
<div id="index-mysportbikemods3-03">
<img src="images/index_mysportbikemods3_03.gif" width="135" height="128" alt="">
</div>
<div id="index-mysportbikemods3-04">
<img src="images/index_mysportbikemods3_04.gif" width="99" height="128" alt="">
</div>
<div id="index-mysportbikemods3-05">
<img src="images/index_mysportbikemods3_05.gif" width="126" height="128" alt="">
</div>
<div id="index-mysportbikemods3-06">
<img src="images/index_mysportbikemods3_06.gif" width="135" height="128" alt="">
</div>
<div id="index-mysportbikemods3-07">
<img src="images/index_mysportbikemods3_07.gif" width="16" height="494" alt="">
</div>
<div id="index-mysportbikemods3-08">
<img src="images/index_mysportbikemods3_08.jpg" width="107" height="472" alt="">
</div>
<div id="index-mysportbikemods3-09">
<img src="images/index_mysportbikemods3_09.gif" width="12" height="494" alt="">
</div>
<div id="index-mysportbikemods3-10">
<img src="images/index_mysportbikemods3_10.jpg" width="435" height="472" alt="">
</div>
<div id="index-mysportbikemods3-11">
<img src="images/index_mysportbikemods3_11.gif" width="30" height="494" alt="">
</div>
<div id="index-mysportbikemods3-12">
<img src="images/index_mysportbikemods3_12.gif" width="107" height="22" alt="">
</div>
<div id="index-mysportbikemods3-13">
<img src="images/index_mysportbikemods3_13.gif" width="435" height="22" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
D34th Maker
01-24-2012, 03:47 AM
do you have a test site so i may see the site itself as from the code i briefly scanned it and couldnt find something. when i see the site i may be able to pinpoint your problem
teedoff
01-24-2012, 03:48 AM
All you need to center a site is a valid doctype, which you dont have. An element's width set to a value less than it's containing element, and margin: 0 auto; set to that element.

You also have a bit of divitis (http://csscreator.com/divitis).
tyolson
01-24-2012, 04:04 AM
All you need to center a site is a valid doctype, which you dont have. An element's width set to a value less than it's containing element, and margin: 0 auto; set to that element.

what do you mean by a valid doctype.

how do I fix this element or whatever?

im sorry im still very new at this, i kinda need someone to do it for me, or hold my hand the whole way through it
D34th Maker
01-24-2012, 12:46 PM
what do you mean by a valid doctype.

how do I fix this element or whatever?

im sorry im still very new at this, i kinda need someone to do it for me, or hold my hand the whole way through itTo make your doc type valid you have to have this in it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml/DTD/xhtml-transitional.dtd">

Put that above your HTML i think.

Also there are three types.

Transitional, Strict, and frameset to change the type change out the Transitional and transitional with your doc type you want.

Also i believe the best doc type is Strict.
melloorr
01-24-2012, 12:52 PM
To center a website, you need to make a div wrapper

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

and just call that like this:
<div id="wrapper"></div>

BUT, make sure everything is inside that div, or it will look wrong.
teedoff
01-24-2012, 02:03 PM
<html> is not a complete valid doctype.

For new documents you should use a strict doctype, not a transitional one.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>


You also already have a "wrapper" it seems with table_1. You use absolute positioning for almost everything and really positioning is rarely needed at all in most web documents. SO for example you could do this:


#table_1 {
width: 960px;
margin: 0 auto;
}
tyolson
01-24-2012, 07:15 PM
Here is the new code, i added the doctype. STILL not centered.

when i tried to add a table with 960 width, dreamweaver crashed instantly and i lost my work. so i cannot put the width higher than 800 i think without it crashing.

what else do i need to add in order to make it centered?

btw, idk if this matters but when i put in the wrapper it became a style. Is that what I needed? It does it automatically when I select all the code and insert div tag around selection.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>


<head>
<style type="text/css">
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}
</style>

<title>MySportBikeMods - The best source for LED lights</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Save for Web Styles (index_mysportbikemods.psd) -->
<style type="text/css">
<!--


#index-mysportbikemods2-01 {
position:absolute;
left:0px;
top:0px;
width:600px;
height:178px;
}

#index-mysportbikemods2-02 {
position:absolute;
left:0px;
top:178px;
width:105px;
height:128px;
}

#index-mysportbikemods2-03 {
position:absolute;
left:105px;
top:178px;
width:135px;
height:128px;
}

#index-mysportbikemods2-04 {
position:absolute;
left:240px;
top:178px;
width:99px;
height:128px;
}

#index-mysportbikemods2-05 {
position:absolute;
left:339px;
top:178px;
width:126px;
height:128px;
}

#index-mysportbikemods2-06 {
position:absolute;
left:465px;
top:178px;
width:135px;
height:128px;
}

#index-mysportbikemods2-07 {
position:absolute;
left:0px;
top:306px;
width:16px;
height:494px;
}

#index-mysportbikemods2-08 {
position:absolute;
left:16px;
top:306px;
width:107px;
height:472px;
}

#index-mysportbikemods2-09 {
position:absolute;
left:123px;
top:306px;
width:12px;
height:494px;
}

#index-mysportbikemods2-10 {
position:absolute;
left:135px;
top:306px;
width:435px;
height:472px;
}

#index-mysportbikemods2-11 {
position:absolute;
left:570px;
top:306px;
width:30px;
height:494px;
}

#index-mysportbikemods2-12 {
position:absolute;
left:16px;
top:778px;
width:107px;
height:22px;
}

#index-mysportbikemods2-13 {
position:absolute;
left:135px;
top:778px;
width:435px;
height:22px;
}

}

#index-mysportbikemods-10-01 {
position:absolute;
left:0px;
top:0px;
width:107px;
height:58px;
}

#index-mysportbikemods-10-02 {
position:absolute;
left:0px;
top:58px;
width:12px;
height:414px;
}

#index-mysportbikemods-10-03 {
position:absolute;
left:12px;
top:58px;
width:78px;
height:37px;
}

#index-mysportbikemods-10-04 {
position:absolute;
left:90px;
top:58px;
width:17px;
height:414px;
}

#index-mysportbikemods-10-05 {
position:absolute;
left:12px;
top:95px;
width:78px;
height:262px;
}

#index-mysportbikemods-10-06 {
position:absolute;
left:12px;
top:357px;
width:19px;
height:115px;
}

#index-mysportbikemods-10-07 {
position:absolute;
left:31px;
top:357px;
width:48px;
height:49px;
}

#index-mysportbikemods-10-08 {
position:absolute;
left:79px;
top:357px;
width:11px;
height:115px;
}

#index-mysportbikemods-10-09 {
position:absolute;
left:31px;
top:406px;
width:48px;
height:66px;
}


-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#000000; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">
<div id="wrapper"> <!-- Save for Web Slices (index_mysportbikemods.psd) -->
<div id="Table_01">
<div id="index-mysportbikemods2-01"> <a href="index.html"><img src="images/index_mysportbikemods2_01.gif" width="600" height="178" alt=""></a>
</div>
<div id="index-mysportbikemods2-02"> <a href="index.html"><img src="images/index_mysportbikemods2_02.gif" width="105" height="128" alt=""></a>
</div>
<div id="index-mysportbikemods2-03"> <a href="products.html"><img src="images/index_mysportbikemods2_03.gif" width="135" height="128" alt=""></a>
</div>
<div id="index-mysportbikemods2-04"> <a href="videos.html"><img src="images/index_mysportbikemods2_04.gif" width="99" height="128" alt=""></a>
</div>
<div id="index-mysportbikemods2-05"> <a href="pictures.html"><img src="images/index_mysportbikemods2_05.gif" width="126" height="128" alt=""></a>
</div>
<div id="index-mysportbikemods2-06"> <a href="contact.html"><img src="images/index_mysportbikemods2_06.gif" width="135" height="128" alt=""></a>
</div>
<div id="index-mysportbikemods2-07">
<img src="images/index_mysportbikemods2_07.gif" width="16" height="494" alt="">
</div>
<div id="index-mysportbikemods2-08">
<div id="index-mysportbikemods-10-01">
<img src="images/index_mysportbikemods_10_01.jpg" width="107" height="58" alt="">
</div>
<div id="index-mysportbikemods-10-02">
<img src="images/index_mysportbikemods_10_02.jpg" width="12" height="414" alt="">
</div>
<div id="index-mysportbikemods-10-03">
<img src="images/index_mysportbikemods_10_03.jpg" width="78" height="37" alt="">
</div>
<div id="index-mysportbikemods-10-04">
<img src="images/index_mysportbikemods_10_04.jpg" width="17" height="414" alt="">
</div>
<div id="index-mysportbikemods-10-05">
<img src="images/index_mysportbikemods_10_05.jpg" width="78" height="262" alt="">
</div>
<div id="index-mysportbikemods-10-06">
<img src="images/index_mysportbikemods_10_06.jpg" width="19" height="115" alt="">
</div>
<div id="index-mysportbikemods-10-07">
<img src="images/index_mysportbikemods_10_07.jpg" width="48" height="49" alt="">
</div>
<div id="index-mysportbikemods-10-08">
<img src="images/index_mysportbikemods_10_08.jpg" width="11" height="115" alt="">
</div>
<div id="index-mysportbikemods-10-09">
<img src="images/index_mysportbikemods_10_09.jpg" width="48" height="66" alt="">
</div>



</div>
<div id="index-mysportbikemods2-09">
<img src="images/index_mysportbikemods2_09.gif" width="12" height="494" alt="">
</div>
<div id="index-mysportbikemods2-10">
<img src="images/index_mysportbikemods2_10.jpg" width="435" height="472" alt="">
</div>
<div id="index-mysportbikemods2-11">
<img src="images/index_mysportbikemods2_11.gif" width="30" height="494" alt="">
</div>
<div id="index-mysportbikemods2-12">
<img src="images/index_mysportbikemods2_12.gif" width="107" height="22" alt="">
</div>
<div id="index-mysportbikemods2-13">
<img src="images/index_mysportbikemods2_13.gif" width="435" height="22" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</div>
</body>

</html>
Excavator
01-24-2012, 08:07 PM
Hello tyolson,
Your #wrapper is centered. The absolute positioned content inside #wrapper is relative to the body of the document though.

Add this bit to your CSS#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
}

Go through this quick tutorial on positioning (http://www.barelyfitz.com/screencast/html-training/css/positioning/). It will help you a lot.
tyolson
01-24-2012, 08:54 PM
hello tyolson,
your #wrapper is centered. The absolute positioned content inside #wrapper is relative to the body of the document though.

Add this bit to your css#wrapper {
width: 800px;
margin-right: Auto;
margin-left: Auto;
position: Relative;
}

go through this quick tutorial on positioning (http://www.barelyfitz.com/screencast/html-training/css/positioning/). It will help you a lot.

omg it worked!! I love you!!!!!!!!!! Thank you!
Excavator
01-24-2012, 09:00 PM
omg it worked!! I love you!!!!!!!!!! Thank you!

You should have another look at Teed's post (http://www.codingforums.com/showpost.php?p=1184711&postcount=7). That's a good suggestion.
tyolson
01-24-2012, 09:05 PM
i suppose i got excited to fast.

http://www.mysportbikemods.com/ the site doesnt look right after i transferred the file now
tyolson
01-24-2012, 09:07 PM
nevermind i just had to reupload the images again, that fixed it :)
dylanbaumannn
02-03-2012, 08:13 PM
if you're looking for a secondary way to go about it just use the following:

#wrapper{
position:absolute;
width:800;
left:50%;
margin-left:-400px;
}


it'll center it no matter what.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum