XHTML / CSS

[Spht]

I have a picture.  On top of the picture I have a table which describes the picture.  But the table has nothing to do with my question.  Get the picture?

It's set up like this:

Code Select Expand

<div style="background-image: url(myphoto);" class="photo">
   <table class="description">
       <tr>
           <td>mydescription</td>
       </tr>
   </table>
</div>

And in my styles.css:

Code Select Expand

div.photo
{
   background-repeat: no-repeat;
   background-attachment: scroll;
   height: 420px;
   width: 560px;
   border: 1px solid black;
}

This displays my 560x420 photo with a 1 pixel black border.  Instead of the border being put on the div, I want the border put on the background image, so I can make the div larger than the image, and the border will be around the image instead of the div.  I don't want to manually draw a border on the image.  Is there a 'background-border' type of thing?

[Spht]

Second, I want my description table to start at the bottom of the photo div, instead of the top.  Is there a 'table-position: bottom' type of thing?

[Magickian]

Doesn't look like there's one to me, you can specify where the div border points begin and end (border-top, border-right, etc), but then you would have to make all your images the same height/width.

[quasi-modo]

Don't use a background image then. Add the image in with the img tag, but then use style="z-index:-1;" so the contents around it, like the table cell, will slide over it. It will act like a background image but it will let you position it better and give you more control over the style.
http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex2
There is a css equiv to valign:
vertical-align: bottom;
Try that.

Personally I would ditch the tables and use divs but put them all in a class so the same set of properties can apply to them all.

[Spht]

Doesn't look like there's one to me, you can specify where the div border points begin and end (border-top, border-right, etc), but then you would have to make all your images the same height/width.

All my photos have the same dimentions.  I'm pretty sure you can only specify the width, style, and color of the border with those.

Don't use a background image then. Add the image in with the img tag, but then use style="z-index:-1;" so the contents around it, like the table cell, will slide over it. It will act like a background image but it will let you position it better and give you more control over the style.
http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex2
There is a css equiv to valign:
vertical-align: bottom;
Try that.

Personally I would ditch the tables and use divs but put them all in a class so the same set of properties can apply to them all.

I'll probably end up doing that.

Edit - vertical-align: bottom doesn't put my description table at the bottom of my "photo" div.  Switched to a div for description, and that doesn't push it to the bottom either.

[quasi-modo]

Well what you can do to move the div to the bottom is just do some positioning action. If the image is using the img tag you can just say margin-top:5px; postion:relative; or something like that, and the div should go right under that image. This is more like theorizing, I have to play with css to get it to do what I want . Css is a lot of trial and error, but I still love it.

[Spht]

It turns out the z-index: -1 isn't what I need.  My page is on top of one big div, so the image gets put behind that div when using z-index: -1.

[quasi-modo]

Well z-index will put higher elements above lower elelemtns. So just make sure the element you want to go over the image is higher then the image. The image could be z-index:4; and the lement you want over it 5 and it will put the five over the 4.

[dxoigmn]

Why not something like this?

CSS:

Code Select Expand


.picture {
  border: 1px solid black;
}

.picture_description {
  position: relative;
  top: -100;
  left: 20;
}


XHTML:

Code Select Expand


<div>
<img src="picture.jpg" class="picture" />
<div class="picture_description">
My description
</div>
</div>


That puts text over the photo, just remove the picture_description css stuff and it will be at the bottom of the photo.

[Spht]

-

Oh yeah!  You can use negatives!  All I needed to do was set my margin-top below zero to move the description div up!



Thanks for the help all.

[quasi-modo]

Ugh, I wish I knew  thats what you were trying to do before lol. I thought  this was going to be a lot of images arranged with text over them for some reason.

Nice cat btw