mirror of
https://github.com/Pathduck/pathduck.github.io.git
synced 2025-12-29 11:45:20 -05:00
97 lines
7.4 KiB
HTML
Executable File
97 lines
7.4 KiB
HTML
Executable File
<!-- --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
<title>Centered Image Gallery with captions - Spartanicus' Web tips</title>
|
|
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
|
|
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
|
|
<link rel="stylesheet" href="css/speech.css" type="text/css" media="aural,speech">
|
|
<style type="text/css">
|
|
#gallery{text-align:center}
|
|
#gallery p{display:inline}
|
|
#gallery span{margin:0 5px 5px 5px;vertical-align:top;width:172px;display:table-cell;display:inline-table}
|
|
#gallery p img{margin-bottom:5px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="head"><span></span>
|
|
</div>
|
|
<div id="wrap"><span id="spart"></span>
|
|
<div id="content">
|
|
<div id="title"><span></span>
|
|
<h1>Centered Image Gallery with captions</h1>
|
|
</div>
|
|
<div class="group">
|
|
<h2>Introduction</h2>
|
|
<p>Centering an image gallery with captions beneath the images that works in most browsers using appropriate markup and <abbr>CSS</abbr> for the presentation is not as straightforward as it should be.</p>
|
|
</div>
|
|
<div class="group">
|
|
<h2>Functional markup</h2>
|
|
<p>Around each image/caption pair an image gallery should provide spacing in the visual domain, or pauses in the audio domain. This functionality should be provided via an <abbr>HTML</abbr> element who's default properties provide this. Paragraph markup provides the required spacing and/or pause around each image/caption pair, and it's use is semantically appropriate since it marks up the textual alternative for the image and the caption.</p>
|
|
</div>
|
|
<div class="group">
|
|
<h2>Styling</h2>
|
|
<p>Horizontal alignment and distribution of image & caption pairs requires inline-block behaviour, this is provided by the <abbr>CSS</abbr> 2.0 <code>inline-table</code> or the <abbr>CSS</abbr> 2.1 <code>inline-block</code> display values. One or both is/are supported by <abbr>IE</abbr>5.5+, Opera5+ and <abbr>KHTML</abbr> browsers (Safari, iCab, Konqueror etc.). <abbr>MS</abbr> Internet Explorer first introduced <code>inline-block</code> as a proprietary extension in <abbr>IE</abbr>5.5. Recent Opera's and <abbr>KHTML</abbr> based browsers also support <code>inline-block</code> now that it has been incorporated in the <abbr>CSS</abbr> 2.1 specification. By specifying both values we can cover a fair number of browsers: <code>display:inline-table;display:inline-block</code>.</p>
|
|
<div class="group">
|
|
<h3>What about Gecko based browsers?</h3>
|
|
<p>Firefox, Netscape6+, Mozilla etc. use the Gecko rendering engine which does not support <code>inline-table</code>. Recent Gecko versions have experimental support for inline-block type behaviour via the proprietary <code>-moz-inline-block</code> and <code>-moz-inline-box</code> values, but at the time of writing this support is so buggy that it's unusable for this purpose. Fortunately current Gecko's have a <abbr>CSS</abbr> table bug that can be exploited to achieve inline-block type behaviour, if we specify the following sequence: <code>display:table-cell;display:inline-table;display:inline-block</code>, Gecko based browsers will also play ball.</p>
|
|
</div>
|
|
<div class="group">
|
|
<h3>Vertical alignment</h3>
|
|
<p>To get captions wider than the image to wrap the inline-blocks have been given an explicit width, inline-block type elements default to "shrink to fit" behaviour. In the demo below, the longer caption on the first image & caption pair demonstrates vertical alignment. Opera defaults to top aligning the image & caption pairs, IE needs a <code>vertical-align:top</code> specified on the spans to fall in line with Opera. Gecko based browsers bottom align the image & caption pairs. I presume that this is due to the fact that we are relying on a Gecko <abbr>CSS</abbr> table bug. I'm not aware of a method to get Gecko to top align.</p>
|
|
</div>
|
|
</div>
|
|
<div class="group">
|
|
<h2>Demo</h2>
|
|
<div id="gallery">
|
|
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p>
|
|
<p><span><img src="250px.gif" alt="Butterfly"><br>250 Pixels, 250 Pixels, 250 Pixels, 250 Pixels</span></p>
|
|
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
|
|
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
|
|
<p><span><img src="300px.gif" alt="Butterfly"><br>300 pixels</span></p>
|
|
<p><span><img src="b3tatv.gif" alt="Butterfly"><br>A Butterfly</span></p>
|
|
<p><span><img src="b3tatv.gif" alt="Butterfly"><br>A Butterfly</span></p>
|
|
</div>
|
|
<p><b>The above demo was tested with:</b></p>
|
|
<ul>
|
|
<li>Opera 5.12, 6.04, 7.11, 7.51, 8.01</li>
|
|
<li><abbr>IE</abbr> 5.5, 6.0</li>
|
|
<li>Firefox 0.9.2</li>
|
|
<li>Mozilla 1.5</li>
|
|
</ul>
|
|
<p>I am not able to test with <abbr>KHTML</abbr> based browsers (Safari, iCab, Konqueror), but afaik they support <code>inline-table</code> and reasonably recent versions also support <code>inline-block</code>, so it should work in those browsers also.</p>
|
|
<p><b><abbr>CSS</abbr> code</b></p>
|
|
<div class="code">
|
|
<div><code>#gallery{text-align:center}</code></div>
|
|
<div><code>#gallery p{display:inline}</code></div>
|
|
<div><code>#gallery span{margin:0 5px 5px 5px; vertical-align:top; width:172px; display:table-cell; display:inline-table; display:inline-block}</code></div>
|
|
<div><code>#gallery p img{margin-bottom:5px}</code></div>
|
|
</div>
|
|
<p><b><abbr>HTML</abbr> code</b></p>
|
|
<div class="code">
|
|
<div><code><div id="gallery"></code>
|
|
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p></code></div>
|
|
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
|
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
|
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
|
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
|
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
|
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
|
</div><code></div></code>
|
|
</div>
|
|
</div>
|
|
<div class="group">
|
|
<h2>Footnotes</h2>
|
|
<p>There are some cross browser differences with regard to the horizontal spacing between the image & caption pairs.</p>
|
|
<p>For those who want to experiment with the method described above so that it could also be used for elements that default to block level like div, this <a href="http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm">IE block level element inline-block hack</a> may be of interest.</p>
|
|
</div>
|
|
<div class="group">
|
|
<h2>Credits</h2>
|
|
<p>Thanks to <b>Carl Lindmark</b> who supplied the hack that extended the original code to work in Gecko based browsers.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p id="nav"><a href="index.htm">Home</a></p>
|
|
</body>
|
|
</html>
|