Chris Beall wrote:
>
As a mental exercise, you bet. May retard the onset of Alzheimer's. In
terms of monetary remuneration, not a chance. I think my Objectives
state a rather common problem; I find it interesting to see what the
optimum way is to solve that problem. 'Optimum', for me, includes
minimizing semantic distortions in the HTML, such as using a table
structure for layout purposes (and, yes, one could argue that I've just
moved the semantic distortion to the CSS, but I'm more comfortable with
that, for some reason). I have no philosophical objection to doing so
if necessary. 'Optimum' also includes reasonable (which I get to
define...) accommodation for audio UAs and I've been led to understand
that using tables for layout can cause them problems.
I started working on it and it's a bit harder than I thought.
My version uses floats but has two problems. The image and credit
floats to the side, not the center. Otherwise, I think everything else
works, so maybe you can check it out and let me know what else isn't
working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=us-ascii" http-equiv="content-type" />
<title>img_credit_caption</title>
<style type="text/css">
/*<![CDATA[*/
..setup {
clear : both;
padding-top : 1em;
}
..credit {
float : right;
text-align : right;
font-style: italic;
padding-bottom: 1em;
font-size : .8em;
}
..caption {
clear : both;
text-align : left;
border: solid black 1px;
padding : .5em;
width : 30em;
}
..setup p {
font-size : .9em;
}
..image {
width : 100px;
height : 100px;
border : 1px solid #000;
}
/*]]>*/
</style>
</head>
<body>
<div class="setup">
<h1>Center</h1>
<div style="margin: auto; width:100px;">
<div class="image"> </div>
<div class="credit">Image provided by Etaoin Shrdlu, professor of
anthropology</div>
</div>
<div class="caption" style="margin: auto;">
<p>This is a picture of a mandrill, often used as a test image for
graphic displays.</p>
<p>This structure consists of an outer div styled as display: table so
that it uses the shrink-to-fit width based on its content and can
optionally be centered on the window. The image is styled as display:
block so that it can be centered within the outer div via left and right
margins: auto. The credit is styled with text aligned to the right and
with the line containing the text centered on the outer div. The
max-width of the credit is set to the width of the image. Combined with
the shrink-to-fit property of the outer div, this aligns the text with
the right edge of the image. The caption paragraphs are placed within an
inner div which is centered on the outer one (thus providing a common
centerline to the image and caption). It is limited via max-width,
specified in ems, to the same width permitted for paragraphs in the page
environment. All other styling represents cosmetics not required to meet
the objective.</p>
</div>
</div>
<h1>Floating Image Right:</h1>
<div class="setup" style="width:100px; float:right;">
<div class="image"> </div>
<div class="credit">Image provided by Etaoin Shrdlu, professor of
anthropology</div>
</div>
<div class="caption" style="float:right;">
<p>This is a picture of a mandrill, often used as a test image for
graphic displays.</p>
<p>This structure consists of an outer div styled as display: table so
that it uses the shrink-to-fit width based on its content and can
optionally be centered on the window. The image is styled as display:
block so that it can be centered within the outer div via left and right
margins: auto. The credit is styled with text aligned to the right and
with the line containing the text centered on the outer div. The
max-width of the credit is set to the width of the image. Combined with
the shrink-to-fit property of the outer div, this aligns the text with
the right edge of the image. The caption paragraphs are placed within an
inner div which is centered on the outer one (thus providing a common
centerline to the image and caption). It is limited via max-width,
specified in ems, to the same width permitted for paragraphs in the page
environment. All other styling represents cosmetics not required to meet
the objective.</p>
</div>
</div>
<div class="setup" style="float:left; width:100px">
<h1>Floating Image Left:</h1>
<div class="image"> </div>
<div class="credit">Image provided by Etaoin Shrdlu, professor of
anthropology</div>
</div>
<div class="caption" style="float:left;">
<p>This is a picture of a mandrill, often used as a test image for
graphic displays.</p>
<p>This structure consists of an outer div styled as display: table so
that it uses the shrink-to-fit width based on its content and can
optionally be centered on the window. The image is styled as display:
block so that it can be centered within the outer div via left and right
margins: auto. The credit is styled with text aligned to the right and
with the line containing the text centered on the outer div. The
max-width of the credit is set to the width of the image. Combined with
the shrink-to-fit property of the outer div, this aligns the text with
the right edge of the image. The caption paragraphs are placed within an
inner div which is centered on the outer one (thus providing a common
centerline to the image and caption). It is limited via max-width,
specified in ems, to the same width permitted for paragraphs in the page
environment. All other styling represents cosmetics not required to meet
the objective.</p>
</div>
</body>
</html>
The image "width" is defined in .image (instead of using real images)
and the width of that amount must be changed in each div.
<div class="setup" style="float:left; width:100px">
I'll toy with it again when I get more time.
