Re: Non-Table Oriented Data Entry Form Example Needed

Tech-Archive recommends: Speed Up your PC by fixing your registry

From: Jon (js_at_roksteady.net)
Date: 03/11/04 

Date: Thu, 11 Mar 2004 12:01:45 -0000

I do it a little different. Say the objective isa simple two colum layout
with a logo at the top and a footer at the bottom.
1/ position the logo absolutely at the top of the page
2/ set top margin of the body tag sufficient to clear the logo
3/ drop a 2 colum table on the page either fixed or % width and id the 2
cells
4/ put the footer in a div below the layout table
So the page might look like this

<style type="text/css">
body{
margin: 100px 0 0 0;
padding:0;
background-color: #fff;
}
#logo{
position:absolute;
left:0;top:0;
width:150px;
}
#layoutTable{
width:100%;
}
#left{
width:200px;
border-right: 1px dotted #333;
padding: 0 30px
}
#right{
width:auto;
padding:0 50px;
}
#footer{
width:100%;
text-align:center;
}
</style>
<body>
<div id="logo"><img src="logo.gif"></div>
<table id="layoutTable">
<td id="left">...left stuff</td>
<td id="right">...right stuff</td>
</table>
<div id="footer">...footer stuff</div>
</body>

Mainly because I don't like nesting tables - also a layout like this is very
easy to maintain and modify, eg change from fluid to fixed width etc.

Jon
Microsoft MVP - FP

chris leeds wrote:
> the solution to your predicament is not No Tables, but oddly enough
> More Tables.
> you'd lay your first table out as just a simple table I usually do 3
> rows, 1 column. then I split the middle row into two columns. then
> drop the table structure you want for the banner area into the top
> cell, what you want for the left column (usually navigation) into the
> left middle cell, whatever I want for the foot into the lowest row.
> that leaves the remaining cell for content.
> what I usually do is make a blank page with just the table and
> content for the particular area in the page in a separate folder and
> use the FrontPage include to write it into the page. you'll be able
> to keep all your pages how you want and changing one file, like the
> one for the banner area, will change in every page you used it in.
> another thing that will help is when you get the first table/ page
> worked out, you don't need to do it again, just copy and paste the
> whole page in folder view so you can use it as a template.
> HTH
>
> --
> The email address on this posting is a "black hole". I got tired of
> all the spam.
> Please feel free to contact me here:
> http://nedp.net/contact/
>
> "jm" <john_20_28_2000@yahoo.com> wrote in message
> news:c67e4bdd.0403101915.d59a5b9@posting.google.com...
>> "chris leeds" <chris@nedp.net> wrote in message
> news:<#WJOe$uBEHA.1704@TK2MSFTNGP10.phx.gbl>...
>>> the most common way to do it is to set a div of a specific width,
>>> then on the style *** you'd specify the align for the label to
>>> left, and the fields to right.
>>> I think I saw a good example of this on www.sitepoint.com
>>> but I wouldn't abandon tables for css, you're much better off with
>>> both at the same time.
>>>
>>> what is it about the tables that's got you ticked off?
>>>
>>> --
>>> The email address on this posting is a "black hole". I got tired
>>> of all the spam.
>>> Please feel free to contact me here:
>>> http://nedp.net/contact/
>>
>>
>> I'm tired of lining the stupid cells up, columnspan and all that.
>> One cell gets bigger and the other one gets bigger with it. I'm just
>> tired of fooling with it.

Quantcast