Menu
Community /Pin to ProfileBookmark
@NogDogNov 27.2005 — #Is this the effect you want?
CSS:
HTML:
@NogDogNov 27.2005 — #This seems to work pretty well in both FF and IE. Maybe you can play around with it to get what you need?
Photo box
Last one for tonight…..
I am using a class so I can store an image and it’s caption within a bordered area:
[CODE].photobox {
text-align: center;
font-style: italic;
background-color: #FFFFFF;
font-size: 80%;
border: 1px solid #000000;
padding: 1;
}
Its usage is as such:
[CODE]<div class=”photobox”>
<a href=”image_source.jpg” target=”_blank”>
<img src=”thumbnail.jpg” />
<br />
Image caption
</div>
My problem is that the width of the box is stretching. For example i have an image that is 125 px wide held in a column that is 150 px wide. When I use the photobox class on the image, the box is stetching to fill the whole column, leaving a lot of white space to the sides of the image, which I do not want. I cannot specify a width, as different sized images will be used.
Am I missing an instruction somewhere? This did work, but then stopped, seemingly of its own accord.
Sign in
to post a comment4 Comments(s) ↴
0
@NogDogNov 27.2005 — #Is this the effect you want?CSS:
<i>
</i>.photobox {
text-align: center;
font-style: italic;
background-color: #FFFFFF;
font-size: 80%;
padding: 0;
margin: 0;
}
.photobox * {
display: block;
margin: 0;
padding: 0;
text-align: center;
}
.photobox img {
padding: 1px;
border: solid 1px black;
margin: 0 auto;
}
HTML:
[code=html]
<div class="photobox">
<a href="image_source.jpg" target="_blank">
<img src="thumbnail.jpg" alt="" />
</a>
<p>Image caption</p>
</div>
[/code]0
@NogDogNov 27.2005 — #This seems to work pretty well in both FF and IE. Maybe you can play around with it to get what you need?[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
div.photobox {
width: 180px;
background-color: #cc99cc;
text-align: center;
font: 10px arial, sans-serif;
font-style: italic;
padding: 10px 2px 0 2px;
}
.photobox img {
margin: 3px;
padding: 1px 1px 1.6em;
border: solid 1px black;
background-color: white;
}
.photobox p {
text-align: center;
position: relative;
margin: 0;
padding: 0;
line-height: 1em;
position: relative;
top: -2em;
}
-->
</style>
</head>
<body>
<div class="photobox">
<img src="leaves.png" alt="" width="150" height="120">
<p><a href="#">The caption</a></p>
<img src="leaves.png" alt="" width="140" height="120">
<p><a href="#">The caption</a></p>
<img src="leaves.png" alt="" width="145" height="120">
<p><a href="#">The caption</a></p>
</div>
</body>
</html>
[/code]