17 replies [Last post]
tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I have a form field.

Within that form field I have:
on line 1
textfield label then the textbox
on line 2
textfield label then the textbox
on line 3
textfield label then the textbox
on line 4
textfield label then the textbox

and so on

I would like all the text field labels to align left and all the textboxes to align right.

But other than making them in separate td's, I am not following how to align them in a class without attaching the class to each element.

I guess I'm asking if there is a cleaner way to do this?

Thanks! tg

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 9 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Why would you think you'd

Why would you think you'd need either tables OR extra classes?

Simply style the elements themselves. Float the labels left and the inputs right.

Verschwindende wrote:
  • CSS doesn't make pies

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

hey pineapple... I will

hey pineapple...

I will mockup an example using your suggestion and repost. I'm trying to accomplish it in the simplest manner possible and just didn't quite know how to do it when they are all contained within the same form.

Thanks.

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

and to do that...

I'd really have to remove the label from my text fields correct? Because I am treating the text titles separately from the actual text field...

(I say this because I tried to apply a text align class to the text titles and the whole element shifted (both the title and the field))

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

this doesn't work

I understand it's my code and not the theory that is wrong: (help!)

Address

Zip

City

State

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

There are several different

There are several different methods, this is what I use...

.form_field { clear: both; }
label { float: left; width: XXem; }
input { float: right; width: YYem; }

address:
some others will rely on text-alignment to handle the label, so ... label { text-align: left; display: block; clear:right;} input { float: right; }

address:

there will be other ways. kk5st has some examples on his website, http://garyblue.port5.com/webdev/form.html

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Thanks Chris!

I will devour your notes and see where I end up.

It's actually a much more complicated scenario then what I have presented - however - this example represents the basic element of it. And since once I build it I will exit the picture - I want it to be easy to understand for those who follow. So to me - it's very worth while to get feedback from those while obviously much more experience than I.

Thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 9 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Yep, your example HTML you

Yep, your example HTML you posted above was nested quite incorrectly. Have a read of the form elements available to you, and only add containers if you definitely need them.

Which you shouldn't Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

admittedly I'm having trouble...

#1 - Is it fair to separate the lines with breaks? Or is that cheating? (I really want to understand the CSS end - but the pressure of a deadline is giving me jumble brains)

I want the labels to be aligned left and the input fields aligned right. See diagram:

I have tried all three methods Chris presented - but the pulldowns would throw things off in one, or taking out the stuff I didn't need in Garys would screw things up...

Right now I'm just frustrated. The client currently uses tables for aligning all this information - I want to present them with something better - but am having trouble figuring it out.

I will continue trying to whip this beast. But any help is appreciated at this stage! I don't want to resort to tables to line things up if I can help it.

Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I think you must be

I think you must be approaching this from the wrong point of view.

First construct your HTML. Then style it to achieve the appearance you desire, adding any extra elements as required.

If you approach the form in that way, things should just fall into place. If your styles do anything that you feel may not easily be understood, comment it (example)

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

on a mini roll...

I'm gonna be up all night - but am atleast excited that I'm beginning to understant a bit...

I am authoring in dreamweaver and it doesn't look exactly like the code from you layout. So this brings upa question:

Is this code (as I've used it below) redundant? Is label for the same as name or input id?

SSN:

Dreamweaver uses ID, Type, and Name. The code in your example uses ID, Type, and Value.

Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

ID and name are redundant on

ID and name are redundant on input form controls. In xhtml, name is a required attribute of input, except for a couple of types

<!ENTITY % InputType
  "(text | password | checkbox |
    radio | submit | reset |
    file | hidden | image | button)"
   >

<!-- the name attribute is required for all but submit & reset -->

For all other elements, name is deprecated in favor of id. When submitting the form, it is the name that should be paired with the value. Both need to be used on form controls, as some browsers fail to create the proper hooks for name.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Thanks Gary for the

Thanks Gary for the explanation...

well, I'm gonna hit the sack and get a good 3 hours of sleep tonight.

I've made lots of progress - I think - learned about inline styles, sorting out various elements and how they behave through adding a colored background to them.

I've come up against an issue with inline styles based on the earlier example.

I can't close the gap between some labels and text input windows. I've tried everything.

Here is the image - I want to close the gaps between the labels Address and Address 2 and their respective windows.

my html is here:

Address
Address2
Zip
City
State
Years at Current Residence

Eventually I want to align the zip, city and state with these also - but figure I can fugure that out once I figure out what Im doing wrong with the addresses.

Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Try not to use in line

Try not to use in line styles. Your code quickly gets too messy and in many cases you'll be better off with classes or descendent style selectors. One change will affects many elements.

