Hi,

I guess I am missing something. I tried to put a caption on my photo (on
the bottom) but the caption appears to be a bit higher and overshooting
the area of the image with a few pix.

You can see it on:
http://www.roderik.net/caption.php


Any idea btw. whether some standard JS framework provides a function for
slide in caption as you can see on the images of:
http://www.guardian.co.uk/


--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuurde elektronica

In article <48b43f42$1_1@mk-nntp-2.news.uk.tiscali.com>,
Roderik <r.emmerink@tiscali.co.uk> wrote:

>
> I guess I am missing something. I tried to put a caption on my photo (on
> the bottom) but the caption appears to be a bit higher and overshooting
> the area of the image with a few pix.
>
> You can see it on:
> http://www.roderik.net/caption.php
>

You could try:

<div class="richimage"><img alt="photo"
src="/lib/img/latest/chaekith-brighton-shore.jpg" title="This is the
title">
Some text on the image
</div>

instead of your HTML.

And

..richimage img {display: block;--

instead of your

..richimage {
position:relative;
--

.richimage p {
position: absolute;
left: 0;
bottom: 0;
padding: 7px;
background:#000;
color:#fff;
opacity:0.7;
--

--
dorayme

dorayme schreef:
> In article <48b43f42$1_1@mk-nntp-2.news.uk.tiscali.com>,
> Roderik <r.emmerink@tiscali.co.uk> wrote:
>
>> I guess I am missing something. I tried to put a caption on my photo (on
>> the bottom) but the caption appears to be a bit higher and overshooting
>> the area of the image with a few pix.
>>
>> You can see it on:
>> http://www.roderik.net/caption.php
>>
>
> You could try:
>
> <div class="richimage"><img alt="photo"
> src="/lib/img/latest/chaekith-brighton-shore.jpg" title="This is the
> title">
> Some text on the image
> </div>
>
> instead of your HTML.
>
> And
>
> ..richimage img {display: block;--
>
> instead of your
>
> ..richimage {
> position:relative;
> --
>
> .richimage p {
> position: absolute;
> left: 0;
> bottom: 0;
> padding: 7px;
> background:#000;
> color:#fff;
> opacity:0.7;
> --
>

I tried that now but then the caption comes under the image instead of
on the image. I guess some people will favour that but it was not my
intention.

--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuurde elektronica

In article <48b49b6c_2@mk-nntp-2.news.uk.tiscali.com>,
Roderik <r.emmerink@tiscali.co.uk> wrote:

> dorayme schreef:
> > In article <48b43f42$1_1@mk-nntp-2.news.uk.tiscali.com>,
> > Roderik <r.emmerink@tiscali.co.uk> wrote:
> >
> >> I guess I am missing something. I tried to put a caption on my photo (on
> >> the bottom) but the caption appears to be a bit higher and overshooting
> >> the area of the image with a few pix.
> >>
> >> You can see it on:
> >> http://www.roderik.net/caption.php
> >>
> >
> > You could try:
> >
> > <div class="richimage"><img alt="photo"
> > src="/lib/img/latest/chaekith-brighton-shore.jpg" title="This is the
> > title">
> > Some text on the image
> > </div>
> >
> > instead of your HTML.
> >
> > And
> >
> > ..richimage img {display: block;--
> >
> > instead of your

>
> I tried that now but then the caption comes under the image instead of
> on the image. I guess some people will favour that but it was not my
> intention.

Ah, you actually want it on the image! It will be less readable but I
won't go into that. Perhaps you can explain your original words:

" but the caption appears to be a bit higher and overshooting the area
of the image with a few pix". What browsers are we talking and what
quite are you saying, bit higher than what? Overshooting what exactly?

--
dorayme

Roderik wrote:
> Hi,
>
> I guess I am missing something. I tried to put a caption on my photo (on
> the bottom) but the caption appears to be a bit higher and overshooting
> the area of the image with a few pix.
>
> You can see it on:
> http://www.roderik.net/caption.php
>
>
> Any idea btw. whether some standard JS framework provides a function for
> slide in caption as you can see on the images of:
> http://www.guardian.co.uk/
>
>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Test</title>

<style type="text/css">
.richimage {
margin: 0; padding: 0;
position: relative; background: #ff0;
--
.richimage img {
/* else img inline and will have descender space */
display: block;
--
.richimage p {
position: absolute;
margin: 0; padding: 7px;
left: 0; bottom: 0;
color: #fff; background: #000;
opacity:0.7;
--

.richimage img.normal { display: inline; --


</style>

<script type="text/javascript">
</script>

</head>
<body>
<h2>An example on image captions with css image as block</h2>
<div class="richimage">
<img alt="photo"
src="http://www.roderik.net/lib/img/latest/chaekith-brighton-shore.jpg">
<p>Some text on the image</p>
</div>

<h2>If image is inline you get a space for descenders</h2>
<div class="richimage">
<img class="normal" alt="photo"
src="http://www.roderik.net/lib/img/latest/chaekith-brighton-shore.jpg">
<p>Some text on the image</p>
</div>
</body>
</html>



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little schreef:
> Roderik wrote:
>> Hi,
>>
>> I guess I am missing something. I tried to put a caption on my photo
>> (on the bottom) but the caption appears to be a bit higher and
>> overshooting the area of the image with a few pix.
>>
>> You can see it on:
>> http://www.roderik.net/caption.php
>>
>>
>> Any idea btw. whether some standard JS framework provides a function
>> for slide in caption as you can see on the images of:
>> http://www.guardian.co.uk/
>>
>>
> [...] .richimage img {
> /* else img inline and will have descender space */
> display: block;
> -- [...]

Thanks that did it. I was suppossing that there wouldn't be descender
space after setting margins and paddings to 0. Or has it to do with
line-height?

--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuurde elektronica

Roderik wrote:
> Jonathan N. Little schreef:
>> Roderik wrote:
>>> Hi,
>>>
>>> I guess I am missing something. I tried to put a caption on my photo
>>> (on the bottom) but the caption appears to be a bit higher and
>>> overshooting the area of the image with a few pix.
>>>
>>> You can see it on:
>>> http://www.roderik.net/caption.php
>>>
>>>
>>> Any idea btw. whether some standard JS framework provides a function
>>> for slide in caption as you can see on the images of:
>>> http://www.guardian.co.uk/
>>>
>>>
>> [...] .richimage img {
>> /* else img inline and will have descender space */
>> display: block;
>> -- [...]
>
> Thanks that did it. I was suppossing that there wouldn't be descender
> space after setting margins and paddings to 0. Or has it to do with
> line-height?
>
No it has to do with an inline element has space reserved for ascenders
and descenders and diacritic marks.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com