[Solved] Cleaning up mulitiple div layers with fluid design

You are using your CSS like it's a substitute for TABLES, however, many people on here would agree with me when I say that you can't bring the mindset of a TABLE layout into a CSS layout. Tables are done in terms of columns and rows, but CSS is more dynamic than that. You are not limited to making rows and columns so get out of that mindset. I see CSS as something more fluid than tables. Done correctly, you can position your content anywhere on the page. No need to worry about dividing the page into nice little squares that you would have to do with tables.

Using a Table is almost like using an Excel spreadsheet, you are limited to each little cell. Using CSS is like using Photoshop. If you understand all the rules, you can create anything.

The one thing that I noticed on your CSS is that you have a whole section dedicated to

/*** ROW & LABELS ***/

which I think is highly unnecessary, especially for things like spacers and rows. You put those spacing rules directly into your DIV and CLASS. The rest of your code looks like they are styling preferences, which is fine. If you are really into styling every single aspect of your website, then you can do that. You can save space by combining things that have similar rules.

Stop using spans and divs to layout a form, that's not what they're for. There are loads of form tags you should use instead.

Ignore the colors and layout for a moment.

Mark up your form inputs with structural semantic mark up, THEN start styling it.

Do you mean set all my css as universal form code? (i.e. fieldset, labels, ect) Or am I missing something? How exactly would I get something like this to view properly aligned but using separate tags because essentially each row and column is suppose to be a separate section? Make sense?

Can someone please show a real simple sample code? I learn easier by seeing.

Thanks for your help. It is much appreciated.

You should remove the personal information you have in there. LoL.

There is no personal info -- this is just a mock-up.

Now back to appropriate coding? I could be forever trying to figure out what you guys are talking about but a short sample will go a very long ways...

Yes.

That's what the <fieldset> tag is for.

Give me a minute, I'll whip up a bit of HTML code to show you.

You shouldn't listen to me. Most of the time I am talking out of my arse.

But here are good examples of additional markup you can use.

css:

http://www.cssplay.co.uk/menu/formcss/cssplay.css

here is the result:

http://www.cssplay.co.uk/menu/form.html

This sample http://www.cssplay.co.uk/menu/form.html looks really good to use. But what would be the best way to get all 3 fieldsets aligned horizontally (all next to one another)?

Give me a couple more minutes, I'm converting yours to a CSS-based layout

Work faster!!! We are impatient!!! Hahaha...

Trust me, it's gonna be great. The design and layout of the original form is superb, it's just badly constructed.

I'm standing by.

While your waiting for TPH to whip up that example, it's worth mentioning that it's important with something like forms to put a fair bit of study into how one constructs them properly along semantic accessible guidelines and with respect your example couldn't be further removed from that you must use the appropriate form elements and controls and not try and re-create a table layout using divs and spans, by all means use a table if that is easiest but you must still use the correct form elements within it and also you have to pay far more particular attention to accessibility.

I would urge you to have a read of a few good guides on constructing forms and that does not necessarily mean the experimental offerings found on CSSplay but a straightforward guide on semantic use of form controls.

Hugo.

Yes but be careful, forms have a distinct function they are required to be functional and accessible and to follow HCI guidelines, forms are not first and foremost meant to look pretty they must function correctly first and be usable, not confuse users expectations etc then one can look at the prettiness of them but it does look good.

I'm aware of the HCI implications and ramifications that go with designing a form I'm quickly converting it, then styling it, then maybe rearranging it a bit.

Smk2007 I've noticed before that you always run these threads across multiple forums and that you have once more with this one , this is bad practise and you should avoid doing it please.

