position of text on image

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Roderik - 26 Aug 2008 18:37 GMT

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/

Signature

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

Reply to this Message

dorayme - 26 Aug 2008 23:28 GMT

> 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;
}

Signature

dorayme

Reply to this Message

Roderik - 27 Aug 2008 01:10 GMT

dorayme schreef:

>> 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
[quoted text clipped - 32 lines]
> 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.

Signature

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

Reply to this Message

dorayme - 27 Aug 2008 01:53 GMT

> dorayme schreef:
> >
[quoted text clipped - 20 lines]
> >
> > 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?

Signature

dorayme

Reply to this Message

Jonathan N. Little - 27 Aug 2008 16:28 GMT

> Hi,
>
[quoted text clipped - 8 lines]
> 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>

Signature

Take care,

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

Reply to this Message

Roderik - 28 Aug 2008 02:12 GMT

Jonathan N. Little schreef:

>> Hi,
>>
[quoted text clipped - 13 lines]
> 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?

Signature

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

Reply to this Message

Jonathan N. Little - 28 Aug 2008 03:41 GMT

> Jonathan N. Little schreef:
>>> Hi,
[quoted text clipped - 18 lines]
> 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.

Signature

Take care,

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2008

position of text on image