ok. Thank you very much everyone for your help so far.
I seem to have it mostly working at the moment :) whoo-hoo! :cool: :thumbsup:
The CSS looks a little kludgy to me though. But, I'm just very glad to have it doing what it's supposed to do.
However... :p
I now only have one problem left that I haven't been able to sort out all day yet. It involves styling nested DL lists.
As mentioned; it's a resume. I've had a couple of jobs which involve different roles within the same company. Instead of just listing them, I aslo wanted to show the length of time that was spent in each role on the RHS.
A second DL list nested under the appropriate <dd> seemed the way to go since I knew of no other way of relyably getting a span or a div to move just one element on the same line to the far right. (I'm somewhat inexperienced though, so I just mightn't know...). It also seems more semantically correct, fitting in with how the rest of the data in the page is coded.
So I need to go from this: ┌--<DL>--------------------------------------------------------------------┐
| |
| {gap} |
| ↓ |
| ┌-<dt>---------------┐ ┌-<dd>------------------------------------------┐ |
| | Positions: | | {Job role #1 ... } | |
| └--------------------┘ | {Job role #2 ... } | |
| | {Job role #3 ... } | |
| └-----------------------------------------------┘ |
| |
| ┌-<dt>---------------┐ ┌-<dd>------------------------------------------┐ |
| | Company: | | {company name} | |
| └--------------------┘ └-----------------------------------------------┘ |
| |
| |
| {...} |
└--------------------------------------------------------------------------┘(which is currently working), to this: ┌--<DL>--------------------------------------------------------------------┐
| |
| {gap} |
| ↓ |
| ┌-<dt>---------------┐ ┌-<dd>-------------------------------------------┐|
| | Positions: | |┌-<DL>-----------------------------------------┐||
| └--------------------┘ ||┌-<dt>--------------------------┐ ┌<dt>-----┐|||
| |||{Job role #1 ... } | | {#yrs}||||
| ||└-------------------------------┘ └---------┘|||
| |└----------------------------------------------┘||
| |┌-<DL>-----------------------------------------┐||
| ||┌-<dt>--------------------------┐ ┌<dt>-----┐|||
| |||{Job role #2 ... } | | {#yrs}||||
| ||└-------------------------------┘ └---------┘|||
| |└----------------------------------------------┘||
| |┌-<DL>-----------------------------------------┐||
| ||┌-<dt>--------------------------┐ ┌<dt>-----┐|||
| |||{Job role #3 ... } | | {#yrs}||||
| ||└-------------------------------┘ └---------┘|||
| |└----------------------------------------------┘||
| └------------------------------------------------┘|
| ↑ |
| | |
| {all content on second-level items/lists should |
| start flush left with the previous border} |
| |
| |
| ┌-<dt>---------------┐ ┌-<dd>------------------------------------------┐ |
| | Company: | | {company name} | |
| └--------------------┘ └-----------------------------------------------┘ |
| |
| |
| {...} |
└--------------------------------------------------------------------------┘
...which I've so far not yet been able to style to work :(
I've cobbled up a test page.
It shows one paragraph of the original (working) version style to give you an idea of what it should look like, and a second one with the double-nested <DL> that I'm currently trying to get to behave.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<!--// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //-->
<head>
<meta http-equiv="Content-Language" content="en-AU">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>resume</title>
<style type="text/css">
/* Box model border wrapping debugging styles */
div.listwrap {
border: 2px gray solid;
}
.employment {
border: 1px red solid;
}
.employment dt {
border: 1px blue solid;
}
.employment dd {
border: 1px green solid;
}
/* (Comment out the above to remove boxes drawn around elements for debugging purposes) */
.timeperiod {
background-color: #E2E2E2;
margin-bottom: 20px;
padding: 3px 4px 4px 12px;
font-family: "Arial Unicode MS", sans-serif;
font-weight: bold;
color: White;
width: 100%;
margin-top: 20px;
display: block;
}
/* Defonition List styles */
/* All Definition Lists style */
dl {
padding: 0;
margin: 0;
/* Normal rule styles
- temp. commented out for debugging
margin-top: 3px;
margin-bottom: 3px;
*/
}
dl:hover {
background-color: #FFFDFB;
}
/* Definition List: all [Definition Term] styles */
dt {
float: left;
clear: left;
/* margin-right: 0.3em; */
line-height: 120%;
text-align: right;
font: 0.9em "Arial Narrow", sans-serif;
font-weight: normal;
color: #333334;
}
/* Definition List: [Definition] style */
dd {
text-align: left;
font: 0.9em "Palatino Linotype", serif;
font-weight: normal;
}
/* set DL text height on MastHead to compensate for larger DD font size */
dl.employment dd.mastitem
{
line-height: 155%;
}
/* set employment section widths (one other section is a different set of widths) */
dl.employment dt {
width: 25%;
}
dl.employment dd {
margin-left: 27%;
}
/* set MastHead font styles (to display JobTitle and Company Name in a larger font size)*/
dl.employment dd.position {
font-family: "Arial Unicode MS", Arial, sans-serif;
font-size: medium;
font-weight: bold;
}
dl.employment dd.org {
font-family: "Arial Unicode MS", Arial, sans-serif;
font-size: medium;
font-weight: normal;
padding-bottom: 8px;
border-bottom: 1px solid #DCDCDC;
height: auto;
}
/* set nested DL.dt styles for multiple job positions held within one company */
dl.employment dd dl dt.jobtitle {
clear: left;
padding: 0px;
margin: 0px;
width: auto;
float: left;
font-family: "Arial Unicode MS", Arial, sans-serif;
font-size: medium;
font-weight: bold;
text-align: left;
}
/* set nested DL.dd styles for right-aligning the length of time that each position was held */
dl.employment dd dl dd.period {
clear: left;
padding: 0px;
margin: 0px;
float: right;
width: 5em;
text-align: right;
font-weight: normal;
}
/* Routine Style defiinitions */
H1, H2, .h22 {
font-family: Arial, sans-serif;
font-weight: bold;
text-align: left;
}
H1 {
border-top: 1px solid Maroon;
background-color: #FFFAFA;
font-size: large;
page-break-before: always;
}
H2 {
margin-bottom: -0.3em;
}
.smaller {
font-size: smaller ! important;
}
</style>
</head>
<!--// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //-->
<body>
<h1>Employment History</h1>
<p>Original Working example: (sans right-aligned time periods)</p>
<!-- Widgets-R-Us : Original (working) example -->
<div class="timeperiod">October 1994 ➔ February 2000</div>
<div><!-- Position and Organisation -->
<dl class="employment">
<dt class="mastitem">Position: </dt>
<dd class="position">Director — Marketing</dd>
<dd class="position smaller">Chief Widget Designer — Research And Development</dd>
<dd class="position smaller">Janitor — Workshop Factory Floor</dd>
</dl>
</div>
<br>
<div><!-- Position and Organisation -->
<dl class="employment">
<dt class="mastitem">Company: </dt>
<dd class="org">Widgets-R-Us (Head Office)</dd>
</dl>
</div>
<br>
<div><!-- Details -->
<dl class="employment"><!-- Reporting to -->
<dt>Reporting to: </dt>
<dd>The Tea Lady (daily)</dd>
</dl>
<br>
<dl class="employment"><!-- Company Profile -->
<dt>Company Profile: </dt>
<dd>Sample text to see how paragraphs might wrap to the next line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae ligula nec elit euismod rutrum. Duis non eros ac nisi lacinia vehicula. And so on, ad nauseum ad infinitem.</dd>
</dl>
<br>
<dl class="employment"><!-- Primary Responsibilities -->
<dt>Primary Responsibility: </dt>
<dd>New Widget Development and long-term strategic Product Planning for International Dumping - err.. I mean 'Markets'.</dd>
<dd>[Position Description available]</dd>
</dl>
</div>
<p>Cool! <br>
So far so good. But would like to add one further piece of information. So...</p>
<p>This next example is largely the same code, but attempting to also show the
length of time that each job was held within a company too, right-aligned. </p>
<p>This uses a second <DL> nested
within the original <DL> ➙ <DT><DD> </p>
<!-- Widgets-R-Us : 'enhanced' example -->
<div class="timeperiod">October 1994 ➔ February 2000</div>
<div><!-- Position and Organisation : Test styles -->
<dl class="employment">
<dt class="mastitem" style="list-style-type: none;">Position: </dt>
<dd>1st level, pre-2nd level test dd</dd>
<dd>
<dl>
<dt class="jobtitle">Director — Marketing</dt>
<dd class="period">(1¾ years)</dd>
</dl>
<dl>
<dt class="jobtitle smaller">Chief Widget Designer — Research And Development</dt>
<dd class="period smaller">(1¾ years)</dd>
</dl>
<dl>
<dt class="jobtitle smaller">Janitor — Workshop Factory Floor</dt>
<dd class="period smaller">(1¾ years)</dd>
</dl>
</dd>
<dd>1st level, post-2nd level test dd</dd>
</dl>
<br>
<dl class="employment">
<dt class="mastitem">Company: </dt>
<dd class="org">Widgets-R-Us (Head Office)</dd>
</dl>
</div>
<br>
<div><!-- Details -->
<dl class="employment"><!-- Reporting to -->
<dt>Reporting to: </dt>
<dd>The Tea Lady (daily)</dd>
</dl>
<br>
<dl class="employment"><!-- Company Profile -->
<dt>Company Profile: </dt>
<dd>Sample text to see how paragraphs might wrap to the next line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae ligula nec elit euismod rutrum. Duis non eros ac nisi lacinia vehicula. And so on, ad nauseum ad infinitem.</dd>
</dl>
<br>
<dl class="employment"><!-- Primary Responsibilities -->
<dt>Primary Responsibility: </dt>
<dd>New Widget Development and long-term strategic Product Planning for International Dumping - err.. I mean 'Markets'.</dd>
<dd>[Position Description available]</dd>
</dl>
</div>
</body>
<!--// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //-->
</html>
At the moment when displayed in a browser, it's got content from the next line wrapping under. I've tried adding CSS "clear: ..." into my styles at various places, but so far without helping. Though I'm going to try again given I might have "code blindness" from looking at it all day.
I've also added some visable box margins around the lists via the CSS to try and see better what's going on.
I suspect it's because I just don't understand either the CSS box model, or floats, well-enough. However I'm also worried that it could be a quirk that requires a work-around [eg1 (http://positioniseverything.net/easyclearing.html), eg2 (http://www.quirksmode.org/css/clearing.html)] in which case I'm really going to need an experienced coder's assistance.
If anyone feels they might know what's going on, I'd be keen to hear it!
(There's a bit of code there, so best to [select-all], save it and view it as an HTML page)
Thank you again to anyone that gives it a go.