SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Playing around with Footbagfreaks.com

    I have been plugging away at the book "Desiging Without Tables" and learning some of the basics of accessible desing, but a few issues have popped up.

    1. Is there a way to create a three column layout and have the left and right column have a solid background color that streches the whole length of the page to match the length of the center column text?

    2. The book does not mention form design and layout, and if tables are still appropriate for this type of layout?

    Thanks for your help!

  2. #2
    SitePoint Enthusiast siusai's Avatar
    Join Date
    Jan 2002
    Location
    Richmond, Canada
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Yes! This page illustrates a method to do that: http://www.positioniseverything.net/...l.stretch.html. PIE is your friend

    2. It is possible to do form layout without table. The following is a sample form I did a while ago using CSS and XHTML only:
    Code:
    <form class="forms" action="" method="post">
         <h4>This is a form</h4>
         <div>
              <div class="labels">
                <label for="name">Contact Name:</label>
              </div>
              <input type="text" id="name" class="text" value="this is text input" />
              <br />
              <div class="labels">
                <label for="address">Address:</label>
              </div>
              <input type="text" id="address" class="text" value="this is text input" />
              <br />
              <div class="labels">
                <label for="age">Age:</label>
              </div>
              <select id="age">
                <option value="18-25">18 - 25</option>
                <option value="26-35">26 - 35</option>
                <option value="36-45">36 - 45</option>
              </select>
              <br />
              <div class="labels">Gender:</div>
              <input type="radio" name="gender" id="female" value="f" />
              <label for="female">Female</label>
              &nbsp;&nbsp;
              <input type="radio" name="gender" id="male" value="f" />
              <label for="male">Male</label>
              <br />
              <button type="submit">Submit</button>
         </div>
    </form>
    The corresponding css definition:
    Code:
    .forms {
    	position: relative;
    	margin-top: 15px;
    	margin-left: auto;
    	margin-right: auto;
    	width: 95%;
    	padding: 10px 5px 5px 5px;
    	border: 1px dotted black;
    	color: black;
    }
    
    .labels {
    	float: left;
    	width: 16%;
    	font-weight: bold;
    	padding: 0px 3px 3px 0px;
    	margin: 0px;
    }
    
    input.text {
    	width: 60%;
    	font: 8pt/16pt "Trebuchet MS";
    	margin-bottom: 3px;
    }
    
    select {
    	width: 60%;
    	font: 8pt/16pt "Trebuchet MS";
    	margin-bottom: 3px;
    }
    
    button {
    	font: 8pt/16pt "Trebuchet MS";
    	font-weight: bold;
    	padding: 0px 2px 0px 2px;
    	margin: 0px;
    }
    It gives you a layout just like the normal 2-column table with labels on the left and input boxes on the right.


Bookmarks

Posting Permissions

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