Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Mar 2004
    Location
    Durham, NC, US
    Posts
    17
    Member #
    5090
    I have the following sample page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
      <head>
        <title>My Problem</title>
        <style type="text/css">
          body {
            width: 48em;
            font: 10pt sans-serif;
            color: black;
            background-color: white;
            margin-left: auto;
            margin-right: auto;
          }
          input {
            width: 6em;
          }
        </style>
      </head>
      <body>
        <table style="width: 100%;">
          <tr>
            <td style="width: 33%; text-align: left;">
              <input type="submit" name="submit" value="Left">
            </td>
            <td style="width: 33%; text-align: center;">
              <input type="submit" name="submit" value="Center">
            </td>
            <td style="width: 33%; text-align: right;">
              <input type="submit" name="submit" value="Right">
            </td>
          </tr>
          <tr>
            <td style="width: 33%; text-align: left;">
              <input type="submit" name="submit" value="Left">
            </td>
            <td style="width: 33%; text-align: center;">
            </td>
            <td style="width: 33%; text-align: right;">
              <input type="submit" name="submit" value="Right">
            </td>
          </tr>
        </table>
      </body>
    </html>

    The body is set to a relative width, and centers itself in the view port. The body is meant to be roughly 640px wide with a 10pt font, incase you are on a 640x480 screen. I want it to remained centered as the user changes the size of the font with the UA, but to expand or contract as needed.

    I also want to set up the input submit buttons without the use of a table. I'm having huge problems doing this. I can either get them set when all three buttons are present, but not when the center one is missing, or I can get them set with all three or only two buttons, but the buttons don't move apart as the page widens or narrows.

    Any suggestions?

  2.  

  3. #2
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    Are you missing the <form> and </form> tags?

  4. #3
    Junior Member
    Join Date
    Mar 2004
    Location
    Durham, NC, US
    Posts
    17
    Member #
    5090
    I stripped them out for the purposes of this example. They aren't affecting layout. You completely missed my problem.

  5. #4
    Junior Member
    Join Date
    Mar 2004
    Location
    Durham, NC, US
    Posts
    17
    Member #
    5090
    This is what I have now:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
      <head>
        <title>My Problem</title>
        <style type="text/css">
          body {
            font: 10pt sans-serif;
            color: black;
            background-color: silver;
          }
          .pageSpace {
            color: black;
            background-color: white;
            margin: 0px auto;
            width: 48em;
            min-height: 100%;
          }
          .questionnaire {
            width: 80%;
            margin: 5px auto;
            border: 1px solid black;
          }
          .questionnaire caption {
            margin: 0px auto;
            font-variant: small-caps;
          }
          .buttonRow {
            position: relative;
            margin: 25px auto;
            width: 100%;
          }
          .buttonLeft {
            position: relative;
            margin-right: 14.6em;
            width: 6em;
            left: 10px;
          }
          .buttonCenter {
            position: absolute;
            width: 6em;
            margin: 0px auto;
          }
          .buttonRight {
            position: absolute;
            margin-left: 14.6em;
            width: 6em;
            right: 10px;
          }
        </style>
      </head>
      <body>
        <div class="pageSpace">
          <div class="buttonRow">
            <input type="submit" name="topLeft" value="Left" class="buttonLeft">
            <input type="submit" name="topCenter" value="Center" class="buttonCenter">
            <input type="submit" name="topRight" value="Right" class="buttonRight">
          </div>
          <table class="questionnaire">
            <caption>Sample Table</caption>
            <tr>
              <td><label for="sampleQuestion1">Sample Question</label></td><td><input type="text" id="sampleQuestion1"></td>
            </tr>
            <tr>
              <td><label for="sampleQuestion2">Sample Question</label></td><td><input type="text" id="sampleQuestion2"></td>
            </tr>
          </table>        
          <div class="buttonRow">
            <input type="submit" name="bottomLeft" value="Left" class="buttonLeft">
            <input type="submit" name="bottomRight" value="Right" class="buttonRight">
          </div>
        </div>
      </body>
    </html>
    I have two problems with this:[list=1][*]The pageSpace doesn't go from the top of the view port to the bottom. I don't want to see the gray background above or below the white box.[*]In Mozilla, if the view port is narrower than pageSpace, it continues to center the page. Part of what you should see will fall off the left side and you can't get to it.[/list=1]

  6. #5
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    Yeah I wasn't sure how to help but I just thought I would point out the tags... sorry


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com