41 replies [Last post]
smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I'm having a challenge making my code short and clean. When I try to establish mulitiple layers of div colums and rows is it just best to use tables? The reason I ask - is if you take a look at my code below it looks pretty messy to me. But I'm not sure how I would shorten the markup and css using div layers and at the same time make it fluid? Please, any advice on how to clean this up and make it more efficient and fluid at the same time?

MAIN CONTAINER

/* Body */

html, body {
width: 100%;
max-height: 100%;
font-family: Geneva, Arial, Verdana, Sans Serif;
color: #333;
font-size: .87em;
padding: 0; margin: 0 auto;
background-color: #7F9DB9;
}
#main-container {
float: left;
width: 95%;
margin: 0 5px 5px 10px;
padding: 15px 10px 10px 10px;
border: 1px solid #8E94A0;
background: #EBF4FE;
overflow: hidden;
}

/*** FORM STYLES ***/

.form {
width: 90%;
background-color: #FBFAF1;
border: 1px solid #7F9DB9;
font-size: 85%;
cursor: pointer;
}
.form:hover {
background-color: #D0E5FC;
border: 1px solid #3C4F73;
cursor: pointer;
}
.shortform {
width: 55%;
background-color: #FBFAF1;
border: 1px solid #7F9DB9;
font-size: 85%;
cursor: pointer;
}
.shortform:hover {
background-color: #D0E5FC;
border: 1px solid #3C4F73;
cursor: pointer;
}
fieldset {
font: 0.8em Geneva, arial, sans-serif;
color: #666;
background-color: #efefef;
padding: 2px;
border: solid 1px #d3d3d3;
height: 100%;
width: auto;
}
legend {
color: #333;
font-weight: bold;
font-variant: small-caps;
background-color: #d3d3d3;
padding: 3px 7px;
margin-bottom: 8px;
}

/*** END FORM STYLES ***/

a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;
cursor: hand;
}

a:hover {
text-decoration: underline;
cursor: hand;
}
/* HEADER STYLES*/

h1, h2, h3, h4, h5, h6 {
font-family: Geneva, Arial, sans-serif;
margin: 0px;
padding: 0px;
}

h1 {
font-family: Verdana,Arial,sans-serif;
font-size: 1.2em;
color: #334d55;
}

h2 {
font-size: 1.1em;
color: #006699;
}

ul {
list-style-type: circle;
}

ul ul{
list-style-type: disc;
}

ul {
list-style-type: none;
}

label {
font: bold 100% Geneva, Arial,sans-serif;
color: #333;
width: 95%;
}

/************** feature styles ***************/

.feature {
border: 1px solid #B7D1E4;
font-size: .9em;
padding: 5px;
margin: 0;
height: 100%;
display: block;
float: left;
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#F1F6FB', gradientType='0');
background: #FFF;
}
.feature2 {
border: 1px solid #B7D1E4;
background: #FFF;
font-size: 100%;
padding: 1px;
margin: 0;
height: 100%;
}

/*** ROW & LABELS ***/
div.spacer {
clear: both;
height: 5px;
}

div.float {
float: left;
}

div.float p {
text-align: left;
}

div.row {
content: ".";
clear: both;
padding-top: 2px;
margin: 0 auto;
}

div.row span.label {
float: left;
width: 90px;
text-align: right;
margin: 0 auto;
padding: 0 auto;
}
div.row span.label-2 {
float: left;
width: 58%;
text-align: right;
margin: 0 auto;
padding: 0 auto;
}
.rightlabel {
float: right;
width: 130px;
text-align: left;
margin: 0 3px 0 0;
}
div.row span.formw {
float: right;
width: 130px;
text-align: left;
margin: 0 3px 0 0;
}
div.row span.shortformw {
float: right;
width: 35%;
text-align: left;
margin: 0 3px 0 0;
}
div.row span.radiobutton {
width: 18%;
text-align: left;
}
div.row span.left {
float: left;
text-align: left;
font-weight: bold;
width: 49%;
}

div.row span.right {
float: right;
text-align: right;
font-weight: bold;
width: 49%;
}
/************* TABS MENU BAR STYLES *************/

#tabsmenu {
float: left;
width: 96.93%;
font-size: 97%;
margin: 10px 0px 0 11px;
padding: 0;
}
#tabsmenu ul {
float: left;
list-style-type: none;
margin: 0; padding: 0;
}

#tabsmenu li {
float: left;
margin: -1px; padding: 0;
}

#tabsmenu li a {
float: left;
background: url(images/left-tab.gif) no-repeat 0 2px;
margin: 0;
padding: 0 0 0 10px;
text-decoration: none;
}

#tabsmenu a span {
float: left;
display: block;
background: url(images/right-tab.gif) no-repeat 100% 2px;
padding: 6px 14px 3px 5px;
font-weight: normal;
color: #333;
margin: 0;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsmenu a span {
float: none;
}
/* End IE5-Mac hack */

#tabsmenu #current a {
background: url(images/left-tab-hover.gif) no-repeat top left;
}

#tabsmenu #current a span {
background: url(images/right-tab-hover.gif) no-repeat top right;
color: #000;
font-weight: bold;
}

#tabsmenu a:hover {
background: url(images/left-tab-hover.gif) no-repeat 0 2px;
}

#tabsmenu a:hover span {
background: url(images/right-tab-hover.gif) no-repeat 100% 2px;
color: #000;
}
#tabborder { height:2px; background: url(images/nav-border.gif) repeat x;
}

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

Customer Information Customer

Name Patricia F Stanley
DBA
Mailing Address PO Box 15
Bend, OR 97702
Phone/Fax (541) 389-5551 (Home)

Email
Social Security
Drivers License
Employer

Customer Type Residential unnamed2
Default Area unnamed 1
Summary Bill ID 382439
Williams Construction



Account Agreement Information Account 27542-3

Description
Account Agreement Overrides
DBA
Mailing Address 528 Sneezy Str
Bend, OR 97702

Preferred Due Date
Overide Bill Cycle 00
Annual Bill Periods 12
Extra Bill Copies
Late Charge Exempt No Yes

Customer Type Residential unnamed2
Default Area unnamed 1
Summary Bill ID 382439
Williams Construction

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 11 years 23 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

You are using your CSS like

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Stop using spans and divs to

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.

Verschwindende wrote:
  • CSS doesn't make pies

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

please explain forms

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. Smile

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 11 years 23 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

You should remove the

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

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

There is none...

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

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

smk2007 wrote:Do you mean

smk2007 wrote:
Do you mean set all my css as universal form code? (i.e. fieldset, labels, ect)

Yes.

Quote:
essentially each row and column is suppose to be a separate section?

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

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

Verschwindende wrote:
  • CSS doesn't make pies

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 11 years 23 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

You shouldn't listen to me.

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

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

No worries...

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)?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Give me a couple more

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

Verschwindende wrote:
  • CSS doesn't make pies

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 11 years 23 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

thepineapplehead wrote:Give

thepineapplehead wrote:
Give me a couple more minutes, I'm converting yours to a CSS-based layout Laughing out loud

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Trust me, it's gonna be

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

Verschwindende wrote:
  • CSS doesn't make pies

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

thanks...

I'm standing by. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

While your waiting for TPH

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

TPH wrote:The design and

TPH wrote:
The design and layout of the original form is superb,

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 Smile but it does look good.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I'm aware of the HCI

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

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Smk2007 I've noticed before

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 Wink ) I hope that you will pop back to Sitepoint and close that thread off before someone wastes their time replying to it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Hugo wrote:If TPH provides a

Hugo wrote:
If TPH provides a solution (although I do hope he doesn't do all your work for you Wink )

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

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

thepineapplehead wrote:I'm

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

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

thanks...

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

It's not like saying you can

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Sitepoint...

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

It's more commonly called

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

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not saying for one minute

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Very well...

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I'm still working on the

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

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

God you're slow Smk2007

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Wow...

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Hugo wrote:God you're slow

Hugo wrote:
God you're slow

He was referring to me Laughing out loud

Quote:
TPH posted that he was speedy gonzalas and king of forms

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


Name

DBA

Mailing Address
PO Box 15 Bend, OR 97702

Phone/Fax


Email

Social Security

Drivers License

Employer


Customer Type

Residential
unnamed2

Default Area

Residential
unnamed2

Summary Bill ID
382439 - Williams Construction

Enjoy!

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Linkies: http://www.usabilit

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Hugo - I'm sorry

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

smk2007 wrote:I was half

smk2007 wrote:
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.

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 Smile

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

Lets now rip apart his layout Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

taxing code...

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. Sad

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

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks...

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

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 11 years 23 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Geesh, this thread is more

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

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

No comment...

No comments on the intesity. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Two and a half hours from

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

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

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yeah but a little faster

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

smk2007 wrote:Thanks to all,

smk2007 wrote:
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. Sad

Thank you very much thepineapplehead for your time. The code looks awesome. Smile 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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Here you go, all done and

Here you go, all done and dusted Laughing out loud

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;
}

Customer Information


Name

DBA

Mailing Address
PO Box 15 Bend, OR 97702

Phone/Fax


Email

Social Security

Drivers License

Employer


Customer Type

Residential
unnamed2

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



Preferred Due Date

Override Bill Cycle

00

Annual Bill Periods

12

Extra Bill Copies

Late Charge Exempt?

yes

no


Customer Type

Residential
unnamed2

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 9 years 2 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks...

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

The labels are floated left,

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies