Re: HTML/CSS issues
Todd Slater <[email protected]>
| Newsgroups | gmane.comp.apache.mod-survey.general |
|---|---|
| Message-ID | <[email protected]> |
Attached is a rewrite of the example survey with the cloud theme without id's. The CSS is internal. Comments? Todd On Tue, Aug 17, 2004 at 12:05:46PM -0400, Todd Slater wrote: > > Hmm, none of these solutions is very pretty. I guess you'll need to > decide if you want the HTML output to validate and go from there. :) > > Todd > > On Tue, Aug 17, 2004 at 12:51:03PM +0200, Joel Palmius wrote: > > Well, the theory is that I should only have to define common attributes > > once. To illustrate, imagine I have this css:
mod_survey_css.html
(text/html, 19.2 KB)
<?xml version="1.0" charset="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><!-- slask -->
<title>Background</title>
<style type="text/css">
<!--
body {
color: #000066;
background-color: #D3D3FF;
}
#mdsbody {
display: block;
width: 805px;
}
.CHOICE, .TEXT, .LIST, .LICKERT, .MATRIX {
display: table-cell;
width: 800px;
background-color: white;
border-style: solid;
border-width: 2px;
border-color: black;
padding: 0.5em 0.5em 1em;
clear: both;
margin-bottom: 2px;
}
.CHOICEcap, .TEXTcap, .LISTcap, .LICKERTcap, .MATRIXtitlecap {
color: #770077;
font-family: sans-serif;
font-weight: bold;
padding-bottom: 0.75em;
}
.CHOICElabelcap, .CHOICEother, .LICKERTleftcap, .LICKERTrightcap, .MATRIXcolcap {
font-family: monospace;
color: black;
}
.LICKERTleftcap {
display: block;
clear: none;
float: left;
padding: 0px 10px;
}
.LICKERTrightcap {
display: table-cell;
padding-left: 10px;
}
.LICKERTrb {
float: left;
}
.MATRIXtitlecap {
display: table-cell;
text-align: left;
}
.CHOICEline {
display: block;
padding: 0px;
clear: both;
}
.CHOICElabelcap {
display: table-cell;
clear: right;
padding: 0px;
padding-right: 20px;
}
.CHOICEcb {
display: table-cell;
padding: 0px;
float: left;
margin-right: 20px;
}
.CHOICErb {
display: table-cell;
padding: 0px;
float: left;
margin-right: 20px;
}
.CHOICEother {
clear: none;
float: left;
padding-right: 5px;
}
/* left paddings */
.CHOICEline, .TEXTtext, .LISTsel, .LICKERTelm {
margin-left:2em;
}
-->
</style>
</head>
<body>
<div id="mdsbody">
<h1>Background Knowledge and Preferences</h1>
<p><i><b>In the following questionnaire, you will be asked a number of questions about your aquaintance with computers, and your preferences in regard to them.
Please answer these questions as honestly as you can. Your answers will be treated confidentially.</b></i><br /><br /></p>
<hr />
<p><i><b>First a couple of questions about your general background</b></i><br /><br /></p>
<div class="CHOICE">
<div class="CHOICEcap">Are you male or female?</div>
<div class="CHOICEelm">
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="gender" value="0"/><div class="CHOICElabelcap">Male</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="gender" value="1"/><div class="CHOICElabelcap">Female</div></div>
</div>
</div>
<p class="componentspc"></p>
<div class="TEXT">
<div class="TEXTcap">How old are you?</div>
<div class="TEXTelm">
<input type="text" class="TEXTtext" name="age" maxlength="2" size="2" /></div>
</div>
<p class="componentspc"></p>
<div class="LIST">
<div class="LISTcap">Which target group do you belong to?</div>
<div class="LISTelm">
<select class="LISTsel" name="target" size="5">
<option value="0">Student or academic</option>
<option value="1">Governmental</option>
<option value="2">Enterprise</option>
<option value="3">Other</option>
</select>
</div>
</div>
<p class="componentspc"></p>
<p><i><b>Here follows a number of questions about your preferences and self-appraised competence in regard to computers.</b></i><br /><br /></p>
<div class="LICKERT">
<div class="LICKERTcap">I think it is a good thing that services (as an example banking) are computerized.</div>
<div class="LICKERTelm"><div class="LICKERTleftcap">True</div> <input type="radio" class="LICKERTrb" name="likedat" value="1" />
<input type="radio" class="LICKERTrb" name="likedat" value="2" />
<input type="radio" class="LICKERTrb" name="likedat" value="3" />
<input type="radio" class="LICKERTrb" name="likedat" value="4" />
<input type="radio" class="LICKERTrb" name="likedat" value="5" />
<div class="LICKERTrightcap">False</div></div>
</div>
<p class="componentspc"></p>
<div class="LICKERT">
<div class="LICKERTcap">I prefer the web to other media when I look for information</div>
<div class="LICKERTelm"><div class="LICKERTleftcap">True</div> <input type="radio" class="LICKERTrb" name="prefweb" value="1" />
<input type="radio" class="LICKERTrb" name="prefweb" value="2" />
<input type="radio" class="LICKERTrb" name="prefweb" value="3" />
<input type="radio" class="LICKERTrb" name="prefweb" value="4" />
<input type="radio" class="LICKERTrb" name="prefweb" value="5" />
<div class="LICKERTrightcap">False</div></div>
</div>
<p class="componentspc"></p>
<div class="LICKERT">
<div class="LICKERTcap">I usually try the web first if I need information</div>
<div class="LICKERTelm"><div class="LICKERTleftcap">True</div> <input type="radio" class="LICKERTrb" name="firstweb" value="1" />
<input type="radio" class="LICKERTrb" name="firstweb" value="2" />
<input type="radio" class="LICKERTrb" name="firstweb" value="3" />
<input type="radio" class="LICKERTrb" name="firstweb" value="4" />
<input type="radio" class="LICKERTrb" name="firstweb" value="5" />
<div class="LICKERTrightcap">False</div></div>
</div>
<p class="componentspc"></p>
<div class="LICKERT">
<div class="LICKERTcap">I know what I need to know about FTP</div>
<div class="LICKERTelm"><div class="LICKERTleftcap">True</div> <input type="radio" class="LICKERTrb" name="knowftp" value="1" />
<input type="radio" class="LICKERTrb" name="knowftp" value="2" />
<input type="radio" class="LICKERTrb" name="knowftp" value="3" />
<input type="radio" class="LICKERTrb" name="knowftp" value="4" />
<input type="radio" class="LICKERTrb" name="knowftp" value="5" />
<div class="LICKERTrightcap">False</div></div>
</div>
<p class="componentspc"></p>
<div class="LICKERT">
<div class="LICKERTcap">I can find the information I want on the web</div>
<div class="LICKERTelm"><div class="LICKERTleftcap">True</div> <input type="radio" class="LICKERTrb" name="knowweb" value="1" />
<input type="radio" class="LICKERTrb" name="knowweb" value="2" />
<input type="radio" class="LICKERTrb" name="knowweb" value="3" />
<input type="radio" class="LICKERTrb" name="knowweb" value="4" />
<input type="radio" class="LICKERTrb" name="knowweb" value="5" />
<div class="LICKERTrightcap">False</div></div>
</div>
<p class="componentspc"></p>
<div class="LICKERT">
<div class="LICKERTcap">If needed, I would be able to install a new version of netscape</div>
<div class="LICKERTelm"><div class="LICKERTleftcap">True</div> <input type="radio" class="LICKERTrb" name="knowinst" value="1" />
<input type="radio" class="LICKERTrb" name="knowinst" value="2" />
<input type="radio" class="LICKERTrb" name="knowinst" value="3" />
<input type="radio" class="LICKERTrb" name="knowinst" value="4" />
<input type="radio" class="LICKERTrb" name="knowinst" value="5" />
<div class="LICKERTrightcap">False</div></div>
</div>
<p class="componentspc"></p>
<div class="LICKERT">
<div class="LICKERTcap">I am able to write and publish a reasonably good homepage</div>
<div class="LICKERTelm"><div class="LICKERTleftcap">True</div> <input type="radio" class="LICKERTrb" name="knowprod" value="1" />
<input type="radio" class="LICKERTrb" name="knowprod" value="2" />
<input type="radio" class="LICKERTrb" name="knowprod" value="3" />
<input type="radio" class="LICKERTrb" name="knowprod" value="4" />
<input type="radio" class="LICKERTrb" name="knowprod" value="5" />
<div class="LICKERTrightcap">False</div></div>
</div>
<p class="componentspc"></p>
<div class="CHOICE">
<div class="CHOICEcap">Do you have computer and an internet connection at home?</div>
<div class="CHOICEelm">
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="haveconn" value="0"/><div class="CHOICElabelcap">Yes</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="haveconn" value="1"/><div class="CHOICElabelcap">I have a computer, but no connection</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="haveconn" value="2"/><div class="CHOICElabelcap">I have neither computer nor connection</div></div>
</div>
</div>
<p class="componentspc"></p>
<div class="CHOICE">
<div class="CHOICEcap">From where do you use the web?</div>
<div class="CHOICEelm">
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="connmeth" value="0"/><div class="CHOICElabelcap">From home</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="connmeth" value="1"/><div class="CHOICElabelcap">From school or work</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="connmeth" value="2"/><div class="CHOICElabelcap">Both the above</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="connmeth" value="3"/><div class="CHOICElabelcap">I never use the web</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="connmeth" value="!"/><div class="CHOICEother">Other:</div> <input type="text" class="CHOICEtext" name="connmeth-otherfield" value="" width="50" /></div>
</div>
</div>
<p class="componentspc"></p>
<div class="CHOICE">
<div class="CHOICEcap">How much do you use computers?</div>
<div class="CHOICEelm">
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqdat" value="0"/><div class="CHOICElabelcap">More than an hour a day</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqdat" value="1"/><div class="CHOICElabelcap">At most an hour a day</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqdat" value="2"/><div class="CHOICElabelcap">A couple of hours a week</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqdat" value="3"/><div class="CHOICElabelcap">At most an hour a week</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqdat" value="4"/><div class="CHOICElabelcap">Very seldom</div></div>
</div>
</div>
<p class="componentspc"></p>
<div class="CHOICE">
<div class="CHOICEcap">How much do you use the web?</div>
<div class="CHOICEelm">
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqweb" value="0"/><div class="CHOICElabelcap">More than an hour a day</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqweb" value="1"/><div class="CHOICElabelcap">At most an hour a day</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqweb" value="2"/><div class="CHOICElabelcap">A couple of hours a week</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqweb" value="3"/><div class="CHOICElabelcap">At most an hour a week</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="freqweb" value="4"/><div class="CHOICElabelcap">Very seldom</div></div>
</div>
</div>
<p class="componentspc"></p>
<div class="CHOICE">
<div class="CHOICEcap">What do you use the web for?</div>
<div class="CHOICEelm">
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="purpweb" value="0"/><div class="CHOICElabelcap">Mostly for leisure</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="purpweb" value="1"/><div class="CHOICElabelcap">Mostly for work or studies</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="purpweb" value="2"/><div class="CHOICElabelcap">Mostly for email (as an example via Hotmail)</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="purpweb" value="3"/><div class="CHOICElabelcap">Mostly for something else</div></div>
<div class="CHOICEline"><input type="radio" class="CHOICErb" name="purpweb" value="!"/><div class="CHOICEother">Other:</div> <input type="text" class="CHOICEtext" name="purpweb-otherfield" value="" width="50" /></div>
</div>
</div>
<p class="componentspc"></p>
<div class="MATRIX">
<table border="0" rows="5" cols="6">
<caption class="MATRIXcaption" align="top"><div class="MATRIXtitlecap">How long ago was it since you..</div></caption>
<tr>
<td class="MATRIXrow" width="300"> </td>
<td class="MATRIXcol" valign="bottom" width="80"><div class="MATRIXcolcap">I never did</div></td>
<td class="MATRIXcol" valign="bottom" width="80"><div class="MATRIXcolcap">Less than a year</div></td>
<td class="MATRIXcol" valign="bottom" width="80"><div class="MATRIXcolcap">Between one and two years</div></td>
<td class="MATRIXcol" valign="bottom" width="80"><div class="MATRIXcolcap">Between three and four years</div></td>
<td class="MATRIXcol" valign="bottom" width="80"><div class="MATRIXcolcap">Between four and five years</div></td>
<td class="MATRIXcol" valign="bottom" width="80"><div class="MATRIXcolcap">Five years or more</div></td>
</tr>
<tr>
<td class="MATRIXrow" width="300"><div class="MATRIXcolcap">..started to use FTP </div></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time03" value="5" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time03" value="4" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time03" value="3" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time03" value="2" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time03" value="1" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time03" value="0" /></td>
</tr>
<tr>
<td class="MATRIXrow" width="300"><div class="MATRIXcolcap">..started to use ICQ </div></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time05" value="5" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time05" value="4" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time05" value="3" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time05" value="2" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time05" value="1" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time05" value="0" /></td>
</tr>
<tr>
<td class="MATRIXrow" width="300"><div class="MATRIXcolcap">..started to use the web </div></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time02" value="5" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time02" value="4" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time02" value="3" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time02" value="2" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time02" value="1" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time02" value="0" /></td>
</tr>
<tr>
<td class="MATRIXrow" width="300"><div class="MATRIXcolcap">..started to use computers </div></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time01" value="5" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time01" value="4" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time01" value="3" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time01" value="2" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time01" value="1" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time01" value="0" /></td>
</tr>
<tr>
<td class="MATRIXrow" width="300"><div class="MATRIXcolcap">..started to use IRC </div></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time04" value="5" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time04" value="4" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time04" value="3" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time04" value="2" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time04" value="1" /></td>
<td class="MATRIXcell"><input type="radio" class="MATRIXrb" name="time04" value="0" /></td>
</tr>
</table>
</div>
<p class="componentspc"></p>
<div class="CHOICE">
<div class="CHOICEcap">How do you want to find information on the web?</div>
<div class="CHOICEelm">
<!-- -->
<div class="CHOICEline"><input type="checkbox" class="CHOICEcb" name="prefseek" value="0"/><div class="CHOICElabelcap">I want to search for keywords</div></div>
<div class="CHOICEline"><input type="checkbox" class="CHOICEcb" name="prefseek" value="1"/><div class="CHOICElabelcap">I want links presented alphabetically</div></div>
<div class="CHOICEline"><input type="checkbox" class="CHOICEcb" name="prefseek" value="2"/><div class="CHOICElabelcap">I want links categorized hierachically</div></div>
<div class="CHOICEline"><input type="checkbox" class="CHOICEcb" name="prefseek" value="3"/><div class="CHOICElabelcap">I want to ask questions in clear text</div></div>
<div class="CHOICEline"><input type="checkbox" class="CHOICEcb" name="prefseek" value="4"/><div class="CHOICElabelcap">I want the computer to ask me questions and lead me right</div></div>
<div class="CHOICEline"><input type="checkbox" class="CHOICEcb" name="prefseek" value="5"/><div class="CHOICElabelcap">None of the above</div></div>
<div class="CHOICEline"><input type="checkbox" class="CHOICEcb" name="prefseek" value="!"/><div class="CHOICEother">Other:</div> <input type="text" class="CHOICEtext" name="prefseek-otherfield" value="" width="200" /></div>
</div>
</div>
<p class="componentspc"></p>
<div id="mdssubmit">
<p><input id="mdsbutton" class="SUBMITbutton" type="submit" value="Submit" name="submit" />
<input id="mdsbutton" class="CLEARbutton" type="reset" value="Clear" name="clear" />
</div>
</form>
</div>
<hr />
<p>
<br />
<a style="color: #777799; font-weight: bold; text-decoration: none;" href="http://gathering.itm.mh.se/modsurvey/" >Mod_Survey</a> v3.2.0 (stable/release-candidate) © Joel Palmius in 2004<br /><br />
</p>
</body>
</html>