If TPH provides a solution (although I do hope he doesn't do all your work for you ) I hope that you will pop back to Sitepoint and close that thread off before someone wastes their time replying to it.

Hugo.

After racking my brains today to create an ASP booking form, this is a doddle and a nice challenge, too.

Wasn't implying that you didn't TPH just that I have come across designers that didn't understand and just thought that it should bend to their idea of what looked right in their natty design.

I certainly don't expect one to do all the work for me. Multiple forms - there are only two forums I use and how else does one ask the same question worded differently? I've never done this type of layout (with several forms) without using tables and I'm honestly trying to resolve the code to be most efficient.

But if you are saying only stick to one forum? Well I guess it would be this one... But why? Is that a law? That to me is like saying you can only go to one grocery store? Can you explain why this is so wrong?

It's not like saying you can only go to one grocery, it's like saying you should only go to one grocery store at a time.

What if some poor sap on Sitepoint is doing the same amount of work as me? One of us will get mighty cheesed off

I very seldom get a response from sitepoint in a timely manner. All that is to say - maybe I should just quit using it! If you and everyone else can HONESTLY say this is wrong. I hadn't thought of it that way before -but I'll take heed to your concerns.

It's more commonly called "cross-posting" and many forums frown upon it.

Not saying for one minute that you shouldn't use sitepoint and some of the responses you get there are top notch and Paul O'B has replied to your posts in the past and they don't get much better than him.

It is wrong to post the same thread to multiple forums there is a code of netiquette to follow http://catb.org/~esr/faqs/smart-questions.html
which is considered as a RFC on the subject.

I've closed my other comment on Sitepoint - as best as I know how.

I understand your initial concerns but what presents more than one person trying to resolve the same problem within the same forum? Not the same?

Now all said and done - I feel as though my initial question has been put under.

Just please post a link to some reading material about form and HCI guidelines.

I'm still working on the conversion, it's almost complete

God you're slow

Smk2007 people on the same forum are not a matter they can see what is happening for instance I was taking a look at your code when TPH posted that he was speedy gonzalas and king of forms so I let him get on with it, but if we were on separate forums we would both be working on it to wasted effort, nice for you , but as I'm sure you can see a bit unfair on other people that may need help

I was half joking about that comment "people on the same forum" -- sorry for the comment. I don't take bashing well. So please, if at all possible could you please refrain from name calling. I didn't think that was necessary.

He was referring to me

Done. I've not done it all, and I deleted the menu at the top as the floats were intefering, and now it's time for dinner.

Afterwards I'll finish up and do the menu, but here it is:

MAIN CONTAINER

/* My Styles */

body {
font-family: Geneva, Arial, Verdana, Sans Serif;
color: #333;
font-size: 0.9em;
padding: 0; margin: 0 auto;
background-color: #7F9DB9;
}

form {
width: 95%;
margin: 1em auto;
padding: 1em;
background: #EBF4FE;
font-size: 0.8em;
}

div {width: 28%; float: left;}

label {
width: 95px;
float: left;
clear: left;
text-align: right;
font-weight: normal;
font-weight: bold;
color: #333;
}

input, select, textarea {
width: 140px;
margin-left: 10px;
margin-bottom: 0.5em;
background-color: #FBFAF1;
border: 1px solid #7F9DB9;
font-size: 0.9em;
}

input:hover, input:focus, select:hover, select:focus {
background-color: #D0E5FC;
border: 1px solid #3C4F73;
}

input.disabled, textarea.disabled {
background: transparent;
border: none;
color: #000;
}

fieldset {
border: 1px solid #B7D1E4;
padding: 5px;
background: #FFF;
color: #666;
padding: 2px;
height: 100%;
}

legend {
background: #fff;
border: 1px solid #B7D1E4;
font-weight: bold;
display: block;
padding: 0.4em;
margin: 0.6em;
color: #069;
}

textarea {
font-family: Geneva, Arial, Verdana, Sans Serif;
font-size: 1em;
}

Customer Information

DBA

Mailing Address
PO Box 15 Bend, OR 97702

Phone/Fax

Social Security

Drivers License

Employer

Default Area

Residential
unnamed2

Summary Bill ID
382439 - Williams Construction

Enjoy!

Linkies:

http://www.usability.com.au/resources/forms.cfm

http://www.htmldog.com/guides/htmladvanced/forms/

http://alistapart.com/articles/prettyaccessibleforms

http://www.webcollab.com/publications/gir97/

There are more

Hugo - my apologies to you. I misunderstood the context, obviously.

ROFL I wasn't referring to you, although I didn't, I admit, make a clearer enough distinction.

It doesn't pay to be too touchy though. I don't descend to name calling I'm supposed to be a moderator and not do that sort of thing

But where TPH is concerned it's open season and name calling is part of the fun

Lets now rip apart his layout

Thanks to all, sorry if I seem touchy. I've been working this code now for a few weeks only to find out it wasn't efficient. Reading helps, but samples help first then following the instruction. All that is to say - I learn best backwords.

Thank you very much thepineapplehead for your time. The code looks awesome. It will definately help me get started!

This (the posted links above) will also be very helpful. I'll be sure to follow up with the reading.

Geesh, this thread is more intense than a knife fight between two monkeys.

No comments on the intesity.

Two and a half hours from original topic to complete CSS-rebuild, that's got to be a record

And just because I'm feeling generous (eg. I'm bored), I'll finish off the layout for you.