Since both address fields and zip, country, etc will all follow the same style, give there elements common style rules and get that working right.

Further to what Gary said (because I got confused reading it).

Form controls (e.g. input, textarea, select) need a "name" attribute to pass their values back to the server. The value of the name attribute is the variable name that the control value is bound to for sending back to the server.

Label elements (when they don't surround their form control) need to use the "for" attribute to tell the browser what element they are labelling. The "for" attribute, should properly by the "id" attribute on the form control.

For convenience I choose to make the "id" and "name" values the same. They don't need to be. The "for" attribute must be the same as the "id" attribute.

Back to your original problem. Are you using Firefox and web developer extension? If not do so (install it if necessary) it makes many web dev things much simpler and quicker. (e.g. you can use edit css to tinker with CSS and have the page altered immediately, then when everything is right, copy out the styles and paste them into your stylesheet).

In FF web dev, go to outline and select outline block level elements. Amongst other elements that will put an outline around the <div class="form_field"> elements. You'll then see the effects of the float left (on the label) and the float right (on the form control). The label is butted up against the left edge and the control against the right edge. To bring the label and the control closer together, either:
- alter the width of the form_field class,
- set a width on the label and float the form control left instead of right.
- give the form control a larger width - its right edge will stay in the same place, so therefore its left edge must move close to the address label.

Probably the second option is best as that way your form controls can have different widths and will left align.

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I will print this out and read it...

The only problem about not using inline styles is the fact I have a 10 page application. Of which my original example is 1 part of probably 25. (That is part - not page, my initial example is one small part of 1 page)

You can only imagine all the different size fields to do different things.

Am I wrong in thinking that if I don't use inline styles then I'll end up with a style sheet a mile long trying to accomodate every instance (since I'm not that experienced in CSS I tend to micro manage things - not only that - but am following a bit of a pre-set path that i have to match closely.)

I'm going to do this (a bit of a strategy):

1 - Let me continue on with the inline styles for the moment. For no other reason that I'm learning, leaps and bounds, about the way css behaves by doing it.

2 - Then I will go back and look at commonalites in my code.

3 - I will then post a few examples this afternoon for critiquing to try to get this beast under control

Your initial post made a lot more sense today after the work I've done, then it did yesterday. Bottom line is that I want to do right by my clients and I appreciate folks like you chiming in and helping me learn. I got my 3 hours of sleep, coffee in hand and really feel good about my progress (even if alot is inline for the moment!).

By the way - I have to make it work in IE6 (those are the specs) and the whole page has to fit within a 1024 width screen.

Thanks and I'll write back when I have more to show.

tg

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

to answer your question...

I'm using Firefox on my Apple, then I have a Dell box behind me to see results in IE on the PC. (Again - a PC Browser will be speced to clients for viewing within the institutions)

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 25 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I'm catching on - but have some basic questions...

I created some code here:
.infoStyle {
}

.infoStyle label {
width: 100px;
float:left;
clear:right;
background-color: #3366cc;
}

.infoStyle input.text{
float:right;
}

.infoStyle select{

}

If it weren't for the width statement - this code would cover many instances. But - stating width inline is a no-no. (This ties into my previous two comments.)

Now The above code with a 100 px width works beautifully in a large portion of the page because I have a large number of visually consistant fields that run down the right hand side of the page.

But applying infoStyle to this:


Housing Type
Rent

Payment


Paid
Monthly

...creates a funky jumbled mess (the housing label and field need to be on one line & the Payment Label and field and the Paid Label and field all need to share a line). I end up creating intricate em spaced fields which I don't think are the correct approach.

So - considering I have many special situations - how do you approach it with doing inline styles? Or am I wrong in thinking a 1500line style sheet is a bad thing? Or am I overthinking it altogether?

I'm close - I think I am just missing what strategy to employ in these special circumstances - which are numerous.

Thoughts or philosophys are appreciated. Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

First, back on what I said

First, back on what I said previously about "for" and "id" attributes. The "for" attribute tells the user agent (ie browser) which element the label belongs to. This is really useful for non-visual agents (e.g. screen readers) where there are no visual clues to assist in determing what labels belongs to what. Also with check boxes and radio buttons, if you click on the label the browser can alter the corresponding check box/radio button. So...

my label

When you have a large page with lots of different elements you do have to make a decision on the best place to locate styles. In your case, using a few common classes and setting inline widths of those elements that don't fit into the classes may be the most effective way of handling your page.

The general rule is use a style sheet and common classes/styles. Rules are guides only and can be broken where they aren't sensible.

Place those three elements in one container ... they'll naturally sit side by side (assuming the container is wide enough) then use width, margins, padding and/or floats to get everything spaced appropriately.