Forum Moderators: not2easy
I have a thumbnail gallery, each thumbnail is a absolutely positioned link box (<a>), containing <img> (thumbnail itself) and some text (caption).
I want to get rid of "width: ..." in each box style, because it is always equal to contained <img> width, and therefore is useless duplicated information.
Is there any way to make the containing box to "wrap" contained text, without setting specific "width"?
Hope I make sense. Here's the example:
*********** CODE BEGIN
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
a {
position: absolute;
text-decoration: none;
border: 1px red solid;
overflow: hidden;
}
a img {
border: none;
}
a span {
display: block;
}
-->
</style>
</head>
<body>
<p>
<a href="i.jpg" style="left: 10px; top: 10px; width: 150px;"> <img src="t.gif" width="150" height="150" /> <span>This is how the caption text should be - carrying over to the next line on reaching image boundary.</span></a><br />
<a href="i.jpg" style="left: 250px; top: 10px; "> <img src="t.gif" width="150" height="150"/> <span>And this is what happens if I remove 'width: ...' from box stylte - text just stretches the box.</span></a><br />
</p>
</body>
</html>
*********** CODE END
Alexei.
a {
position: absolute;
text-decoration: none;
border: 1px red solid;
overflow: hidden;
width:150px;
}
I've found out that simply moving specific width into inline style of <a> from <img> attribute gives the desired result. For peace of mind, I've added "a img { width: inherit; }" into global styles. :)
But this solution is not very elegant, since one of image dimensions is set in HTML, while the other - in CSS.
*********** CODE BEGIN
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
a {
position: absolute;
text-decoration: none;
border: 1px red solid;
}
a img {
border: none;
width: inherit;
}
a span {
display: block;
}
-->
</style>
</head>
<body>
<p>
<a href="i.jpg" style="left: 10px; top: 10px; width: 150px;"> <img src="t.gif" width="150" height="150" alt="text"/> <span>It was like that (duplication of width in a and img tags).</span></a><br />
<a href="i.jpg" style="left: 250px; top: 10px; width: 150px;"> <img src="t.gif" height="150" alt="text"/> <span>Now its like this - width is only in box (a) tag, and the result is the same.</span></a><br />
</p>
</body>
</html>
*********** CODE END