Yeah but a little faster this time TPH and complete re-build ? tested in ? I'm winding you up!

Thank you very much thepineapplehead for your time. The code looks awesome. It will definately help me get started!

With my serious hat on now:

Generally no one learns best backwards, you have worked the code for two weeks only in essence to start again that is not productive time, don't assume to know how best to proceed, check first, and a day or even a couple spent reading a few guides on semantic forms would have got you on the right track from the off, learning from examples can work but tend to mean that you restrict yourself to one view of a problem or take on things, better to always check what info is available around the net on a subject such as forms layout and controls there is far more too them than people at first realise the same goes for well constructed tables.

Hugo.

Here you go, all done and dusted

MAIN CONTAINER

/* My Styles */

body {
font-family: Geneva, Arial, Verdana, Sans Serif;
font-size: 0.9em;
padding: 0; margin: 0 auto;
background-color: #7F9DB9;
color: #333;
}

form {
width: 95%;
margin: 0 auto;
margin-top: -1px;
padding: 1em;
background: #EBF4FE;
border: 1px solid #369;
font-size: 0.8em;
}

div {width: 28%; float: left;}

label {
width: 95px;
float: left;
clear: left;
text-align: right;
font-weight: normal;
font-weight: bold;
}

input, select, textarea {
width: 140px;
margin-left: 10px;
margin-bottom: 0.5em;
background-color: #FBFAF1;
border: 1px solid #7F9DB9;
font-size: 0.9em;
}

input:hover, input:focus, select:hover, select:focus {
background-color: #D0E5FC;
border: 1px solid #3C4F73;
}

input.disabled, textarea.disabled {
background: transparent;
border: none;
color: #000;
}

fieldset {
border: 1px solid #B7D1E4;
padding: 5px;
background: #FFF;
padding: 2px;
height: 100%;
}

legend {
background: #fff;
border: 1px solid #B7D1E4;
font-weight: bold;
display: block;
padding: 0.4em;
margin: 0.6em;
color: #069;
}

textarea {
font-family: Geneva, Arial, Verdana, Sans Serif;
font-size: 1em;
}

div.small label {width: 150px;}
div.small input, div.small select {width: 50px;}

fieldset fieldset legend {
color: #000;
font-size: 0.9em;
font-weight: normal;
}

ul#nav, ul#nav li {
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
}

ul#nav { margin: 1em 1em 0 2em; font-size: 1em;}

ul#nav li {
float: left;
margin: 0 0.2em;
border: 1px solid #369;
border-bottom: none;
}

ul#nav li#current {background-color: #ebf4fe; font-weight: bold;}

ul#nav a, ul#nav a:link, ul#nav a:visited, ul#nav a:hover, ul#nav a:active {
color: #000;
display: block;
text-decoration: none;
padding: 0.2em 0.4em;
}

ul#nav a:hover {
background-color: #ebf4fe;
text-decoration: none;
}

• General Information
• Ledger Information
• Premises
• Services
• Features

Customer Information

DBA

Mailing Address
PO Box 15 Bend, OR 97702

Phone/Fax

Social Security

Drivers License

Employer

Default Area

Residential
unnamed2

Summary Bill ID
382439 - Williams Construction

Account Agreement Information

Description

Account Agreement Overrides

DBA

Mailing Address
528 Sneezy Str, Bend, OR 97702

Override Bill Cycle

00

Annual Bill Periods

12

Extra Bill Copies

Late Charge Exempt?

yes

no

Default Area

Residential
unnamed2

Summary Bill ID
382439 - Williams Construction

No idea if it works in IE, frankly I don't care.

You may want to tweak the sizes to suit your needs, but there you are fella, well and truly rebuilt.

Good fun

Thanks but you didn't have to do all that. The one sample was enough. I think I will have to play with the input text a bit. When you place this file into a frame (it being the main content) the form fields get dumped under the labels. But I will work with it.

Thanks again for all your time.

The labels are floated left, they have a width of (iirc) 95px and the inputs have a width of about 130px, that's probably what you'll need to play around with