Web Analytics Made Easy -
StatCounter Why Won't My Page Center? - CodingForum

Announcement

Collapse
No announcement yet.

Why Won't My Page Center?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Why Won't My Page Center?

    I've searched google on how to center a page using CSS and even looked at the FAQs here, but nothing seems to work. I even tried using the <center></center> html tag sets. I'm sure this is a simple fix, but have no idea what's wrong. Here's the coding for the site:

    Code:
    <html>
    <head>
    <title>FG Xbox</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="layout.css" />
    </head>
    
    <body style="background-color:#000000; background: url(background.gif); margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;>
    
    <div id="index-01">
    	<img src="images/index_01.jpg" width=786 height=104 alt="">
    </div>
    <div id="index-02">
    	<img src="images/index_02.jpg" width=786 height=29 alt="">
    </div>
    <div id="index-03">
    	<img src="images/index_03.jpg" width=115 height=883 alt="">
    </div>
    <div id="index-04">
    	<img src="images/index_04.jpg" width=21 height=238 alt="">
    </div>
    <div id="index-05">
    	<img src="images/index_05.jpg" width=356 height=208 alt="">
    </div>
    <div id="index-06">
    	<img src="images/index_06.jpg" width=73 height=16 alt="">
    </div>
    <div id="index-07">
    	<img src="images/index_07.jpg" width=210 height=153 alt="">
    </div>
    <div id="index-08">
    	<img src="images/index_08.jpg" width=11 height=883 alt="">
    </div>
    <div id="index-09">
    	<img src="images/index_09.jpg" width=14 height=141 alt="">
    </div>
    <div id="index-10">
    	<img src="images/index_10.jpg" width=59 height=222 alt="">
    </div>
    <div id="index-11">
    	<img src="images/index_11.jpg" width=210 height=39 alt="">
    </div>
    <div id="index-12">
    	<img src="images/index_12.jpg" width=14 height=81 alt="">
    </div>
    <div id="index-13">
    	<img src="images/index_13.jpg" width=210 height=231 alt="">
    </div>
    <div id="index-14">
    	<img src="images/index_14.jpg" width=356 height=30 alt="">
    </div>
    <div id="index-15">
    	<img src="images/index_15.jpg" width=20 height=164 alt="">
    </div>
    <div id="index-16">
    	<img src="images/index_16.jpg" width=409 height=114 alt="">
    </div>
    <div id="index-17">
    	<img src="images/index_17.jpg" width=21 height=164 alt="">
    </div>
    <div id="index-18">
    	<img src="images/index_18.jpg" width=409 height=50 alt="">
    </div>
    <div id="index-19">
    	<img src="images/index_19.jpg" width=11 height=481 alt="">
    </div>
    <div id="index-20">
    	<img src="images/index_20.jpg" width=428 height=343 alt="">
    </div>
    <div id="index-21">
    	<img src="images/index_21.jpg" width=11 height=481 alt="">
    </div>
    <div id="index-22">
    	<img src="images/index_22.jpg" width=210 height=39 alt="">
    </div>
    <div id="index-23">
    	<img src="images/index_23.jpg" width=210 height=126 alt="">
    </div>
    <div id="index-24">
    	<img src="images/index_24.jpg" width=210 height=17 alt="">
    </div>
    <div id="index-25">
    	<img src="images/index_25.jpg" width=210 height=140 alt="">
    </div>
    <div id="index-26">
    	<img src="images/index_26.jpg" width=428 height=122 alt="">
    </div>
    <div id="index-27">
    	<img src="images/index_27.jpg" width=210 height=138 alt="">
    </div>
    <div id="index-28">
    	<img src="images/index_28.jpg" width=428 height=16 alt="">
    </div>
    
    </body>
    </html>

  • #2
    To center a page in CSS, you typically use the following basic layout:
    Code:
     <body>
     <div id="page_container">
         <!-- your content here -->
     </div>
     </body>
    And I use the following CSS, though yours will probably be different a little bit:
    Code:
    body {
        text-align: center; /* this is only for IE5 (Win) */
    }
    
    #page_container {
        text-align: left; /* correct IE5's mistakes for other browsers */
        margin: 0 auto; /* left and right margins set automatically, the 0 can be changed because it is the top and bottom margin */
    
        /* you can also have the following instead using 'margin'
    
        margin-left: auto;
        margin-right: auto;
    
        because the top and bottom margins don't affect anything, so if you don't need to set them, why should you? */
    }
    PHP Code:
    $hello file_get_contents('hello.txt'); echo $hello
    hello

    Comment


    • #3
      I did exactly what you said, and still something seems to be wrong. I put the div id under my body tag and used the CSS you gave. Like I said, I even tried using the <center> HTML tag set, and even that didn't work. Here's what I got after I added your coding:

      Code:
      <html>
      <head>
      <title>FG Xbox</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      <link rel="stylesheet" type="text/css" href="layout.css" />
      </head>
      
      <body style="background-color:#000000; background: url(background.gif);">
      <div id="page_container">
      
      <div id="index-01">
      	<img src="images/index_01.jpg" width=786 height=104 alt="">
      </div>
      <div id="index-02">
      	<img src="images/index_02.jpg" width=786 height=29 alt="">
      </div>
      <div id="index-03">
      	<img src="images/index_03.jpg" width=115 height=883 alt="">
      </div>
      <div id="index-04">
      	<img src="images/index_04.jpg" width=21 height=238 alt="">
      </div>
      <div id="index-05">
      	<img src="images/index_05.jpg" width=356 height=208 alt="">
      </div>
      <div id="index-06">
      	<img src="images/index_06.jpg" width=73 height=16 alt="">
      </div>
      <div id="index-07">
      	<img src="images/index_07.jpg" width=210 height=153 alt="">
      </div>
      <div id="index-08">
      	<img src="images/index_08.jpg" width=11 height=883 alt="">
      </div>
      <div id="index-09">
      	<img src="images/index_09.jpg" width=14 height=141 alt="">
      </div>
      <div id="index-10">
      	<img src="images/index_10.jpg" width=59 height=222 alt="">
      </div>
      <div id="index-11">
      	<img src="images/index_11.jpg" width=210 height=39 alt="">
      </div>
      <div id="index-12">
      	<img src="images/index_12.jpg" width=14 height=81 alt="">
      </div>
      <div id="index-13">
      	<img src="images/index_13.jpg" width=210 height=231 alt="">
      </div>
      <div id="index-14">
      	<img src="images/index_14.jpg" width=356 height=30 alt="">
      </div>
      <div id="index-15">
      	<img src="images/index_15.jpg" width=20 height=164 alt="">
      </div>
      <div id="index-16">
      	<img src="images/index_16.jpg" width=409 height=114 alt="">
      </div>
      <div id="index-17">
      	<img src="images/index_17.jpg" width=21 height=164 alt="">
      </div>
      <div id="index-18">
      	<img src="images/index_18.jpg" width=409 height=50 alt="">
      </div>
      <div id="index-19">
      	<img src="images/index_19.jpg" width=11 height=481 alt="">
      </div>
      <div id="index-20">
      	<img src="images/index_20.jpg" width=428 height=343 alt="">
      </div>
      <div id="index-21">
      	<img src="images/index_21.jpg" width=11 height=481 alt="">
      </div>
      <div id="index-22">
      	<img src="images/index_22.jpg" width=210 height=39 alt="">
      </div>
      <div id="index-23">
      	<img src="images/index_23.jpg" width=210 height=126 alt="">
      </div>
      <div id="index-24">
      	<img src="images/index_24.jpg" width=210 height=17 alt="">
      </div>
      <div id="index-25">
      	<img src="images/index_25.jpg" width=210 height=140 alt="">
      </div>
      <div id="index-26">
      	<img src="images/index_26.jpg" width=428 height=122 alt="">
      </div>
      <div id="index-27">
      	<img src="images/index_27.jpg" width=210 height=138 alt="">
      </div>
      <div id="index-28">
      	<img src="images/index_28.jpg" width=428 height=16 alt="">
      </div>
      
      </div>
      </body>
      </html>
      Last edited by Technique; Oct 12, 2006, 09:18 PM.

      Comment


      • #4
        Are you using absolute positioning by any chance? We will probably need to see the CSS.
        PHP Code:
        $hello file_get_contents('hello.txt'); echo $hello
        hello

        Comment


        • #5
          It's basically what photoshop gave me.

          layout.css
          Code:
          #index-01 {
          position:absolute;
          left:0px;
          top:0px;
          width:786px;
          height:104px;
          }
          
          #index-02 {
          position:absolute;
          left:0px;
          top:104px;
          width:786px;
          height:29px;
          }
          
          #index-03 {
          position:absolute;
          left:0px;
          top:133px;
          width:115px;
          height:883px;
          }
          
          #index-04 {
          position:absolute;
          left:115px;
          top:133px;
          width:21px;
          height:238px;
          }
          
          #index-05 {
          position:absolute;
          left:136px;
          top:133px;
          width:356px;
          height:208px;
          }
          
          #index-06 {
          position:absolute;
          left:492px;
          top:133px;
          width:73px;
          height:16px;
          }
          
          #index-07 {
          position:absolute;
          left:565px;
          top:133px;
          width:210px;
          height:153px;
          }
          
          #index-08 {
          position:absolute;
          left:775px;
          top:133px;
          width:11px;
          height:883px;
          }
          
          #index-09 {
          position:absolute;
          left:492px;
          top:149px;
          width:14px;
          height:141px;
          }
          
          #index-10 {
          position:absolute;
          left:506px;
          top:149px;
          width:59px;
          height:222px;
          }
          
          #index-11 {
          position:absolute;
          left:565px;
          top:286px;
          width:210px;
          height:39px;
          }
          
          #index-12 {
          position:absolute;
          left:492px;
          top:290px;
          width:14px;
          height:81px;
          }
          
          #index-13 {
          position:absolute;
          left:565px;
          top:325px;
          width:210px;
          height:231px;
          }
          
          #index-14 {
          position:absolute;
          left:136px;
          top:341px;
          width:356px;
          height:30px;
          }
          
          #index-15 {
          position:absolute;
          left:115px;
          top:371px;
          width:20px;
          height:164px;
          }
          
          #index-16 {
          position:absolute;
          left:135px;
          top:371px;
          width:409px;
          height:114px;
          }
          
          #index-17 {
          position:absolute;
          left:544px;
          top:371px;
          width:21px;
          height:164px;
          }
          
          #index-18 {
          position:absolute;
          left:135px;
          top:485px;
          width:409px;
          height:50px;
          }
          
          #index-19 {
          position:absolute;
          left:115px;
          top:535px;
          width:11px;
          height:481px;
          }
          
          #index-20 {
          position:absolute;
          left:126px;
          top:535px;
          width:428px;
          height:343px;
          }
          
          #index-21 {
          position:absolute;
          left:554px;
          top:535px;
          width:11px;
          height:481px;
          }
          
          #index-22 {
          position:absolute;
          left:565px;
          top:556px;
          width:210px;
          height:39px;
          }
          
          #index-23 {
          position:absolute;
          left:565px;
          top:595px;
          width:210px;
          height:126px;
          }
          
          #index-24 {
          position:absolute;
          left:565px;
          top:721px;
          width:210px;
          height:17px;
          }
          
          #index-25 {
          position:absolute;
          left:565px;
          top:738px;
          width:210px;
          height:140px;
          }
          
          #index-26 {
          position:absolute;
          left:126px;
          top:878px;
          width:428px;
          height:122px;
          }
          
          #index-27 {
          position:absolute;
          left:565px;
          top:878px;
          width:210px;
          height:138px;
          }
          
          #index-28 {
          position:absolute;
          left:126px;
          top:1000px;
          width:428px;
          height:16px;
          }

          Comment


          • #6
            Absolute positioning puts the divs in specific spots relative to the top left corner of the page and takes them out of the normal page flow. Try deleting position, left and top attributes in that CSS file and replace them with the code that rpgfan3233 gave you.
            Stephen
            Learn Modern JavaScript - http://javascriptexample.net/
            Helping others to solve their computer problem at http://www.felgall.com/

            Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

            Comment


            • #7
              I deleted the three attributes you said and even before replacing it with the code rpgfan3233, I tried viewing it in the browser and all my slices were misplaced. Please help!

              Comment


              • #8
                If your content consists merely of a bunch of images, why don't you just use one image and center that?

                Comment


                • #9
                  How would you like to display your images? One next to the other or one under the other? Or some other way? Your code places them all over the page because you have used absolute positioning.

                  Comment


                  • #10
                    What can I do with the position: absolute attribute? I tried deleting, but that only misplaced the images from where they should be. The thing is Arbitrator, it's just images right now, but later I'll have more content in the divs.

                    Here's what I have right now if you're wondering. I have a folder with all my content in it. Inside that folder I have an images folder with all my sliced images from photoshop. Also inside the root folder I have the index and CSS, which I posted below. I don't know if photoshop is screwing up things or what, but I've tried everything that has been mentioned, but nothing is working.

                    Comment


                    • #11
                      You NEED a Doctype or it will not centre in IE (and possibly others). Try HTML 4.01 as your markup will not be valid XHTML.

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                      markaylward.co.uk

                      Comment


                      • #12
                        I know my codes above don't show it, but I have tried adding one but to no help. What can I do to the position: absolute attribute other then deleting it? Or is there something else I can do...I'm stumped.

                        Comment


                        • #13
                          A doctype is not a magic fix. It is the first step in the process of fixing your page.

                          You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict.
                          Activating the Right Layout Mode Using the Doctype Declaration
                          Fix Your Site With the Right DOCTYPE!
                          Choosing a DOCTYPE
                          Doctype switching
                          Rendering Mode and Doctype Switching
                          http://www.w3.org/QA/2002/04/Web-Quality
                          http://www.w3.org/QA/2002/04/valid-dtd-list.html

                          No more Transitional DOCTYPEs, please
                          It's Time To Kill Off Transitional DOCTYPES
                          Transitional vs. Strict Markup
                          Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
                          Java != JavaScript && JScript != JavaScript
                          Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

                          Comment


                          • #14
                            Originally posted by Technique View Post
                            I know my codes above don't show it, but I have tried adding one but to no help. What can I do to the position: absolute attribute other then deleting it? Or is there something else I can do...I'm stumped.
                            I'm guessing that you don't know how absolute positioning works. You might want to read a tutorial or something, like this one: Relatively Absolute.

                            I believe the following solution should do the trick:
                            1. Implement a document type declaration as previous posters have suggested. I would second Kravvitz' recommendation of HTML 4.01 Strict.
                            2. Surround the image containers with a div element and set its width to be equal to the image containers' total width.
                            3. Set the position property of the div element to relative so that the absolutely positioned images within are absolutely positioned relative to the div container instead of the viewport.
                            4. Utilize another previous suggestion and set the left and right margin properties of the div element to a value of auto to center it.

                            One last thing: position: absolute is not an “attribute”. It's a (CSS) declaration consisting of a property (position) and value (absolute).

                            Comment


                            • #15
                              I still have no idea whats wrong. Can you be more detailed on what to do for step 2? I did the other steps you mentioned, but the slices were misplaced again.

                              If possible can someone just center it for me and post the final coding.

                              Sorry for bringing up such an old topic now, but I've been busy and haven't been able to read the responses.

                              Comment

                              Working...
                              X