Sorry for the OT-ish question, but I'd guess that most people have come across
this and I'm just trying to learn CSS. I'm trying to force a <s:form> to
display as two columns, labels to the left and input fields to the right.
Google gave me this;
.wwgrp br {display: none;}
.wwlbl {
float: left;
clear: both;
}
.wwctrl {
float: right;
}
which works fine.
Until I want to add further formatting to sub-fields. I want to try and make
the contents of the telephone class appear as four fields in a single line.
Following advice I've found in other tutorials, my first objective is to use
the selector I'm working with to set the background color to red to show that
I've got the selector correct. However, adding;
.telephone {
background-color: red;
}
doesn't select the div. If I remove the .wwctrl { float: right;} then the div
is selected but the spacing goes awry. Can someone point me either to a
relevant tutorial, or if they have a complex css_xhtml themed form that they
can give me the URL so I can look at the css I would be grateful.
A subset of the jsp is as follows
<s:form action="homeInsurance1" method="post" theme="css_xhtml">
<div id="correspondanceAddress">
<s:textfield
key="label.homeInsurance.insuredAddressLine1"
name="corrAddressLine1"/>
<s:textfield
key="label.homeInsurance.insuredAddressLine2"
name="corrAddressLine2"/>
<s:textfield
key="label.homeInsurance.insuredAddressLine3"
name="corrAddressLine3"/>
<s:textfield
key="label.homeInsurance.insuredAddressLine4"
name="corrAddressLine4"/>
</div>
<div id="telephones" class="telephone">
<s:textfield key="label.home.number"
name="homeTelephone"/>
<s:textfield key="label.work.number"
name="workTelephone"/>
<s:textfield key="label.mobile.number"
name="mobileTelephone"/>
<s:textfield key="label.fax.number" name="faxNumber"/>
</div>
</s:form>
which generates html as follows;
<form id="homeInsurance1" name="homeInsurance1" onsubmit="return true;"
action="/Trevor/homeInsurance1.action" method="post">
<div id="correspondanceAddress">
<div id="wwgrp_homeInsurance1_corrAddressLine1"
class="wwgrp">
<div id="wwlbl_homeInsurance1_corrAddressLine1" class="wwlbl">
<label for="homeInsurance1_corrAddressLine1" class="label"> Street Name
and Number:
</label></div> <br /><div id="wwctrl_homeInsurance1_corrAddressLine1"
class="wwctrl">
<input type="text" name="corrAddressLine1" value=""
id="homeInsurance1_corrAddressLine1"/></div> </div>
<div id="wwgrp_homeInsurance1_corrAddressLine2"
class="wwgrp">
<div id="wwlbl_homeInsurance1_corrAddressLine2" class="wwlbl">
<label for="homeInsurance1_corrAddressLine2" class="label"> Building
Name, Floor, Flat Number (if any):
</label></div> <br /><div id="wwctrl_homeInsurance1_corrAddressLine2"
class="wwctrl">
<input type="text" name="corrAddressLine2" value=""
id="homeInsurance1_corrAddressLine2"/></div> </div>
<div id="wwgrp_homeInsurance1_corrAddressLine3"
class="wwgrp">
<div id="wwlbl_homeInsurance1_corrAddressLine3" class="wwlbl">
<label for="homeInsurance1_corrAddressLine3" class="label"> Postal
Code:
</label></div> <br /><div id="wwctrl_homeInsurance1_corrAddressLine3"
class="wwctrl">
<input type="text" name="corrAddressLine3" value=""
id="homeInsurance1_corrAddressLine3"/></div> </div>
<div id="wwgrp_homeInsurance1_corrAddressLine4"
class="wwgrp">
<div id="wwlbl_homeInsurance1_corrAddressLine4" class="wwlbl">
<label for="homeInsurance1_corrAddressLine4" class="label"> Locality:
</label></div> <br /><div id="wwctrl_homeInsurance1_corrAddressLine4"
class="wwctrl">
<input type="text" name="corrAddressLine4" value=""
id="homeInsurance1_corrAddressLine4"/></div> </div>
</div>
<div id="telephones" class="telephone">
<div id="wwgrp_homeInsurance1_homeTelephone"
class="wwgrp">
<div id="wwlbl_homeInsurance1_homeTelephone" class="wwlbl">
<label for="homeInsurance1_homeTelephone" class="label"> Home:
</label></div> <br /><div id="wwctrl_homeInsurance1_homeTelephone"
class="wwctrl">
<input type="text" name="homeTelephone" value=""
id="homeInsurance1_homeTelephone"/></div> </div>
<div id="wwgrp_homeInsurance1_workTelephone"
class="wwgrp">
<div id="wwlbl_homeInsurance1_workTelephone" class="wwlbl">
<label for="homeInsurance1_workTelephone" class="label"> Work:
</label></div> <br /><div id="wwctrl_homeInsurance1_workTelephone"
class="wwctrl">
<input type="text" name="workTelephone" value=""
id="homeInsurance1_workTelephone"/></div> </div>
<div id="wwgrp_homeInsurance1_mobileTelephone"
class="wwgrp">
<div id="wwlbl_homeInsurance1_mobileTelephone" class="wwlbl">
<label for="homeInsurance1_mobileTelephone" class="label"> Mobile:
</label></div> <br /><div id="wwctrl_homeInsurance1_mobileTelephone"
class="wwctrl">
<input type="text" name="mobileTelephone" value=""
id="homeInsurance1_mobileTelephone"/></div> </div>
<div id="wwgrp_homeInsurance1_faxNumber" class="wwgrp">
<div id="wwlbl_homeInsurance1_faxNumber" class="wwlbl">
<label for="homeInsurance1_faxNumber" class="label"> Fax:
</label></div> <br /><div id="wwctrl_homeInsurance1_faxNumber" class="wwctrl">
<input type="text" name="faxNumber" value=""
id="homeInsurance1_faxNumber"/></div> </div>
</div>
</form>
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
