XHTML writing text on image, full table not showing

[boardtc]

I am drawing text on an image in the top left corner. I want the code to be XHTML. The text shows fine but only a little bit of the image shows as opposed to the whole amount. I've experimented for ages with this and my current code is:

<table id="fullheighttable">
<tr><td class="photoHeight" align="left" valign="top" style="background-image: url(/images/mypix.jpg);">
<b>My text here</b>
</td></tr></table> 

#fullheighttable {
	border:0;
	padding:0;
	height:100%;
} 

.photoHeight td {
	width: 801;
	height: 599;
}

Any advice appreciated.

 

[Foamcow]

You've set the image as a background so it will have no effect on the size of the table cell.

Your CSS doesn't specify units for the cell size. It should be

.photoHeight td {
    width: 801px;
    height: 599px;
}

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[boardtc]

Good spot. I added the px units but it has not solved the problem. I am still only seeing the top left of the image with the text on it.

 

[feherke]

Hi

There is no [tt]td[/tt] child node of the node with classname photoHeight. Maybe :

td.photoHeight {
    width: 801px;
    height: 599px;
}

Feherke.

http://rootshell.be/~feherke/

 

[boardtc]

That helped! progress, thank you. I saw the full height but not the full width of the image. I added a width, which worked.

Then I noticed that removing the height: 100% had no effect.

I resized as it was showing too wise in IE. Final code:

#fullheighttable
{
border:0;
padding:0;
width:700px;
} 

td.photoHeight {
	width: 700px;
	height: 523px;
}

fullheighttable a bit of a misnomer now. Thanks _very_ much for your help.

 

[Foamcow]

fullheighttable a bit of a misnomer now.

Which is a lesson in why you should use classes and ids that don't indicate what something looks like but rather what the thing is

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[ChrisHunt]

What's the table there for anyway? You could get the same effect like this:

<div class="photo" style="background-image: url(/images/mypix.jpg);">
  My text here
</div>

with this CSS:

.photo {
  margin:0;
  padding: 0;
  height: 523px;
  width: 700px;
  font-weight: bold;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

Chris don't you mean...

<div class="photo">
  My text here
</div>

with this CSS:

.photo {
  background-image: url(/images/mypix.jpg);
  margin:0;
  padding: 0;
  height: 523px;
  width: 700px;
  font-weight: bold;
}

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[boardtc]

Ah, yes, works great! Much cleaner. I was using a table because I did not know a better way, cheers. Thanks for taking the time to teach me.

 

[boardtc]

I'm curious what would you do it you wanted the text in another position on the image?

 

[Foamcow]

You could either apply padding to the div or set the div to be position:relative then wrap the text in a span or p tag and absolutely position it.

<div class="photo">
  <p>My text here</p>
</div>

.photo {
  position:relative;
  background-image: url(/images/mypix.jpg);
  margin:0;
  padding: 0;
  height: 523px;
  width: 700px;
  font-weight: bold;
}

.photo p {
  position:absolute;
  bottom:10px;
  right:10px;
}

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[ChrisHunt]

Chris don't you mean...

I was assuming that the OP might have several pictures to show, using the same HTML/CSS construct in each case. So the CSS which applies to every image goes in the stylesheet, while the URL of the actual image to show goes in an inline style attribute.

If you don't need to show multiple images, putting everything in the stylesheet is much neater.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd