PDA

Click to See Complete Forum and Search --> : Form layout

kproc
03-13-2006, 09:02 PM
Hi

I created a form and I'm having a hard time with formating it

I want some of the text objects to be one size and other to be another size.

I can't get the text objects to aligh to the right and the labels to align to the left

any help is great, thank you

here is my code



body {

font-size: 12px;
background-color: #99CC99;
color: #FFFFCC;
font-weight: 700;
}

form {
position:absolute;
margin-left: 0;

}
label, input{
display:block;
width:75px;
float:right;
margin:4px 1px;
font-size: 12px;
}
label,text {

display:block;
align: right;
width: 175px;

margin:4px 1px;
font-size: 12px;
color: #FFFFCC;
Kravvitz
03-13-2006, 09:18 PM
There is no <text> element.

Please show us your X/HTML.

You should be aware that Netscape versions after 6.0 and before 7.1 do not display <label> elements correctly when certain common CSS properties are applied to them. This includes display:block, float:left, and float:right. I assume this applies to other browsers that use the equivalent versions of the Mozilla Gecko Engine. So in order to be nice to them I suggest applying the CSS properties to a <div> or a <span>, depending on your form's structure, to avoid this bug.
kproc
03-13-2006, 09:36 PM
here is a link to the page, its a mess

http://www.tomorrownextweek.com/loanMortgageCal.php
Kravvitz
03-13-2006, 09:42 PM
Please fix your HTML errors. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.tomorrownextweek.com%2FloanMortgageCal.php)
kproc
03-13-2006, 10:15 PM
Thank you for the post and link I have booked marked it and will check the rest of my pages

I have made the corrections,

ANy help with my CSS issue is great
kproc
03-13-2006, 10:44 PM
HI,

I have the formating close. Notice I have the form broken into three sections. I want the section "Amortization Years, Months," Term Months Years" on the same row

any thoughts
axellut
03-13-2006, 10:51 PM
just google it and buy one there not that much I have all my developers do it

Axell

Net World
kproc
03-13-2006, 10:54 PM
axellut, don't understand what your saying
Kravvitz
03-13-2006, 11:06 PM
I think he is suggesting you buy a template.

I have the formating close. Notice I have the form broken into three sections. I want the section "Amortization Years, Months," Term Months Years" on the same row
Same row as what?
kproc
03-13-2006, 11:09 PM
Buying a template is no fun

Notice the middle section

Its formated as

Term
Years(text area)
Months(text area)

Amort
Years (text area)
Months(text area)

I want it to be

Term Years(text area) Months(text area)

Amort Years (text area) Months(text area)
Kravvitz
03-13-2006, 11:12 PM
Float them left. You may need to apply classes to them.
kproc
03-13-2006, 11:14 PM
how do you apply classes to them
Kravvitz
03-13-2006, 11:30 PM
http://www.w3.org/TR/REC-CSS2/selector.html#class-html

Note: p.class1.class2 does not work right in IE6.
kproc
03-13-2006, 11:42 PM
can you apply class to <fieldset>.

If not how would i change the setting for all info between "fieldset" tags
Kravvitz
03-13-2006, 11:45 PM
You can apply a class to almost any element. The few exceptions include <html>, <head>, and any of the elements allowed inside <head>.
kproc
03-13-2006, 11:53 PM
Okay,

My understanding is that is it works like this

Am I doing something wwrong as I tried the below and it not applying the setting to the specific region

<fieldset class="Test">

stuff..........

</fieldset>

CSS

fieldset.test {
Fontsize: 18px;
}
Kravvitz
03-14-2006, 12:00 AM
Class names are case-sensitive.

Fontsize is not the same as font-size.
kproc
03-14-2006, 07:59 AM
HI

Below is what I have and its doing nothing. I changed the CSS name to label,input.text and it changed the layout of the entire document.
I tried using css with fieldset up no luck there either. This is a bad case of I don't know what I'm doing

Thank you for your help



<fieldset>
<div>
<label>Term</label>
<Label>Years</Label>
<input type="text" Class ="test" Name="termY">

<Label>Months</Label>
<input type="text" Class ="test" Name="termM" >
</div>

<div>
<label>Amort</label>
<Label>Years</Label>
<input type="text" Class ="test" Name="amortY" >

<Label>Months</Label>
<input type="text" Class ="test" Name="amortM">
</div>

</fieldset>


css


}

label.test {

display:block;
width:100px;
float:left;
margin:4px 1px;
font-size: 12px;
}
kproc
03-14-2006, 08:13 AM
Getting closer I needed a # infront of the
label,input.test

Now I gust need to get the input boxes to move left
Kravvitz
03-14-2006, 03:41 PM
Why? I don't see id="label" on that page.

Try decreasing the width of the <label>s.