WEB Centering CSS Layout

Discussion in 'OT Technology' started by swz, Oct 26, 2008.

  1. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    I followed this tutorial to center a layout with CSS: http://www.simplebits.com/notebook/2004/09/08/centering.html

    It doesn't seem to be working at all no matter what I try. Since I used photoshop to export the slices into XHTML & CSS, could this be causing the problem?

    I'm sure its just a simple thing I'm missing but I cant figure it out :wtc::mad:

    Here is my website's code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>MDKLayout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    
    body {
      text-align: center;
      }
    
    #container {
      margin: 0 auto;
      width: xxxpx;
      text-align: left;
      }
    
    #index-01_ {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:24px;
    	height:1000px;
    }
    
    #index-02_ {
    	position:absolute;
    	left:24px;
    	top:0px;
    	width:974px;
    	height:146px;
    }
    
    #index-03_ {
    	position:absolute;
    	left:998px;
    	top:0px;
    	width:26px;
    	height:1000px;
    }
    
    #index-04_ {
    	position:absolute;
    	left:24px;
    	top:146px;
    	width:131px;
    	height:20px;
    }
    
    #index-05_ {
    	position:absolute;
    	left:155px;
    	top:146px;
    	width:135px;
    	height:20px;
    }
    
    #index-06_ {
    	position:absolute;
    	left:290px;
    	top:146px;
    	width:105px;
    	height:20px;
    }
    
    #index-07_ {
    	position:absolute;
    	left:395px;
    	top:146px;
    	width:100px;
    	height:20px;
    }
    
    #index-08_ {
    	position:absolute;
    	left:495px;
    	top:146px;
    	width:240px;
    	height:20px;
    }
    
    #index-09_ {
    	position:absolute;
    	left:735px;
    	top:146px;
    	width:263px;
    	height:41px;
    }
    
    #index-10_ {
    	position:absolute;
    	left:24px;
    	top:166px;
    	width:100px;
    	height:21px;
    }
    
    #index-11_ {
    	position:absolute;
    	left:124px;
    	top:166px;
    	width:53px;
    	height:21px;
    }
    
    #index-12_ {
    	position:absolute;
    	left:177px;
    	top:166px;
    	width:44px;
    	height:21px;
    }
    
    #index-13_ {
    	position:absolute;
    	left:221px;
    	top:166px;
    	width:69px;
    	height:21px;
    }
    
    #index-14_ {
    	position:absolute;
    	left:290px;
    	top:166px;
    	width:60px;
    	height:21px;
    }
    
    #index-15_ {
    	position:absolute;
    	left:350px;
    	top:166px;
    	width:63px;
    	height:21px;
    }
    
    #index-16_ {
    	position:absolute;
    	left:413px;
    	top:166px;
    	width:63px;
    	height:21px;
    }
    
    #index-17_ {
    	position:absolute;
    	left:476px;
    	top:166px;
    	width:71px;
    	height:21px;
    }
    
    #index-18_ {
    	position:absolute;
    	left:547px;
    	top:166px;
    	width:68px;
    	height:21px;
    }
    
    #index-19_ {
    	position:absolute;
    	left:615px;
    	top:166px;
    	width:120px;
    	height:21px;
    }
    
    #index-20_ {
    	position:absolute;
    	left:24px;
    	top:187px;
    	width:974px;
    	height:35px;
    }
    
    #index-21_ {
    	position:absolute;
    	left:24px;
    	top:222px;
    	width:743px;
    	height:663px;
    }
    
    #index-22_ {
    	position:absolute;
    	left:767px;
    	top:222px;
    	width:231px;
    	height:49px;
    }
    
    #index-23_ {
    	position:absolute;
    	left:767px;
    	top:271px;
    	width:207px;
    	height:330px;
    }
    
    #index-24_ {
    	position:absolute;
    	left:974px;
    	top:271px;
    	width:24px;
    	height:8px;
    }
    
    #index-25_ {
    	position:absolute;
    	left:974px;
    	top:279px;
    	width:24px;
    	height:641px;
    }
    
    #index-26_ {
    	position:absolute;
    	left:767px;
    	top:601px;
    	width:207px;
    	height:9px;
    }
    
    #index-27_ {
    	position:absolute;
    	left:767px;
    	top:610px;
    	width:207px;
    	height:240px;
    }
    
    #index-28_ {
    	position:absolute;
    	left:767px;
    	top:850px;
    	width:207px;
    	height:35px;
    }
    
    #index-29_ {
    	position:absolute;
    	left:24px;
    	top:885px;
    	width:950px;
    	height:35px;
    }
    
    #index-30_ {
    	position:absolute;
    	left:24px;
    	top:920px;
    	width:974px;
    	height:80px;
    }
    
    -->
    </style>
    </head>
    <body background="C:\Users\swaze001\Desktop\MDK\images\bgrepeat.jpg" style="background-color:#FFFFFF;">
    <div id="container">	
        <div id="index-01_">
    		<img id="index_01" src="images/index_01.jpg" width="24" height="1000" alt="" />
    	</div>
    	<div id="index-02_">
    		<img id="index_02" src="images/index_02.jpg" width="974" height="146" alt="" />
    	</div>
    	<div id="index-03_">
    		<img id="index_03" src="images/index_03.jpg" width="26" height="1000" alt="" />
    	</div>
    	<div id="index-04_">
    		<img id="index_04" src="images/index_04.jpg" width="131" height="20" alt="" />
    	</div>
    	<div id="index-05_">
    		<img id="index_05" src="images/index_05.jpg" width="135" height="20" alt="" />
    	</div>
    	<div id="index-06_">
    		<img id="index_06" src="images/index_06.jpg" width="105" height="20" alt="" />
    	</div>
    	<div id="index-07_">
    		<img id="index_07" src="images/index_07.jpg" width="100" height="20" alt="" />
    	</div>
    	<div id="index-08_">
    		<img id="index_08" src="images/index_08.jpg" width="240" height="20" alt="" />
    	</div>
    	<div id="index-09_">
    		<img id="index_09" src="images/index_09.jpg" width="263" height="41" alt="" />
    	</div>
    	<div id="index-10_">
    		<img id="index_10" src="images/index_10.jpg" width="100" height="21" alt="" />
    	</div>
    	<div id="index-11_">
    		<img id="index_11" src="images/index_11.jpg" width="53" height="21" alt="" />
    	</div>
    	<div id="index-12_">
    		<img id="index_12" src="images/index_12.jpg" width="44" height="21" alt="" />
    	</div>
    	<div id="index-13_">
    		<img id="index_13" src="images/index_13.jpg" width="69" height="21" alt="" />
    	</div>
    	<div id="index-14_">
    		<img id="index_14" src="images/index_14.jpg" width="60" height="21" alt="" />
    	</div>
    	<div id="index-15_">
    		<img id="index_15" src="images/index_15.jpg" width="63" height="21" alt="" />
    	</div>
    	<div id="index-16_">
    		<img id="index_16" src="images/index_16.jpg" width="63" height="21" alt="" />
    	</div>
    	<div id="index-17_">
    		<img id="index_17" src="images/index_17.jpg" width="71" height="21" alt="" />
    	</div>
    	<div id="index-18_">
    		<img id="index_18" src="images/index_18.jpg" width="68" height="21" alt="" />
    	</div>
    	<div id="index-19_">
    		<img id="index_19" src="images/index_19.jpg" width="120" height="21" alt="" />
    	</div>
    	<div id="index-20_">
    		<img id="index_20" src="images/index_20.jpg" width="974" height="35" alt="" />
    	</div>
    	<div id="index-21_">
    		<img id="index_21" src="images/index_21.jpg" width="743" height="663" alt="" />
    	</div>
    	<div id="index-22_">
    		<img id="index_22" src="images/index_22.jpg" width="231" height="49" alt="" />
    	</div>
    	<div id="index-23_">
    		<img id="index_23" src="images/index_23.jpg" width="207" height="330" alt="" />
    	</div>
    	<div id="index-24_">
    		<img id="index_24" src="images/index_24.jpg" width="24" height="8" alt="" />
    	</div>
    	<div id="index-25_">
    		<img id="index_25" src="images/index_25.jpg" width="24" height="641" alt="" />
    	</div>
    	<div id="index-26_">
    		<img id="index_26" src="images/index_26.jpg" width="207" height="9" alt="" />
    	</div>
    	<div id="index-27_">
    		<img id="index_27" src="images/index_27.jpg" width="207" height="240" alt="" />
    	</div>
    	<div id="index-28_">
    		<img id="index_28" src="images/index_28.jpg" width="207" height="35" alt="" />
    	</div>
    	<div id="index-29_">
    		<img id="index_29" src="images/index_29.jpg" width="950" height="35" alt="" />
    	</div>
    	<div id="index-30_">
    		<img id="index_30" src="images/index_30.jpg" width="974" height="80" alt="" />
    	</div>
    <div>
    </body>
    </html>
     
  2. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    i just noticed I didn't remember to close the last div tag, but it still doesnt work :sad2:
     
  3. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    12
    Location:
    Toronto
    container needs to have a width to be centered.

    Replace yours, with this:

    Code:
    #container {
      margin: 0px auto 0px auto;
      width: 900px;
      text-align: left;
    
      }
    
     
  4. pkr

    pkr Guest

    Don't use dreamweaver :sad2:
     
  5. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    12
    Location:
    Toronto
    fixed.

    DW is a good editor, if you write your own code.
     
  6. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    you hardcode everything? :noes:
     
  7. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    And o2 that didn't center it :(
     
  8. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    12
    Location:
    Toronto
    because you didnt close the last <div> tag.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>MDKLayout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    #container {
      margin: 0 auto;
      width: 900px;
      text-align: left;
      }
    
    </style>
    </head>
    <body>
    <div id="container">    
       lol
    </div>
    </body>
    </html>
     
  9. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis

    Ok here's where its at right now, and still not centered :sad2:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>MDKLayout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    
    body {
      text-align: center;
      }
    
    #container {
      margin: 0px auto 0px auto;
      width: 900px;
      text-align: left;
    
      }
    
    #index-01_ {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:24px;
    	height:1000px;
    }
    
    #index-02_ {
    	position:absolute;
    	left:24px;
    	top:0px;
    	width:974px;
    	height:146px;
    }
    
    #index-03_ {
    	position:absolute;
    	left:998px;
    	top:0px;
    	width:26px;
    	height:1000px;
    }
    
    #index-04_ {
    	position:absolute;
    	left:24px;
    	top:146px;
    	width:131px;
    	height:20px;
    }
    
    #index-05_ {
    	position:absolute;
    	left:155px;
    	top:146px;
    	width:135px;
    	height:20px;
    }
    
    #index-06_ {
    	position:absolute;
    	left:290px;
    	top:146px;
    	width:105px;
    	height:20px;
    }
    
    #index-07_ {
    	position:absolute;
    	left:395px;
    	top:146px;
    	width:100px;
    	height:20px;
    }
    
    #index-08_ {
    	position:absolute;
    	left:495px;
    	top:146px;
    	width:240px;
    	height:20px;
    }
    
    #index-09_ {
    	position:absolute;
    	left:735px;
    	top:146px;
    	width:263px;
    	height:41px;
    }
    
    #index-10_ {
    	position:absolute;
    	left:24px;
    	top:166px;
    	width:100px;
    	height:21px;
    }
    
    #index-11_ {
    	position:absolute;
    	left:124px;
    	top:166px;
    	width:53px;
    	height:21px;
    }
    
    #index-12_ {
    	position:absolute;
    	left:177px;
    	top:166px;
    	width:44px;
    	height:21px;
    }
    
    #index-13_ {
    	position:absolute;
    	left:221px;
    	top:166px;
    	width:69px;
    	height:21px;
    }
    
    #index-14_ {
    	position:absolute;
    	left:290px;
    	top:166px;
    	width:60px;
    	height:21px;
    }
    
    #index-15_ {
    	position:absolute;
    	left:350px;
    	top:166px;
    	width:63px;
    	height:21px;
    }
    
    #index-16_ {
    	position:absolute;
    	left:413px;
    	top:166px;
    	width:63px;
    	height:21px;
    }
    
    #index-17_ {
    	position:absolute;
    	left:476px;
    	top:166px;
    	width:71px;
    	height:21px;
    }
    
    #index-18_ {
    	position:absolute;
    	left:547px;
    	top:166px;
    	width:68px;
    	height:21px;
    }
    
    #index-19_ {
    	position:absolute;
    	left:615px;
    	top:166px;
    	width:120px;
    	height:21px;
    }
    
    #index-20_ {
    	position:absolute;
    	left:24px;
    	top:187px;
    	width:974px;
    	height:35px;
    }
    
    #index-21_ {
    	position:absolute;
    	left:24px;
    	top:222px;
    	width:743px;
    	height:663px;
    }
    
    #index-22_ {
    	position:absolute;
    	left:767px;
    	top:222px;
    	width:231px;
    	height:49px;
    }
    
    #index-23_ {
    	position:absolute;
    	left:767px;
    	top:271px;
    	width:207px;
    	height:330px;
    }
    
    #index-24_ {
    	position:absolute;
    	left:974px;
    	top:271px;
    	width:24px;
    	height:8px;
    }
    
    #index-25_ {
    	position:absolute;
    	left:974px;
    	top:279px;
    	width:24px;
    	height:641px;
    }
    
    #index-26_ {
    	position:absolute;
    	left:767px;
    	top:601px;
    	width:207px;
    	height:9px;
    }
    
    #index-27_ {
    	position:absolute;
    	left:767px;
    	top:610px;
    	width:207px;
    	height:240px;
    }
    
    #index-28_ {
    	position:absolute;
    	left:767px;
    	top:850px;
    	width:207px;
    	height:35px;
    }
    
    #index-29_ {
    	position:absolute;
    	left:24px;
    	top:885px;
    	width:950px;
    	height:35px;
    }
    
    #index-30_ {
    	position:absolute;
    	left:24px;
    	top:920px;
    	width:974px;
    	height:80px;
    }
    
    -->
    </style>
    </head>
    <body background="C:\Users\swaze001\Desktop\MDK\images\bgrepeat.jpg" style="background-color:#FFFFFF;">
    <div id="container">
        <div id="index-01_">
    		<img id="index_01" src="images/index_01.jpg" width="24" height="1000" alt="" />
    	</div>
    	<div id="index-02_"><img id="index_02" src="images/index_02.jpg" width="974" height="146" alt="" /></div>
    	<div id="index-03_">
    		<img id="index_03" src="images/index_03.jpg" width="26" height="1000" alt="" />
    	</div>
    	<div id="index-04_">
    		<img id="index_04" src="images/index_04.jpg" width="131" height="20" alt="" />
    	</div>
    	<div id="index-05_">
    		<img id="index_05" src="images/index_05.jpg" width="135" height="20" alt="" />
    	</div>
    	<div id="index-06_">
    		<img id="index_06" src="images/index_06.jpg" width="105" height="20" alt="" />
    	</div>
    	<div id="index-07_">
    		<img id="index_07" src="images/index_07.jpg" width="100" height="20" alt="" />
    	</div>
    	<div id="index-08_">
    		<img id="index_08" src="images/index_08.jpg" width="240" height="20" alt="" />
    	</div>
    	<div id="index-09_">
    		<img id="index_09" src="images/index_09.jpg" width="263" height="41" alt="" />
    	</div>
    	<div id="index-10_">
    		<img id="index_10" src="images/index_10.jpg" width="100" height="21" alt="" />
    	</div>
    	<div id="index-11_">
    		<img id="index_11" src="images/index_11.jpg" width="53" height="21" alt="" />
    	</div>
    	<div id="index-12_">
    		<img id="index_12" src="images/index_12.jpg" width="44" height="21" alt="" />
    	</div>
    	<div id="index-13_">
    		<img id="index_13" src="images/index_13.jpg" width="69" height="21" alt="" />
    	</div>
    	<div id="index-14_">
    		<img id="index_14" src="images/index_14.jpg" width="60" height="21" alt="" />
    	</div>
    	<div id="index-15_">
    		<img id="index_15" src="images/index_15.jpg" width="63" height="21" alt="" />
    	</div>
    	<div id="index-16_">
    		<img id="index_16" src="images/index_16.jpg" width="63" height="21" alt="" />
    	</div>
    	<div id="index-17_">
    		<img id="index_17" src="images/index_17.jpg" width="71" height="21" alt="" />
    	</div>
    	<div id="index-18_">
    		<img id="index_18" src="images/index_18.jpg" width="68" height="21" alt="" />
    	</div>
    	<div id="index-19_">
    		<img id="index_19" src="images/index_19.jpg" width="120" height="21" alt="" />
    	</div>
    	<div id="index-20_">
    		<img id="index_20" src="images/index_20.jpg" width="974" height="35" alt="" />
    	</div>
    	<div id="index-21_">
    		<img id="index_21" src="images/index_21.jpg" width="743" height="663" alt="" />
    	</div>
    	<div id="index-22_">
    		<img id="index_22" src="images/index_22.jpg" width="231" height="49" alt="" />
    	</div>
    	<div id="index-23_">
    		<img id="index_23" src="images/index_23.jpg" width="207" height="330" alt="" />
    	</div>
    	<div id="index-24_">
    		<img id="index_24" src="images/index_24.jpg" width="24" height="8" alt="" />
    	</div>
    	<div id="index-25_">
    		<img id="index_25" src="images/index_25.jpg" width="24" height="641" alt="" />
    	</div>
    	<div id="index-26_">
    		<img id="index_26" src="images/index_26.jpg" width="207" height="9" alt="" />
    	</div>
    	<div id="index-27_">
    		<img id="index_27" src="images/index_27.jpg" width="207" height="240" alt="" />
    	</div>
    	<div id="index-28_">
    		<img id="index_28" src="images/index_28.jpg" width="207" height="35" alt="" />
    	</div>
    	<div id="index-29_">
    		<img id="index_29" src="images/index_29.jpg" width="950" height="35" alt="" />
    	</div>
    	<div id="index-30_">
    		<img id="index_30" src="images/index_30.jpg" width="974" height="80" alt="" />
    	</div>
    </div>
    </body>
    </html>
     
  10. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    Just a quick margin: 0px auto; to your wrapper #container would suffice.
     
  11. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    12
    Location:
    Toronto
    Dont use that horrible code. It uses absolute positioning, which cannot be centered.

    Use what I posted.
     
  12. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    :confused:
     
  13. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    12
    Location:
    Toronto
  14. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
  15. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    12
    Location:
    Toronto
    then use the code I posted
     
  16. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    I dont know what you mean use the code I posted all I see is like a snippet and I already copy/pasted that over the code that needed to be taken out. :confused:
     
  17. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    Sorry if this seems retarded to you :rofl:
     
  18. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    12
    Location:
    Toronto
    Copy the code I posted into a blank html file, overwriting everything. Works perfectly.
     
  19. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    Yeah I see it works on a blank sheet but every time I try to put the content from the original code its off center again.

    Here is where its at right now :noes:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>MDKLayout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    #container {
      margin: 0 auto;
      width: 900px;
      text-align: left;
      }
    
    #index-01_ {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:24px;
    	height:1000px;
    }
    
    #index-02_ {
    	position:absolute;
    	left:24px;
    	top:0px;
    	width:974px;
    	height:146px;
    }
    
    #index-03_ {
    	position:absolute;
    	left:998px;
    	top:0px;
    	width:26px;
    	height:1000px;
    }
    
    #index-04_ {
    	position:absolute;
    	left:24px;
    	top:146px;
    	width:131px;
    	height:20px;
    }
    
    #index-05_ {
    	position:absolute;
    	left:155px;
    	top:146px;
    	width:135px;
    	height:20px;
    }
    
    #index-06_ {
    	position:absolute;
    	left:290px;
    	top:146px;
    	width:105px;
    	height:20px;
    }
    
    #index-07_ {
    	position:absolute;
    	left:395px;
    	top:146px;
    	width:100px;
    	height:20px;
    }
    
    #index-08_ {
    	position:absolute;
    	left:495px;
    	top:146px;
    	width:240px;
    	height:20px;
    }
    
    #index-09_ {
    	position:absolute;
    	left:735px;
    	top:146px;
    	width:263px;
    	height:41px;
    }
    
    #index-10_ {
    	position:absolute;
    	left:24px;
    	top:166px;
    	width:100px;
    	height:21px;
    }
    
    #index-11_ {
    	position:absolute;
    	left:124px;
    	top:166px;
    	width:53px;
    	height:21px;
    }
    
    #index-12_ {
    	position:absolute;
    	left:177px;
    	top:166px;
    	width:44px;
    	height:21px;
    }
    
    #index-13_ {
    	position:absolute;
    	left:221px;
    	top:166px;
    	width:69px;
    	height:21px;
    }
    
    #index-14_ {
    	position:absolute;
    	left:290px;
    	top:166px;
    	width:60px;
    	height:21px;
    }
    
    #index-15_ {
    	position:absolute;
    	left:350px;
    	top:166px;
    	width:63px;
    	height:21px;
    }
    
    #index-16_ {
    	position:absolute;
    	left:413px;
    	top:166px;
    	width:63px;
    	height:21px;
    }
    
    #index-17_ {
    	position:absolute;
    	left:476px;
    	top:166px;
    	width:71px;
    	height:21px;
    }
    
    #index-18_ {
    	position:absolute;
    	left:547px;
    	top:166px;
    	width:68px;
    	height:21px;
    }
    
    #index-19_ {
    	position:absolute;
    	left:615px;
    	top:166px;
    	width:120px;
    	height:21px;
    }
    
    #index-20_ {
    	position:absolute;
    	left:24px;
    	top:187px;
    	width:974px;
    	height:35px;
    }
    
    #index-21_ {
    	position:absolute;
    	left:24px;
    	top:222px;
    	width:743px;
    	height:663px;
    }
    
    #index-22_ {
    	position:absolute;
    	left:767px;
    	top:222px;
    	width:231px;
    	height:49px;
    }
    
    #index-23_ {
    	position:absolute;
    	left:767px;
    	top:271px;
    	width:207px;
    	height:330px;
    }
    
    #index-24_ {
    	position:absolute;
    	left:974px;
    	top:271px;
    	width:24px;
    	height:8px;
    }
    
    #index-25_ {
    	position:absolute;
    	left:974px;
    	top:279px;
    	width:24px;
    	height:641px;
    }
    
    #index-26_ {
    	position:absolute;
    	left:767px;
    	top:601px;
    	width:207px;
    	height:9px;
    }
    
    #index-27_ {
    	position:absolute;
    	left:767px;
    	top:610px;
    	width:207px;
    	height:240px;
    }
    
    #index-28_ {
    	position:absolute;
    	left:767px;
    	top:850px;
    	width:207px;
    	height:35px;
    }
    
    #index-29_ {
    	position:absolute;
    	left:24px;
    	top:885px;
    	width:950px;
    	height:35px;
    }
    
    #index-30_ {
    	position:absolute;
    	left:24px;
    	top:920px;
    	width:974px;
    	height:80px;
    }
    
    -->
    </style>
    </head>
    <body background="C:\Users\swaze001\Desktop\MDK\images\bgrepeat.jpg" style="background-color:#FFFFFF;">
    <div id="container">
        <div id="index-01_">
    		<img id="index_01" src="images/index_01.jpg" width="24" height="1000" alt="" />
    	</div>
    	<div id="index-02_"><img id="index_02" src="images/index_02.jpg" width="974" height="146" alt="" /></div>
    	<div id="index-03_">
    		<img id="index_03" src="images/index_03.jpg" width="26" height="1000" alt="" />
    	</div>
    	<div id="index-04_">
    		<img id="index_04" src="images/index_04.jpg" width="131" height="20" alt="" />
    	</div>
    	<div id="index-05_">
    		<img id="index_05" src="images/index_05.jpg" width="135" height="20" alt="" />
    	</div>
    	<div id="index-06_">
    		<img id="index_06" src="images/index_06.jpg" width="105" height="20" alt="" />
    	</div>
    	<div id="index-07_">
    		<img id="index_07" src="images/index_07.jpg" width="100" height="20" alt="" />
    	</div>
    	<div id="index-08_">
    		<img id="index_08" src="images/index_08.jpg" width="240" height="20" alt="" />
    	</div>
    	<div id="index-09_">
    		<img id="index_09" src="images/index_09.jpg" width="263" height="41" alt="" />
    	</div>
    	<div id="index-10_">
    		<img id="index_10" src="images/index_10.jpg" width="100" height="21" alt="" />
    	</div>
    	<div id="index-11_">
    		<img id="index_11" src="images/index_11.jpg" width="53" height="21" alt="" />
    	</div>
    	<div id="index-12_">
    		<img id="index_12" src="images/index_12.jpg" width="44" height="21" alt="" />
    	</div>
    	<div id="index-13_">
    		<img id="index_13" src="images/index_13.jpg" width="69" height="21" alt="" />
    	</div>
    	<div id="index-14_">
    		<img id="index_14" src="images/index_14.jpg" width="60" height="21" alt="" />
    	</div>
    	<div id="index-15_">
    		<img id="index_15" src="images/index_15.jpg" width="63" height="21" alt="" />
    	</div>
    	<div id="index-16_">
    		<img id="index_16" src="images/index_16.jpg" width="63" height="21" alt="" />
    	</div>
    	<div id="index-17_">
    		<img id="index_17" src="images/index_17.jpg" width="71" height="21" alt="" />
    	</div>
    	<div id="index-18_">
    		<img id="index_18" src="images/index_18.jpg" width="68" height="21" alt="" />
    	</div>
    	<div id="index-19_">
    		<img id="index_19" src="images/index_19.jpg" width="120" height="21" alt="" />
    	</div>
    	<div id="index-20_">
    		<img id="index_20" src="images/index_20.jpg" width="974" height="35" alt="" />
    	</div>
    	<div id="index-21_">
    		<img id="index_21" src="images/index_21.jpg" width="743" height="663" alt="" />
    	</div>
    	<div id="index-22_">
    		<img id="index_22" src="images/index_22.jpg" width="231" height="49" alt="" />
    	</div>
    	<div id="index-23_">
    		<img id="index_23" src="images/index_23.jpg" width="207" height="330" alt="" />
    	</div>
    	<div id="index-24_">
    		<img id="index_24" src="images/index_24.jpg" width="24" height="8" alt="" />
    	</div>
    	<div id="index-25_">
    		<img id="index_25" src="images/index_25.jpg" width="24" height="641" alt="" />
    	</div>
    	<div id="index-26_">
    		<img id="index_26" src="images/index_26.jpg" width="207" height="9" alt="" />
    	</div>
    	<div id="index-27_">
    		<img id="index_27" src="images/index_27.jpg" width="207" height="240" alt="" />
    	</div>
    	<div id="index-28_">
    		<img id="index_28" src="images/index_28.jpg" width="207" height="35" alt="" />
    	</div>
    	<div id="index-29_">
    		<img id="index_29" src="images/index_29.jpg" width="950" height="35" alt="" />
    	</div>
    	<div id="index-30_">
    		<img id="index_30" src="images/index_30.jpg" width="974" height="80" alt="" />
    	</div>
    </div>
    </body>
    </html>
     
  20. o2

    o2 Witty Title Here OT Supporter

    Joined:
    Oct 4, 2005
    Messages:
    16,099
    Likes Received:
    12
    Location:
    Toronto
    all the other code conflicts with it, and will not make it work.
     
  21. swz

    swz OT Supporter

    Joined:
    May 21, 2003
    Messages:
    25,118
    Likes Received:
    29
    Location:
    Minneapolis
    so what would be the proper course of action in making what i need from the code that conflicts work with the way you made it center?
     
  22. pkr

    pkr Guest

    For css, yeah I do. Trial and error gets me to what I need eventually and helps me in the process of learning.
     
  23. herzog

    herzog unedukated rednek

    Joined:
    Nov 1, 2001
    Messages:
    2,172
    Likes Received:
    0
    x2, always hard code. There's no substitute.
    I like dw for the server interaction & integration, but I rarely use design view.
     

Share This Page