alexgreen
asked on
Tables to Divs conversion
Hands up who hates tables in the wrong context??
ok, we all know that tables shouldn't be used for layout.
so.....
can anyone help me change the code here so that it doesn't use tables and uses divs or other css based positioning techniques, i'm a little stuck where to start and it was in a table to begin with so i'm just trying to improve it.
I'm talking about all the stuff in div id="box3-3" the general page positioning works great with the css i have (can post if necessary.)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>...::|::... Compensation 4 Crime ...::|::... </title>
<meta content="Alex Green" name="Author" />
<meta content="ALL" name="ROBOTS" />
<meta content="Compensation 4 Crime is the only Criminal Injuries Compensation specialist dedicated solely to the pursuit of compensating victims of violent crimes or their relatives." name="description" />
<meta name="keywords" content="criminal, criminal injuries, compensation, claims, blame, solicitors, lawyers, law, claim, government" />
<meta content="site designed and scripted by alex green http://www.alexgreen.co.uk based on original JS & css by dug falby http://www.pumpernickle.net" name="generator" />
<!-- version sniff and optional api elements -->
<script src=" scripts/sniff.js" type="text/javascript" language="Javascript"></sc
<!-- CSS1 declarations -->
<link rel="stylesheet" type="text/css" media="screen" title="" href=" styles/css1_all.css" />
<!-- CSS2 position bits and bobs ie mac gets different version -->
<script type="text/javascript" language="Javascript">
// <![CDATA[
if(isIE5mac) {document.write('<style type="text/css" media="screen">@import url( styles/css2_iemac.css);\</
// ]]>
</script>
</head>
<body>
<div id="gridgroup1">
<div id="box1-3">
<br /><p></p><br />
<p class="navchunk"></p><h4>C
<br />
<br />
<br />
</div>
</div>
<div id="gridgroup2">
<div id="box2-3">
<p class="navsection">navigat
<p class="bulletlist"><span class="r"><a href=" index.htm">home</a> </span> <br />
<span class="r"><a href=" government.htm">government
<span class="r"><a href=" about.htm">about us</a> </span> <br />
<span class="r"><a href=" sample.htm">sample awards</a> </span> <br /> </p>
<p></p>
<p class="navsection">apply</
<p class="bulletlist"><span class="o"><a href=" criminjadult.htm">criminal
<span class="o"><a href=" criminjchild.htm">criminal
<span class="o"><a href=" childabuse.htm">child abuse</a> </span> <br />
<span class="o"><a href=" sexabuse.htm">sexual abuse</a> </span> <br />
<span class="o"><a href=" domesticviolence.htm">dome
<span class="o"><a href=" fatalinj.htm">fatal injuries</a> </span> <br /> </p>
<p class="navsection"> <
<p class="bulletlist"><span class="g"><a href=" other.htm">other legal services</a> </span> <br />
<span class="g"><a href=" contact.htm">contact us</a> </span> <br /></p>
</div>
<div id="box3-3" class="gridrule">
<br /> <div class="maintext">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td width="1%">
</td>
<td width="99%">
<h1>
Domestic Violence Questionnaire:
</h1>
<br />
<br />
<br />
<form method="post" action="http:// " name="Criminal-Injuries-Ch
<input type="hidden" name="recipient" id="recipient" value=" " />
<input type="hidden" name="subject" id="subject" value="Criminal Injuries - Children Report" />
<input type="hidden" name="redirect" value=" confirm.html" id="Hidden1" />
<input type="hidden" name="required" id="required" value="Victim_Name,Submitt
<table width="100%">
<tr>
<td>
<p class="maintext"> Your Name: *</p>
</td>
<td>
<input class="maintext" type="text" id="Submitted_Name" name="Submitted_Name" maxlength="30" />
</td>
</tr>
<tr>
<td>
<p class="maintext"> Address: *</p>
</td>
<td>
<textarea class="maintext" rows="6" cols="20" id="Submitted_Address" name="Submitted_Address"><
</td>
</tr>
<tr>
<td>
<p class="maintext">Telephone
</td>
<td>
<p class="maintext">Home/Mobi
</td>
</tr>
<tr>
<td>
<p class="maintext">Date of Birth: *(dd/mm/yyyy)</p>
</td>
<td>
<input class="maintext" type="text" id="Submitted_DOB" name="Submitted_DOB" maxlength="10" />
</td>
</tr>
<tr>
<td>
<p class="maintext">National insurance number: (if available / known) *</p>
</td>
<td>
<input type="text" class="maintext" id="Submitted_NI_No" name="Submitted_NI_No" value="(Leave if not available / known)" />
</td>
</tr>
<tr>
<td>
<p class="maintext">Date of incident(s): *(dd/mm/yyyy)</p>
</td>
<td>
<input class="maintext" type="text" id="Date_of_Incident" name="Date_of_Incident" />
</td>
</tr>
<tr>
<td>
<p class="maintext">Location of incident(s): *</p>
</td>
<td>
<input class="maintext" type="text" id="Incident_Location" name="Incident_Location" />
</td>
</tr>
<tr>
<td>
<p class="maintext"> Brief details of incident(s): *</p>
</td>
<td>
<textarea class="maintext" rows="6" cols="20" id="Incident_Description" name="Incident_Description
</td>
</tr>
<tr>
<td>
<p class="maintext"> Your relationship to the offender: *</p>
</td>
<td>
<input class="maintext" type="text" id="relationship" name="relationship" />
</td>
</tr>
<tr>
<td>
<p class="maintext"> Are you still living with the offender? *</p>
</td>
<td>
<p class="maintext"> <input type="radio" id="Yes_living_with_offend
Yes <input type="radio" id="Not_living_with_offend
No</p>
</td>
</tr>
<tr>
<td>
<p class="maintext"> Did you fully co-operate with the police? *</p>
</td>
<td>
<p class="maintext"><input type="radio" id="Yes_co-operate_with_po
Yes <input type="radio" id="Did_not_co-operate_wit
No</p>
</td>
</tr>
<tr>
<td>
<p class="maintext"> Did the police pursue a criminal investigation? *</p>
</td>
<td>
<p class="maintext"> <input type="radio" id="Radio1" value="Yes" name="Police_Investigation
No</p>
</td>
</tr>
<tr>
<td>
<p class="maintext"> Do you have any unspent criminal convictions? *
<br />
<a href="#" title="Unspent convictions are criminal convictions which are still registered. The reason we ask this is that the CICA will take into account any unspent convictions you or the victim (in the case of a fatality) may have in deciding what, if any, award to make. Please note that the fact that you have a conviction does not automatically mean that you will not receive an award.">
more info</a></p>
</td>
<td>
<p class="maintext"> <input type="radio" id="Yes_personal_convictio
Yes <input type="radio" id="No_personal_conviction
No</p>
</td>
</tr>
<tr>
<td>
<p class="maintext">Please provide details of unspent convictions: *</p>
</td>
<td>
<textarea rows="6" class="maintext" cols="20" id="convictions_details" name="convictions_details"
</td>
</tr>
<tr>
<td>
<p class="maintext"> I understand and accept the <a href="#" onclick="window.open('term
terms and conditions</a>: *</p>
</td>
<td>
<input type="checkbox" id="I_accept_the_terms_and
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" id="Submit1" name="Submit1" />
</td>
<td>
<p class="maintext"> * Indicates a required field</p>
</td>
</tr>
<tr>
<td>
<br />
<p class="maintext"> <strong>PRIVACY STATEMENT</strong> please note that all information provided to
Compensation4Crime is held in the strictest of confidence and will not be used
for any purpose without your consent.</p>
</td>
<td>
</td>
</tr>
<tr>
<td>
<br />
<br />
<p class="maintext"> I do not wish to recieve information regarding other legal services available.</p>
</td>
<td align="right">
<input type="checkbox" id="box1" name="box1" value="Don't_send_legal_in
</td>
</tr>
<tr>
<td>
<br />
<p class="maintext"> I do not want my information to be provided to third parties.</p>
</td>
<td align="right">
<input type="checkbox" id="box2" name="box2" value="Don't_send_third_pa
</td>
</tr>
</table>
</form>
<br />
<br />
<br />
</td><td width="5%" valign="middle">
</td>
</tr>
</table>
</div>
<br />
</div>
<div id="box4-3"> <!-- box for new and news items -->
<br /> <p class="copy2">new & news</p>
<p class="copy2"><a href="http://www.parliament.the-stationery-office.co.uk/pa/cm199293/cmhansrd/1992-11-23/Writtens-2.html#Writtens-2_dpthd1" target="_blank">latest government debate</a></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="gridgroup3">
<div id="box5-3">
<div>
<p class="copyright"><a href="http://www.alexgreen.co.uk"> © Alex
Green 2003</a></p>
<p class="copy">
<br />
<br />
<!-- Creative Commons License -->
<a href="http://creativecommons.org/licenses/by-sa/1.0"><img alt="Creative commons license - attribution required" src=" images/deed_attribution.gi
This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/1.0">Creative Commons License</a>.
<!-- /Creative Commons License -->
<!--
<rdf:RDF xmlns="http://web.resource.org/cc/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="http:// /">
<dc:title>Compensation 4 Crime</dc:title>
<dc:date>2000-1-1</dc:date
<dc:description>Compensati
<dc:creator><Agent>
<dc:title>Alex Green</dc:title>
</Agent></dc:creator>
<dc:rights><Agent>
<dc:title>Alex Green</dc:title>
</Agent></dc:rights>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/Text" />
<license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/1.0" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-sa/1.0">
<requires rdf:resource="http://web.resource.org/cc/Attribution" />
<permits rdf:resource="http://web.resource.org/cc/Reproduction" />
<permits rdf:resource="http://web.resource.org/cc/Distribution" />
<permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
<requires rdf:resource="http://web.resource.org/cc/ShareAlike" />
<prohibits rdf:resource="http://web.resource.org/cc/CommercialUse" />
<requires rdf:resource="http://web.resource.org/cc/Notice" />
</License>
</rdf:RDF>
-->
</p>
<p class="copy">
based on original JS & css code by <a href="http://www.pumpernickle.net/">dug falby</a></p>
<p class="copy">
slimline w3c icons by <a href="http://www.picment.com/">Soren Madsen</a></p>
<p class="copy"><a href="http://validator.w3.org/check/referer"><img src=" images/w3c_xhtml10_w.gif" style="border:1px solid #9999cc;width:84px;height:
<br />
<a href="http://validator.w3.org/check?uri=http:%2F%2F /c4c/domesticviolenceq.htm
<p class="copy"><a href="http://jigsaw.w3.org/css-validator/"><img src=" images/w3c_css2_w.gif" style="border:1px solid #9999cc;width:84px;height:
<br />
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http:%2F%2F %2Fc4c%2Fstyles%2Fcss1_all
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http:%2F%2F %2Fc4c%2Fstyles%2Fcss2_iem
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http:%2F%2F %2Fc4c%2Fstyles%2Fcss2_all
</div>
</div>
</div>
</body>
</html>
ok, we all know that tables shouldn't be used for layout.
so.....
can anyone help me change the code here so that it doesn't use tables and uses divs or other css based positioning techniques, i'm a little stuck where to start and it was in a table to begin with so i'm just trying to improve it.
I'm talking about all the stuff in div id="box3-3" the general page positioning works great with the css i have (can post if necessary.)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>...::|::... Compensation 4 Crime ...::|::... </title>
<meta content="Alex Green" name="Author" />
<meta content="ALL" name="ROBOTS" />
<meta content="Compensation 4 Crime is the only Criminal Injuries Compensation specialist dedicated solely to the pursuit of compensating victims of violent crimes or their relatives." name="description" />
<meta name="keywords" content="criminal, criminal injuries, compensation, claims, blame, solicitors, lawyers, law, claim, government" />
<meta content="site designed and scripted by alex green http://www.alexgreen.co.uk based on original JS & css by dug falby http://www.pumpernickle.net" name="generator" />
<!-- version sniff and optional api elements -->
<script src=" scripts/sniff.js" type="text/javascript" language="Javascript"></sc
<!-- CSS1 declarations -->
<link rel="stylesheet" type="text/css" media="screen" title="" href=" styles/css1_all.css" />
<!-- CSS2 position bits and bobs ie mac gets different version -->
<script type="text/javascript" language="Javascript">
// <![CDATA[
if(isIE5mac) {document.write('<style type="text/css" media="screen">@import url( styles/css2_iemac.css);\</
// ]]>
</script>
</head>
<body>
<div id="gridgroup1">
<div id="box1-3">
<br /><p></p><br />
<p class="navchunk"></p><h4>C
<br />
<br />
<br />
</div>
</div>
<div id="gridgroup2">
<div id="box2-3">
<p class="navsection">navigat
<p class="bulletlist"><span class="r"><a href=" index.htm">home</a> </span> <br />
<span class="r"><a href=" government.htm">government
<span class="r"><a href=" about.htm">about us</a> </span> <br />
<span class="r"><a href=" sample.htm">sample awards</a> </span> <br /> </p>
<p></p>
<p class="navsection">apply</
<p class="bulletlist"><span class="o"><a href=" criminjadult.htm">criminal
<span class="o"><a href=" criminjchild.htm">criminal
<span class="o"><a href=" childabuse.htm">child abuse</a> </span> <br />
<span class="o"><a href=" sexabuse.htm">sexual abuse</a> </span> <br />
<span class="o"><a href=" domesticviolence.htm">dome
<span class="o"><a href=" fatalinj.htm">fatal injuries</a> </span> <br /> </p>
<p class="navsection"> <
<p class="bulletlist"><span class="g"><a href=" other.htm">other legal services</a> </span> <br />
<span class="g"><a href=" contact.htm">contact us</a> </span> <br /></p>
</div>
<div id="box3-3" class="gridrule">
<br /> <div class="maintext">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td width="1%">
</td>
<td width="99%">
<h1>
Domestic Violence Questionnaire:
</h1>
<br />
<br />
<br />
<form method="post" action="http:// " name="Criminal-Injuries-Ch
<input type="hidden" name="recipient" id="recipient" value=" " />
<input type="hidden" name="subject" id="subject" value="Criminal Injuries - Children Report" />
<input type="hidden" name="redirect" value=" confirm.html" id="Hidden1" />
<input type="hidden" name="required" id="required" value="Victim_Name,Submitt
<table width="100%">
<tr>
<td>
<p class="maintext"> Your Name: *</p>
</td>
<td>
<input class="maintext" type="text" id="Submitted_Name" name="Submitted_Name" maxlength="30" />
</td>
</tr>
<tr>
<td>
<p class="maintext"> Address: *</p>
</td>
<td>
<textarea class="maintext" rows="6" cols="20" id="Submitted_Address" name="Submitted_Address"><
</td>
</tr>
<tr>
<td>
<p class="maintext">Telephone
</td>
<td>
<p class="maintext">Home/Mobi
</td>
</tr>
<tr>
<td>
<p class="maintext">Date of Birth: *(dd/mm/yyyy)</p>
</td>
<td>
<input class="maintext" type="text" id="Submitted_DOB" name="Submitted_DOB" maxlength="10" />
</td>
</tr>
<tr>
<td>
<p class="maintext">National insurance number: (if available / known) *</p>
</td>
<td>
<input type="text" class="maintext" id="Submitted_NI_No" name="Submitted_NI_No" value="(Leave if not available / known)" />
</td>
</tr>
<tr>
<td>
<p class="maintext">Date of incident(s): *(dd/mm/yyyy)</p>
</td>
<td>
<input class="maintext" type="text" id="Date_of_Incident" name="Date_of_Incident" />
</td>
</tr>
<tr>
<td>
<p class="maintext">Location of incident(s): *</p>
</td>
<td>
<input class="maintext" type="text" id="Incident_Location" name="Incident_Location" />
</td>
</tr>
<tr>
<td>
<p class="maintext"> Brief details of incident(s): *</p>
</td>
<td>
<textarea class="maintext" rows="6" cols="20" id="Incident_Description" name="Incident_Description
</td>
</tr>
<tr>
<td>
<p class="maintext"> Your relationship to the offender: *</p>
</td>
<td>
<input class="maintext" type="text" id="relationship" name="relationship" />
</td>
</tr>
<tr>
<td>
<p class="maintext"> Are you still living with the offender? *</p>
</td>
<td>
<p class="maintext"> <input type="radio" id="Yes_living_with_offend
Yes <input type="radio" id="Not_living_with_offend
No</p>
</td>
</tr>
<tr>
<td>
<p class="maintext"> Did you fully co-operate with the police? *</p>
</td>
<td>
<p class="maintext"><input type="radio" id="Yes_co-operate_with_po
Yes <input type="radio" id="Did_not_co-operate_wit
No</p>
</td>
</tr>
<tr>
<td>
<p class="maintext"> Did the police pursue a criminal investigation? *</p>
</td>
<td>
<p class="maintext"> <input type="radio" id="Radio1" value="Yes" name="Police_Investigation
No</p>
</td>
</tr>
<tr>
<td>
<p class="maintext"> Do you have any unspent criminal convictions? *
<br />
<a href="#" title="Unspent convictions are criminal convictions which are still registered. The reason we ask this is that the CICA will take into account any unspent convictions you or the victim (in the case of a fatality) may have in deciding what, if any, award to make. Please note that the fact that you have a conviction does not automatically mean that you will not receive an award.">
more info</a></p>
</td>
<td>
<p class="maintext"> <input type="radio" id="Yes_personal_convictio
Yes <input type="radio" id="No_personal_conviction
No</p>
</td>
</tr>
<tr>
<td>
<p class="maintext">Please provide details of unspent convictions: *</p>
</td>
<td>
<textarea rows="6" class="maintext" cols="20" id="convictions_details" name="convictions_details"
</td>
</tr>
<tr>
<td>
<p class="maintext"> I understand and accept the <a href="#" onclick="window.open('term
terms and conditions</a>: *</p>
</td>
<td>
<input type="checkbox" id="I_accept_the_terms_and
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" id="Submit1" name="Submit1" />
</td>
<td>
<p class="maintext"> * Indicates a required field</p>
</td>
</tr>
<tr>
<td>
<br />
<p class="maintext"> <strong>PRIVACY STATEMENT</strong> please note that all information provided to
Compensation4Crime is held in the strictest of confidence and will not be used
for any purpose without your consent.</p>
</td>
<td>
</td>
</tr>
<tr>
<td>
<br />
<br />
<p class="maintext"> I do not wish to recieve information regarding other legal services available.</p>
</td>
<td align="right">
<input type="checkbox" id="box1" name="box1" value="Don't_send_legal_in
</td>
</tr>
<tr>
<td>
<br />
<p class="maintext"> I do not want my information to be provided to third parties.</p>
</td>
<td align="right">
<input type="checkbox" id="box2" name="box2" value="Don't_send_third_pa
</td>
</tr>
</table>
</form>
<br />
<br />
<br />
</td><td width="5%" valign="middle">
</td>
</tr>
</table>
</div>
<br />
</div>
<div id="box4-3"> <!-- box for new and news items -->
<br /> <p class="copy2">new & news</p>
<p class="copy2"><a href="http://www.parliament.the-stationery-office.co.uk/pa/cm199293/cmhansrd/1992-11-23/Writtens-2.html#Writtens-2_dpthd1" target="_blank">latest government debate</a></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="gridgroup3">
<div id="box5-3">
<div>
<p class="copyright"><a href="http://www.alexgreen.co.uk"> © Alex
Green 2003</a></p>
<p class="copy">
<br />
<br />
<!-- Creative Commons License -->
<a href="http://creativecommons.org/licenses/by-sa/1.0"><img alt="Creative commons license - attribution required" src=" images/deed_attribution.gi
This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/1.0">Creative Commons License</a>.
<!-- /Creative Commons License -->
<!--
<rdf:RDF xmlns="http://web.resource.org/cc/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="http:// /">
<dc:title>Compensation 4 Crime</dc:title>
<dc:date>2000-1-1</dc:date
<dc:description>Compensati
<dc:creator><Agent>
<dc:title>Alex Green</dc:title>
</Agent></dc:creator>
<dc:rights><Agent>
<dc:title>Alex Green</dc:title>
</Agent></dc:rights>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/Text" />
<license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/1.0" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-sa/1.0">
<requires rdf:resource="http://web.resource.org/cc/Attribution" />
<permits rdf:resource="http://web.resource.org/cc/Reproduction" />
<permits rdf:resource="http://web.resource.org/cc/Distribution" />
<permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
<requires rdf:resource="http://web.resource.org/cc/ShareAlike" />
<prohibits rdf:resource="http://web.resource.org/cc/CommercialUse" />
<requires rdf:resource="http://web.resource.org/cc/Notice" />
</License>
</rdf:RDF>
-->
</p>
<p class="copy">
based on original JS & css code by <a href="http://www.pumpernickle.net/">dug falby</a></p>
<p class="copy">
slimline w3c icons by <a href="http://www.picment.com/">Soren Madsen</a></p>
<p class="copy"><a href="http://validator.w3.org/check/referer"><img src=" images/w3c_xhtml10_w.gif" style="border:1px solid #9999cc;width:84px;height:
<br />
<a href="http://validator.w3.org/check?uri=http:%2F%2F /c4c/domesticviolenceq.htm
<p class="copy"><a href="http://jigsaw.w3.org/css-validator/"><img src=" images/w3c_css2_w.gif" style="border:1px solid #9999cc;width:84px;height:
<br />
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http:%2F%2F %2Fc4c%2Fstyles%2Fcss1_all
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http:%2F%2F %2Fc4c%2Fstyles%2Fcss2_iem
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http:%2F%2F %2Fc4c%2Fstyles%2Fcss2_all
</div>
</div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Here's your form without tables:
http://www.pdgmedia.com/alexgreen.html
Basically the label input specifies how the form elements will be treated - by allocating a specific width, and
making sure that the form text is aligned vertically with the top of the form element.
Have a look at the code and let me know...
http://www.pdgmedia.com/alexgreen.html
Basically the label input specifies how the form elements will be treated - by allocating a specific width, and
making sure that the form text is aligned vertically with the top of the form element.
Have a look at the code and let me know...
ASKER
OK, looks simple enough,
I get the concept now,
Will that drop straight in to the existing CSS positioned boxes?
Can I move the css in that page out into the external css document?
sorry if this is basic and i'm being dense!
I get the concept now,
Will that drop straight in to the existing CSS positioned boxes?
Can I move the css in that page out into the external css document?
sorry if this is basic and i'm being dense!
>>Will that drop straight in to the existing CSS positioned boxes?
It should, as long as the width is available for the form.
>>Can I move the css in that page out into the external css document?
Absolutely.
Here it is in the whole page - but since I don't have access to your stylesheets, I can't judge the final display parameters...
http://www.pdgmedia.com/alex_green.html
It should, as long as the width is available for the form.
>>Can I move the css in that page out into the external css document?
Absolutely.
Here it is in the whole page - but since I don't have access to your stylesheets, I can't judge the final display parameters...
http://www.pdgmedia.com/alex_green.html
ASKER
thanks will post url when i've dropped this into the context thanks a million again
ASKER
George
can i stop the 3rs column overlapping the form?
http://www.asas82.dsl.pipex.com/c4c/testing.htm
Alex
can i stop the 3rs column overlapping the form?
http://www.asas82.dsl.pipex.com/c4c/testing.htm
Alex
ASKER
And do I just stick the hidden bits at the top of the form?
>>3rs column
Do you mean the news & news div?
>>And do I just stick the hidden bits at the top of the form?
Sorry, don't follow you there...
Do you mean the news & news div?
>>And do I just stick the hidden bits at the top of the form?
Sorry, don't follow you there...
ASKER
yes, the new & news
hidden form elements
hidden form elements
Okay - you'll need to adjust the sizing on the form elements, because the existing fixed widths are too large
when the 60% width of the form is less than the fixed size of the form, if you follow me...
This configuration works on my end:
form {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.formelement {
font-family: Arial, Helvetica, sans-serif;
padding: 2px;
font-size: 12px;
background-color: #cccccc;
border: inset 1px #333333;
width:210px;
}
.formlabel {
font-family: Arial, Helvetica, sans-serif;
padding: 2px;
font-size: 12px;
width:210px;
}
label {
float: left;
width:210px;
clear:all;
}
I still don't understand what you mean about hidden form elements, you don't appear to have any?
Are you referring to the <label>? No, those should stay where they are...
Thanks
when the 60% width of the form is less than the fixed size of the form, if you follow me...
This configuration works on my end:
form {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.formelement {
font-family: Arial, Helvetica, sans-serif;
padding: 2px;
font-size: 12px;
background-color: #cccccc;
border: inset 1px #333333;
width:210px;
}
.formlabel {
font-family: Arial, Helvetica, sans-serif;
padding: 2px;
font-size: 12px;
width:210px;
}
label {
float: left;
width:210px;
clear:all;
}
I still don't understand what you mean about hidden form elements, you don't appear to have any?
Are you referring to the <label>? No, those should stay where they are...
Thanks
ASKER
hidden form elements like <form method="post" action="http://home.clara.net/cgi-bin/formmail" name="Criminal-Injuries-Ch
<input type="hidden" name="recipient" id="recipient" value="alexandkate@clara.c
<input type="hidden" name="subject" id="subject" value="criminal injuries - child / mentally incapacitatedren Report" />
<input type="hidden" name="redirect" value="http://www.asas82.dsl.pipex.com/c4c/confirm.html" id="Hidden1" />
<input type="hidden" name="required" id="required" value="victim_name,victim_
<input type="hidden" name="recipient" id="recipient" value="alexandkate@clara.c
<input type="hidden" name="subject" id="subject" value="criminal injuries - child / mentally incapacitatedren Report" />
<input type="hidden" name="redirect" value="http://www.asas82.dsl.pipex.com/c4c/confirm.html" id="Hidden1" />
<input type="hidden" name="required" id="required" value="victim_name,victim_
Okay - I didn't see those listed anywhere in the URL above -
the hidden form elements can go anywhere on the page - but they must be in between the opening and closing form tags.
the hidden form elements can go anywhere on the page - but they must be in between the opening and closing form tags.
ASKER
fine
ASKER
magic thanks
btw can you see why the title bit (Compensation4Crime.Com is a member of the <a href="http://www.e-LawNetwork.com/"></a>e-LawNetwork.c
has shifted over to the left, i would like it to look like it does on the main page http://www.asas82.dsl.pipex.com/c4c/
You changed the name of the div for the logo and title to: <div id="box_1-3">. In your stylesheet it's #box1-3, so the style isn't getting applied.
ASKER
whoops
thanks
thanks
There's nothing like another pair of eyes - I use them as often as I can...
ASKER
thanks
want some more points?
want some more points?
just glad to help - it's up to you :-)
ASKER
ok george this is the final part (I hope) then i will award you some more points for your continuing kindness and help.
are the forms going to work properly in their current format?
to validate properly, re-using the ID is not permitted so i have had to have diferent ID's for each element and each radio button set.
I'm just not sure if that will work!
please examine the forms at http://www.asas82.dsl.pipex.com/c4c/ and tell me if they'll work as I intend them to (they don't at the moment due to the form handler but I'm working on a secure hosted solution for it so the hidden values will change)
if you also want to coment on the general site usability and look, please feel free.
thanks loads
Alex
are the forms going to work properly in their current format?
to validate properly, re-using the ID is not permitted so i have had to have diferent ID's for each element and each radio button set.
I'm just not sure if that will work!
please examine the forms at http://www.asas82.dsl.pipex.com/c4c/ and tell me if they'll work as I intend them to (they don't at the moment due to the form handler but I'm working on a secure hosted solution for it so the hidden values will change)
if you also want to coment on the general site usability and look, please feel free.
thanks loads
Alex
I'll take a more thorough look this afternoon, but everything in the forms look fine - I think you've done a great job there.
I need to examine the page more closely in terms of usability, but I need to know who the target market of the site is
before I can assess some of the elements. Can you advise, and add any other information that might be releveant?
Thanks
I need to examine the page more closely in terms of usability, but I need to know who the target market of the site is
before I can assess some of the elements. Can you advise, and add any other information that might be releveant?
Thanks
ASKER
well, the target market is any individual in the UK that has suffered as a result of crime, that's about as much as there is!
have a look at these sites for the scheme and why it is being done.
http://www.cica.gov.uk/
http://www.cicap.gov.uk/
This site is for a group of solicitors that want to profit from filling in all the forms and selling the cases to other solicitors!
have a look at these sites for the scheme and why it is being done.
http://www.cica.gov.uk/
http://www.cicap.gov.uk/
This site is for a group of solicitors that want to profit from filling in all the forms and selling the cases to other solicitors!
I wasn't sure if seniors or the visually imapired would be using the site, as the text size in the nav and form sections is well below the cutoff for these segements...
ASKER
it's possible, maybe i should do a "glasses friendly" version too
That would be for me... I just started wearing them for computer work. Turn 40 on December 30th :-(
ASKER
I'll clone the site into a /visual/ subdirectory and up the font sizes by 100-150% but it may take a while (will have something for the "new & news" section then!)
ASKER
So it doesn't matter that the ID's are all individual? It should work ok when the handler is set properly!
Points
thanks
https://www.experts-exchange.com/questions/20804491/Points-for-seanpowell.html
Points
thanks
https://www.experts-exchange.com/questions/20804491/Points-for-seanpowell.html
No - it shouldn't make any difference, but each cgi/web host form is a little different. Have you done a test run?
ASKER
not yet, waiting for the domain to be transferred then need to upload and test!
ASKER
Not 100% sure i follow you, could you clarify a bit, exatly what is happening there and how it will maintain spacing like the
existing table please?, ideally i would like it to look like the stuff in div id="box3-3" as it stands but i want to avoid tables.
thanks