position of text on image

[Roderik]

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

[dorayme]

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

>
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

[Roderik]

dorayme schreef:

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

>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

[dorayme]

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

dorayme schreef:

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

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]

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

[Jonathan N. Little]

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