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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need Help Centering CSS Layout

    OK, I started to make a website layout in Adobe Photoshop CS2 then I sliced it in ImageReady. I then used ImageReady to convert the sliced layout to CSS but when I uploaded the finished product to my server, a few problems occured. Here is where you can see the website at the moment: http://dcdeveloping.com/faq.html

    In Internet Explorer, the buttons at the top that link to Home, About, Services etc can't be seen properly and are dragged down, so they have a bit of space above them. I don't know how to fix this as I am new with CSS.

    In Firefox however this is fine.

    But, what I also want to do is center the layout. Can anyone help me? Thanks. Below is the page source.

    Code:
    <html>
    <head>
    <title>DCDeveloping :: FAQ</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- ImageReady Styles (FAQ.psd) -->
    <style type="text/css">
    <!--
    
    #Table_01 {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:800px;
    	height:600px;
    }
    
    #FAQ-01 {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:800px;
    	height:24px;
    }
    
    #FAQ-02 {
    	position:absolute;
    	left:0px;
    	top:24px;
    	width:236px;
    	height:52px;
    }
    
    #FAQ-03 {
    	position:absolute;
    	left:236px;
    	top:24px;
    	width:31px;
    	height:10px;
    }
    
    #FAQ-04 {
    	position:absolute;
    	left:267px;
    	top:24px;
    	width:9px;
    	height:52px;
    }
    
    #FAQ-05 {
    	position:absolute;
    	left:276px;
    	top:24px;
    	width:33px;
    	height:10px;
    }
    
    #FAQ-06 {
    	position:absolute;
    	left:309px;
    	top:24px;
    	width:9px;
    	height:52px;
    }
    
    #FAQ-07 {
    	position:absolute;
    	left:318px;
    	top:24px;
    	width:43px;
    	height:10px;
    }
    
    #FAQ-08 {
    	position:absolute;
    	left:361px;
    	top:24px;
    	width:10px;
    	height:52px;
    }
    
    #FAQ-09 {
    	position:absolute;
    	left:371px;
    	top:24px;
    	width:45px;
    	height:10px;
    }
    
    #FAQ-10 {
    	position:absolute;
    	left:416px;
    	top:24px;
    	width:10px;
    	height:52px;
    }
    
    #FAQ-11 {
    	position:absolute;
    	left:426px;
    	top:24px;
    	width:32px;
    	height:10px;
    }
    
    #FAQ-12 {
    	position:absolute;
    	left:458px;
    	top:24px;
    	width:10px;
    	height:52px;
    }
    
    #FAQ-13 {
    	position:absolute;
    	left:468px;
    	top:24px;
    	width:28px;
    	height:10px;
    }
    
    #FAQ-14 {
    	position:absolute;
    	left:496px;
    	top:24px;
    	width:10px;
    	height:52px;
    }
    
    #FAQ-15 {
    	position:absolute;
    	left:506px;
    	top:24px;
    	width:53px;
    	height:10px;
    }
    
    #FAQ-16 {
    	position:absolute;
    	left:559px;
    	top:24px;
    	width:241px;
    	height:52px;
    }
    
    #FAQ-17 {
    	position:absolute;
    	left:236px;
    	top:34px;
    	width:31px;
    	height:42px;
    }
    
    #FAQ-18 {
    	position:absolute;
    	left:276px;
    	top:34px;
    	width:33px;
    	height:42px;
    }
    
    #FAQ-19 {
    	position:absolute;
    	left:318px;
    	top:34px;
    	width:43px;
    	height:42px;
    }
    
    #FAQ-20 {
    	position:absolute;
    	left:371px;
    	top:34px;
    	width:45px;
    	height:42px;
    }
    
    #FAQ-21 {
    	position:absolute;
    	left:426px;
    	top:34px;
    	width:32px;
    	height:42px;
    }
    
    #FAQ-22 {
    	position:absolute;
    	left:468px;
    	top:34px;
    	width:28px;
    	height:42px;
    }
    
    #FAQ-23 {
    	position:absolute;
    	left:506px;
    	top:34px;
    	width:53px;
    	height:42px;
    }
    
    #FAQ-24 {
    	position:absolute;
    	left:0px;
    	top:76px;
    	width:81px;
    	height:95px;
    }
    
    #FAQ-25 {
    	position:absolute;
    	left:81px;
    	top:76px;
    	width:639px;
    	height:74px;
    }
    
    #FAQ-26 {
    	position:absolute;
    	left:720px;
    	top:76px;
    	width:80px;
    	height:95px;
    }
    
    #FAQ-27 {
    	position:absolute;
    	left:81px;
    	top:150px;
    	width:639px;
    	height:21px;
    }
    
    #FAQ-28 {
    	position:absolute;
    	left:0px;
    	top:171px;
    	width:31px;
    	height:429px;
    }
    
    #FAQ-29 {
    	position:absolute;
    	left:31px;
    	top:171px;
    	width:737px;
    	height:394px;
    }
    
    #FAQ-30 {
    	position:absolute;
    	left:768px;
    	top:171px;
    	width:32px;
    	height:429px;
    }
    
    #FAQ-31 {
    	position:absolute;
    	left:31px;
    	top:565px;
    	width:737px;
    	height:35px;
    }
    body {
    	background-color: #707070;
    	background-repeat: repeat;
    	background-image: url(images/bg.png);
    }
    
    -->
    </style>
    <!-- End ImageReady Styles -->
    </head>
    <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
    
    <div align="center">
      <!-- ImageReady Slices (FAQ.psd) -->
    </div>
    <div id="Table_01">
      <div id="FAQ-01">
    	  <div align="center"><img src="images/FAQ_01.gif" width="800" height="24" alt="">
        </div>
      </div>
      <div id="FAQ-02">
    	  <div align="center"><img src="images/FAQ_02.gif" width="236" height="52" alt="">
        </div>
      </div>
      <div id="FAQ-03">
    	  <a href="http://www.dcdeveloping.com/index.html"><img src="images/FAQ_03.gif" width="31" height="10" alt=""></a>
        </div>
      </div>
      <div id="FAQ-04">
    	  <div align="center"><img src="images/FAQ_04.gif" width="9" height="52" alt="">
        </div>
      </div>
      <div id="FAQ-05">
    	  <div align="center"><img src="images/FAQ_05.gif" width="33" height="10" alt="">
        </div>
      </div>
      <div id="FAQ-06">
    	  <div align="center"><img src="images/FAQ_06.gif" width="9" height="52" alt="">
        </div>
      </div>
      <div id="FAQ-07">
    	  <div align="center"><img src="images/FAQ_07.gif" width="43" height="10" alt="">
        </div>
      </div>
      <div id="FAQ-08">
    	  <div align="center"><img src="images/FAQ_08.gif" width="10" height="52" alt="">
        </div>
      </div>
      <div id="FAQ-09">
    	  <div align="center"><img src="images/FAQ_09.gif" width="45" height="10" alt="">
        </div>
      </div>
      <div id="FAQ-10">
    	  <div align="center"><img src="images/FAQ_10.gif" width="10" height="52" alt="">
        </div>
      </div>
      <div id="FAQ-11">
    	  <div align="center"><img src="images/FAQ_11.gif" width="32" height="10" alt="">
        </div>
      </div>
      <div id="FAQ-12">
    	  <div align="center"><img src="images/FAQ_12.gif" width="10" height="52" alt="">
        </div>
      </div>
      <div id="FAQ-13">
    	  <div align="center"><img src="images/FAQ_13.gif" width="28" height="10" alt="">
        </div>
      </div>
      <div id="FAQ-14">
    	  <div align="center"><img src="images/FAQ_14.gif" width="10" height="52" alt="">
        </div>
      </div>
      <div id="FAQ-15">
    	  <div align="center"><img src="images/FAQ_15.gif" width="53" height="10" alt="">
        </div>
      </div>
      <div id="FAQ-16">
    	  <div align="center"><img src="images/FAQ_16.gif" width="241" height="52" alt="">
        </div>
      </div>
      <div id="FAQ-17">
    	  <div align="center"><img src="images/FAQ_17.gif" width="31" height="42" alt="">
        </div>
      </div>
      <div id="FAQ-18">
    	  <div align="center"><img src="images/FAQ_18.gif" width="33" height="42" alt="">
        </div>
      </div>
      <div id="FAQ-19">
    	  <div align="center"><img src="images/FAQ_19.gif" width="43" height="42" alt="">
        </div>
      </div>
      <div id="FAQ-20">
    	  <div align="center"><img src="images/FAQ_20.gif" width="45" height="42" alt="">
        </div>
      </div>
      <div id="FAQ-21">
    	  <div align="center"><img src="images/FAQ_21.gif" width="32" height="42" alt="">
        </div>
      </div>
      <div id="FAQ-22">
    	  <div align="center"><img src="images/FAQ_22.gif" width="28" height="42" alt="">
        </div>
      </div>
      <div id="FAQ-23">
    	  <div align="center"><img src="images/FAQ_23.gif" width="53" height="42" alt="">
        </div>
      </div>
      <div id="FAQ-24">
    	  <div align="center"><img src="images/FAQ_24.gif" width="81" height="95" alt="">
        </div>
      </div>
      <div id="FAQ-25"> <center><img src="images/FAQ_25.gif" width="639" height="74" alt=""></center>
      </div>
      <div id="FAQ-26">
    	  <div align="center"><img src="images/FAQ_26.gif" width="80" height="95" alt="">
        </div>
      </div>
      <div id="FAQ-27">
    	  <div align="center"><img src="images/FAQ_27.gif" width="639" height="21" alt="">
        </div>
      </div>
      <div id="FAQ-28">
    	  <div align="center"><img src="images/FAQ_28.gif" width="31" height="429" alt="">
        </div>
      </div>
      <div id="FAQ-29">
    	  <div align="center"><img src="images/FAQ_29.gif" width="737" height="394" alt="">
        </div>
      </div>
      <div id="FAQ-30">
        <div align="center"><img src="images/FAQ_30.gif" width="32" height="429" alt="">
        </div>
      </div>
      <div id="FAQ-31">
    	  <div align="center"><img src="images/FAQ_31.gif" width="737" height="35" alt="">
        </div>
      </div>
    </div>
    <div align="center">
      <!-- End ImageReady Slices -->
    </div>
    </body>
    </html>
    Last edited by Damien1234; 10-13-2007 at 07:53 PM. Reason: Changing Title

  • #2
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in stead of
    Code:
    <div align="center">
    use this
    Code:
    <div style="margin: 0 auto;">
    hrmm i looked at your code on the page and what you need to do is make a container element that holds everything and use the code i posted above to center the container make sure you set some sort of width to it tho
    Last edited by Dropfaith; 10-12-2007 at 12:51 AM.

  • #3
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    The first problem is you have not specified a DOCTYPE for your page. This will cause browsers to render the page in quirks mode.

    That would be the first problem to correct, which may well reveal other problems, but at least you'd be on the road to a page that will display properly cross-browser.

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm .. read the topic & not sure what doctype to use. Thanks for the help both of you, not 100% sure by what you mean by container element though.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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