Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help center my website!

    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

    Code:
    <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>

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by tyolson View Post
    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
    To make your doc type valid you have to have this in it

    Code:
    <!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.

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    To center a website, you need to make a div wrapper

    Code:
    #wrapper{
         margin: 0 auto;
         width: 800px;
    }
    and just call that like this:
    Code:
    <div id="wrapper"></div>
    BUT, make sure everything is inside that div, or it will look wrong.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    <html> is not a complete valid doctype.

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

    Code:
    <!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;
    }
    Teed

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!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>

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Code:
    #wrapper {
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    position: relative;
    }
    Go through this quick tutorial on positioning. It will help you a lot.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by excavator View Post
    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
    Code:
    #wrapper {
    	width: 800px;
    	margin-right: Auto;
    	margin-left: Auto;
    position: Relative;
    }
    go through this quick tutorial on positioning. It will help you a lot.
    omg it worked!! I love you!!!!!!!!!! Thank you!

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by tyolson View Post
    omg it worked!! I love you!!!!!!!!!! Thank you!
    You should have another look at Teed's post. That's a good suggestion.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i suppose i got excited to fast.

    http://www.mysportbikemods.com/ the site doesnt look right after i transferred the file now

  • #13
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nevermind i just had to reupload the images again, that fixed it

  • #14
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    if you're looking for a secondary way to go about it just use the following:
    Code:
    #wrapper{
    position:absolute;
    width:800;
    left:50%;
    margin-left:-400px;
    }
    it'll center it no matter what.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •