Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    219
    Rep Power
    14

    CSS instead of tables. centering whole page


    Hey guys.

    http://fairplaygamers.com/fifa/application.php

    if you look there you will see my banner which is 760px. I want to make the whole entire rest of the page to be within those margins. How can I achieve this? Pretty much itd be like having a 1 cell table with everything in between.
    Last edited by spezialize; June 21st, 2007 at 03:45 PM.
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    133
    Hi there spezialize,

    try adding this rule to your stylesheet...
    Code:
    
    body {
        width:760px;
        margin:auto;
     }
    coothead
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    219
    Rep Power
    14
    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>
    
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>FairPlay FIFA League Application</title>
    
    
    <LINK REL=STYLESHEET HREF="fifa.css" TYPE="text/css">
    
    </head>
    
    
    <body>
      <div id="container">
       
      
    
    <?php include("header.php"); ?>
    
    <p align="center"><img src="images/app.jpg" /></p>
    
    <p class="bodytext" style="margin-left: 30px;">The
    FairPlay FIFA League (FPFL) is always looking for owners that can
    contribute to our league if a team is left vacant. We prefer owners
    that can commit to a full season, can play their games on
    time,&nbsp;and have good sportsmanship skills/previous league
    experience if possible. The FPFL requires owners to:&nbsp;<br />
    
    <br />
    
    - Have Quality Connections<br />
    
    - Show Good Sportsmanship <br />
    
    - Schedule and Play ALL your games<br />
    
    - Be active in all areas of league membership</p>
    
    <p class="bodytext" style="margin-left: 30px;">If
    you fit these qualifications and would like to join the FPFL, first
    <a href="http://www.fairplaygamers.com/fifa/rules.php">READ
    THE LEAGUE RULES</a> , then fill out the
    application below: </p>
    
    <hr width="700" />
    <form id="formapp" name="formapp" method="post" action="mailer.php">
      <p class="style1" style="margin-left: 45px;"> <span class="formtext">Name:<br />
    
      <input name="Name:" type="text" /> </span></p>
    
      <p class="formtext" style="margin-left: 45px;">Age:<br />
    
      <select name="Age">
      <option>18 or Younger</option>
      <option>19-25</option>
      <option>26-30</option>
      <option>31-35</option>
      <option>36 or Older</option>
      </select>
    
       </p>
    
      <p class="formtext" style="margin-left: 45px;">AIM
    Screen Name (required):<br />
    
      <input name="AIM" type="text" /> </p>
    
      <p class="formtext" style="margin-left: 45px;"> Valid
    Email Address (required):<br />
    
      <input name="EMAIL" type="text" /> </p>
    
      <p class="formtext" style="margin-left: 45px;">EA
    Online ID (required):<br />
    
      <input name="EA ID:" type="text" /></p>
    
      <p class="formtext" style="margin-left: 45px;"> How
    did you hear about FPFL?<br />
    
      <input name="How did you find out about FPFL" type="text" /> </p>
    
      <p class="formtext" style="margin-left: 45px;"> Do
    you have a PS2 Headset?<br />
    
      <select name="Headset">
      <option>Yes</option>
      <option>No</option>
      </select>
    
       </p>
    
      <p class="formtext" style="margin-left: 45px;"> What
    type of internet connection do you have?<br />
    
      <select name="Connection">
      <option>56K Dialup/ISDN</option>
      <option>DSL</option>
      <option>Cable</option>
      <option>I don't know</option>
      </select>
    
       </p>
    
      <p class="formtext" style="margin-left: 45px;"> How
    many online leagues are you currently in?<br />
    
      <select name="How many leagues are you in?">
      <option>None</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>More than 4</option>
      </select>
    
       </p>
    
      <p style="margin-left: 45px;"> <span class="formtext"> <input name="Submit" value="Submit" type="submit" /> </span> <input name="Reset" value="Reset" type="reset" />
      </p>
    
    </form>
    
    <p>&nbsp;</p>
    
    
    <?php include("footer.php"); ?>
    </div>
    </body>
    </html>
    everything is wrapped in my container tage which is in my css file but nothing changes..
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Please fix your XHTML errors.

    It's bad practice to use empty <p>s to add spacing.

    Try this.
    Code:
    body {
      text-align: center; /* for IE5.x/Win */
      margin: 0;
      padding: 10px;
      background-color: #ffffff;
      color: #000000;
    }
    #container {
      margin: 0 auto;
      width: 760px;
      text-align: left;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    219
    Rep Power
    14
    Some of you misunderstood, or the code didnt work. If you look at the link now I used a table to get what I want.. however I don't want to use a table I would like to use css, but that is the general layout I want.

    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>
    
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>FairPlay FIFA League Application</title>
    
    
    <LINK REL=STYLESHEET HREF="fifa.css" TYPE="text/css">
    
    </head>
    
    
    <body>
    <div id="container">
       
      
    
      <table width="760" border="2" align="center">
        <tr>
          <td><div id="div">
            <?php include("header.php"); ?>
            <p align="center"><img src="images/app.jpg" /></p>
            <p class="bodytext" style="margin-left: 30px;">The
              FairPlay FIFA League (FPFL) is always looking for owners that can
              contribute to our league if a team is left vacant. We prefer owners
              that can commit to a full season, can play their games on
              time,&nbsp;and have good sportsmanship skills/previous league
              experience if possible. The FPFL requires owners to:&nbsp;<br />
              <br />
              - Have Quality Connections<br />
              - Show Good Sportsmanship <br />
              - Schedule and Play ALL your games<br />
              - Be active in all areas of league membership</p>
            <p class="bodytext" style="margin-left: 30px;">If
              you fit these qualifications and would like to join the FPFL, first <a href="http://www.fairplaygamers.com/fifa/rules.php">READ
                THE LEAGUE RULES</a> , then fill out the
              application below: </p>
            <hr width="700" />
            <form id="formapp" name="formapp" method="post" action="mailer.php">
              <p class="style1" style="margin-left: 45px;"> <span class="formtext">Name:<br />
                    <input name="Name:" type="text" />
              </span></p>
              <p class="formtext" style="margin-left: 45px;">Age:<br />
                  <select name="Age">
                    <option>18 or Younger</option>
                    <option>19-25</option>
                    <option>26-30</option>
                    <option>31-35</option>
                    <option>36 or Older</option>
                  </select>
              </p>
              <p class="formtext" style="margin-left: 45px;">AIM
                Screen Name (required):<br />
                <input name="AIM" type="text" />
              </p>
              <p class="formtext" style="margin-left: 45px;"> Valid
                Email Address (required):<br />
                <input name="EMAIL" type="text" />
              </p>
              <p class="formtext" style="margin-left: 45px;">EA
                Online ID (required):<br />
                <input name="EA ID:" type="text" />
              </p>
              <p class="formtext" style="margin-left: 45px;"> How
                did you hear about FPFL?<br />
                <input name="How did you find out about FPFL" type="text" />
              </p>
              <p class="formtext" style="margin-left: 45px;"> Do
                you have a PS2 Headset?<br />
                <select name="Headset">
                  <option>Yes</option>
                  <option>No</option>
                </select>
              </p>
              <p class="formtext" style="margin-left: 45px;"> What
                type of internet connection do you have?<br />
                <select name="Connection">
                  <option>56K Dialup/ISDN</option>
                  <option>DSL</option>
                  <option>Cable</option>
                  <option>I don't know</option>
                </select>
              </p>
              <p class="formtext" style="margin-left: 45px;"> How
                many online leagues are you currently in?<br />
                <select name="How many leagues are you in?">
                  <option>None</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>More than 4</option>
                </select>
              </p>
              <p style="margin-left: 45px;"> <span class="formtext">
                <input name="Submit" value="Submit" type="submit" />
                </span>
                  <input name="Reset" value="Reset" type="reset" />
              </p>
            </form>
            <?php include("footer.php"); ?>
        </div></td>
        </tr>
    </table>
    </div>
    </body>
    </html>
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    No, you misunderstood. You modified the code I posted before you tried it. Use what I posted.

    "#container" means an element with the ID "container". "body" means a <body> element. ".container" means a class named "container".

    For anyone else who reads this thread, this is what spezialize put in his stylesheet:
    Code:
    .body {
      text-align: center; /* for IE5.x/Win */
      margin: 0;
      padding: 10px;
      background-color: #ffffff;
      color: #000000;
    }
    .container {
      margin: 0 auto;
      width: 760px;
      text-align: left;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    219
    Rep Power
    14
    Now text is centered. I do not want that. I feel like maybe I am doing something wrong with the code.

    http://fairplaygamers.com/fifa/application.php

    here is my stylesheet.
    Code:
    .formtext    {
    	     font-weight: bold;
                 font-family: Tahoma;
                 font-size: 12px;
    } 
    body {
      text-align: center; /* for IE5.x/Win */
      margin: 0;
      padding: 10px;
      background-color: #ffffff;
      color: #000000;
    }
    #container {
      margin: 0 auto;
      width: 760px;
      text-align: left;
    }
    
    
    a:link      { 
                 font-family: Tahoma; font-size: 12px; color: red
    }
    a:visited   { 
                 font-family: Tahoma; font-size: 12px; color: red
    }
    a:hover     { 
                 font-family: Tahoma; font-size: 12px; color: black
    }
    
    
    TABLE       { 
                 background: black; border-collapse: collapse; 
                 font-family: Tahoma; font-size: 12px; color: white
    }
          
    TD          { 
                 background: white; border: none; 
                 font-family: Tahoma; font-size:12px;color:black 
    }
    here is my page code
    Code:
     <p class="formtext" style="margin-left: 45px;"> Do
                you have a PS2 Headset?<br />
                <select name="Headset">
                  <option>Yes</option>
                  <option>No</option>
                </select>
              </p>
              <p class="formtext" style="margin-left: 45px;"> What
                type of internet connection do you have?<br />
                <select name="Connection">
                  <option>56K Dialup/ISDN</option>
                  <option>DSL</option>
                  <option>Cable</option>
                  <option>I don't know</option>
                </select>
              </p>
              <p class="formtext" style="margin-left: 45px;"> How
                many online leagues are you currently in?<br />
                <select name="How many leagues are you in?">
                  <option>None</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>More than 4</option>
                </select>
              </p>
              <p style="margin-left: 45px;"> <span class="formtext">
                <input name="Submit" value="Submit" type="submit" />
                </span>
                  <input name="Reset" value="Reset" type="reset" />
              </p>
            </form>
            <?php include("footer.php"); ?>
        </div>
    </body>
    </html>
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It's not working right because of your XHTML errors. #container should be the only child of <body>.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. Permanently Banned
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jun 2006
    Location
    In a whale
    Posts
    4,127
    Rep Power
    0
    From what I see you are ending the <div id="container"> too soon. The text-align: left only counts for #container. text-align: center is for the whole body.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    219
    Rep Power
    14
    I ran it thru the validator. A buncha errors and I have no idea.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    219
    Rep Power
    14
    fixed as much as I could. Here is what is left..

    Code:
    # Error  Line 10 column 10: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
    
    <link rel=stylesheet href="fifa.css" type="text/css"/>
    
    ✉
    # Error Line 19 column 5: end tag for element "div" which is not open.
    
    </div>
    
    The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
    
    If this error occured in a script section of your document, you should probably read this FAQ entry.
    
    ✉
    # Error Line 32 column 58: end tag for element "p" which is not open.
    
              - Be active in all areas of league membership</p>
    says error on line 19 of a div tag but i dont even have one..
  22. #12
  23. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,115
    Rep Power
    2498
    So 3 errors:

    1)
    html4strict Code:
    <link rel=stylesheet href="fifa.css" type="text/css"/>
    <!--becomes-->
    <link rel="stylesheet" href="fifa.css" type="text/css" />
    2) Before your first <hr /> towards the top of the page,
    you have an extra </div>
    3) In the paragraph beginning "The FairPlay FIFA League (FPFL)"
    you have
    html4strict Code:
    <p class="bodytext" style="margin-left: 30px;"/>
    <!--becomes-->
    <p class="bodytext" style="margin-left: 30px;">


    The errors are fairly self-explanatory really.
    HTH..

    Cheers,
    Jamie

    >_ My Music Blog | Losing weight @notsoheavyblog | My Tweets

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    219
    Rep Power
    14
    well i validated my code. but i cant get my desired effect..
    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>
    
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>FairPlay FIFA League Application</title>
    
    
    <link rel="stylesheet" href="fifa.css" type="text/css"/>
    
    </head>
    
    
    
    <body>
    <div id="container">
    <?php include("header.php"); ?>
            <p align="center"><img src="images/app.jpg" alt="app"/></p>
            <p class="bodytext" style="margin-left: 30px;">The
              FairPlay FIFA League (FPFL) is always looking for owners that can
              contribute to our league if a team is left vacant. We prefer owners
              that can commit to a full season, can play their games on
              time,&nbsp;and have good sportsmanship skills/previous league
              experience if possible. The FPFL requires owners to:&nbsp;<br />
              <br />
              - Have Quality Connections<br />
              - Show Good Sportsmanship <br />
              - Schedule and Play ALL your games<br />
              - Be active in all areas of league membership</p>
            <p class="bodytext" style="margin-left: 30px;">If
              you fit these qualifications and would like to join the FPFL, first <a href="http://www.fairplaygamers.com/fifa/rules.php">READ
                THE LEAGUE RULES</a> , then fill out the
              application below: </p>
            <hr width="700" />
            <form id="formapp" name="formapp" method="post" action="mailer.php">
              <p class="style1" style="margin-left: 45px;"> <span class="formtext">Name:<br />
                    <input name="Name:" type="text" />
              </span></p>
              <p class="formtext" style="margin-left: 45px;">Age:<br />
                  <select name="Age">
                    <option>18 or Younger</option>
                    <option>19-25</option>
                    <option>26-30</option>
                    <option>31-35</option>
                    <option>36 or Older</option>
                  </select>
              </p>
              <p class="formtext" style="margin-left: 45px;">AIM
                Screen Name (required):<br />
                <input name="AIM" type="text" />
              </p>
              <p class="formtext" style="margin-left: 45px;"> Valid
                Email Address (required):<br />
                <input name="EMAIL" type="text" />
              </p>
              <p class="formtext" style="margin-left: 45px;">EA
                Online ID (required):<br />
                <input name="EA ID:" type="text" />
              </p>
              <p class="formtext" style="margin-left: 45px;"> How
                did you hear about FPFL?<br />
                <input name="How did you find out about FPFL" type="text" />
              </p>
              <p class="formtext" style="margin-left: 45px;"> Do
                you have a PS2 Headset?<br />
                <select name="Headset">
                  <option>Yes</option>
                  <option>No</option>
                </select>
              </p>
              <p class="formtext" style="margin-left: 45px;"> What
                type of internet connection do you have?<br />
                <select name="Connection">
                  <option>56K Dialup/ISDN</option>
                  <option>DSL</option>
                  <option>Cable</option>
                  <option>I don't know</option>
                </select>
              </p>
              <p class="formtext" style="margin-left: 45px;"> How
                many online leagues are you currently in?<br />
                <select name="How many leagues are you in?">
                  <option>None</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>More than 4</option>
                </select>
              </p>
              <p style="margin-left: 45px;"> <span class="formtext">
                <input name="Submit" value="Submit" type="submit" />
                </span>
                  <input name="Reset" value="Reset" type="reset" />
              </p>
            </form>
            <?php include("footer.php"); ?>
    
    
    </body>
    </div>
    
    </html>
  26. #14
  27. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,115
    Rep Power
    2498
    but i cant get my desired effect
    And that is???

    Your code is validated, wht is the issue now exactly?

    Cheers,
    Jamie

    >_ My Music Blog | Losing weight @notsoheavyblog | My Tweets

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    219
    Rep Power
    14
    As I said earlier in the thread id like to center everything .. and so the header/body/footer stay within the width of the banner. like if I put them all in a single celled table. Figured this would work with css
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo