15 replies [Last post]
tjforce
Offline
newbie
Last seen: 15 years 5 weeks ago
Joined: 2005-12-16
Posts: 7
Points: 0

I have been trying to design a data entry form like this:

Some Text: inputbox More Text: inputbox
More Text Test: inputbox Test More Text: inputbox
..etc

My problem is I can not get the text (labels) to align. I have searched and seen examples of data entry forms but they are 1 column only. I have seen 3 columns but there is only text in them. My problem is easy to solve using tables, however, I would like to learn how to accomplish without using tables and get a css standard. Does anybody know how to do this or point me to an example?

    [/]
    Anonymous
    Anonymous's picture
    Guru

    Data Entry Form Layout

    Do you want to do something like this: http://www.imaginekitty.com/align_form.html

    tjforce
    Offline
    newbie
    Last seen: 15 years 5 weeks ago
    Joined: 2005-12-16
    Posts: 7
    Points: 0

    Not Really

    In html with tables it would look like this:

    <form name="f" method="post" action="somepage.cfm">
    <table>
    <tr>
    <td align="right">First Name:<td>
    <td>&nbsp;&nbsp;</td>
    <td><input type="text" name="fn" /></td>
    <td align="right">City, State, Zip:</td>
    <td>&nbsp;&nbsp;</td>
    <td><input type="text" name="csz" /></td>
    </tr>
    <tr>
    <td align="right">More Information:<td>
    <td>&nbsp;&nbsp;</td>
    <td><input type="text" name="mi" /></td>
    <td align="right">Extra Information:</td>
    <td>&nbsp;&nbsp;</td>
    <td><input type="text" name="ei" /></td>
    </tr>

    </table>
    </form>

    How do you accomplish this with css only?

    Anonymous
    Anonymous's picture
    Guru

    Data Entry Form Layout

    I'd probably do something like this:

    tjforce
    Offline
    newbie
    Last seen: 15 years 5 weeks ago
    Joined: 2005-12-16
    Posts: 7
    Points: 0

    Closer

    That is much closer. How do you get the labels and the input boxes to line up exactly?

    Anonymous
    Anonymous's picture
    Guru

    Re: Closer

    tjforce wrote:
    That is much closer. How do you get the labels and the input boxes to line up exactly?
    The style is in the attached page. Basically the widths are defined. That's it.

    tjforce
    Offline
    newbie
    Last seen: 15 years 5 weeks ago
    Joined: 2005-12-16
    Posts: 7
    Points: 0

    Yea and Ney

    I first looked at it in Firefox 1.5 and the alignment is off. I looked at it in IE6 and it looks great. Darn different browsers!

    Anonymous
    Anonymous's picture
    Guru

    Re: Yea and Ney

    tjforce wrote:
    I first looked at it in Firefox 1.5 and the alignment is off. I looked at it in IE6 and it looks great. Darn different browsers!
    Hmmm...FF1.5 must see inline-block as inline. I'll rework it. Hold on. Smile

    http://www.quirksmode.org/css/display.html#inlineblock

    Anonymous
    Anonymous's picture
    Guru

    Data Entry Form Layout

    How's this one:

    tjforce
    Offline
    newbie
    Last seen: 15 years 5 weeks ago
    Joined: 2005-12-16
    Posts: 7
    Points: 0

    Data Entry Form Layout

    Looks great in Firefox 1.5 and terrible in IE6. Should I just do a browser check and then load the corresponding templates? i.e. templateFirefox.css and templateIE.css. Or is there a better way to handle this?

    Anonymous
    Anonymous's picture
    Guru

    Data Entry Form Layout

    Update

    Without the legend tags IE/Mac goes into an endless loop and freezes. :? :? :? :?

    Anonymous
    Anonymous's picture
    Guru

    Data Entry Form Layout

    tjforce wrote:
    Or is there a better way to handle this?
    Most likely the widths need tweaking. Look at the last attachment with the legend included. For some reason that makes a difference.

    tjforce
    Offline
    newbie
    Last seen: 15 years 5 weeks ago
    Joined: 2005-12-16
    Posts: 7
    Points: 0

    Data Entry Form Layout

    Thanks for the responses. I was wondering how you control the different columns? i.e.
    Column 1 Column 2
    Something inputbox Something1 inputbox
    Something2 inputbox
    Something3 inputbox Something4 inputbox

    Basically I want to leave something in Column 2 blank but have something in Column 1 with retaining the layout.

    Anonymous
    Anonymous's picture
    Guru

    Data Entry Form Layout

    Uh, I'm going to be honest here. I feel like I'm doing all the work...

    Add a width and height to the span and then put <span></span> in place of where you want the space.

    tjforce
    Offline
    newbie
    Last seen: 15 years 5 weeks ago
    Joined: 2005-12-16
    Posts: 7
    Points: 0

    Last One

    My intentions were not that at all. I am new to CSS as far as layouts are concerned and I am just trying to understand how to layout the page. Do you know of any good tutorials or books that would cover my problem? Thanks for all the help.

    Anonymous
    Anonymous's picture
    Guru

    Re: Last One

    tjforce wrote:
    Do you know of any good tutorials or books that would cover my problem? Thanks for all the help.
    Well, I think you're covered for now on this subject.

    I understand your being new to css but a little experimentation goes a LONG way. Smile You'll learn more from discovering something than by being told something.

    With the samples I've given you you can get rid of the border around the field set and change the widths. Get your hands dirty and mess around in there a bit. Smile

    Have you checked the final attachment? It shows how to skip a spot in the layout.