XHTML / CSS

Spht · September 25, 2004, 01:47 AM

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

<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

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 · September 25, 2004, 01:49 AM

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 · September 25, 2004, 02:55 AM

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 · September 25, 2004, 10:38 AM

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 · September 25, 2004, 10:57 AM

Quote from: Magickian on September 25, 2004, 02:55 AM
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.

Quote from: peofeoknight on September 25, 2004, 10:38 AM
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 · September 25, 2004, 11:06 AM

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 · September 25, 2004, 11:11 AM

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 · September 25, 2004, 11:13 AM

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 · September 25, 2004, 05:15 PM

Why not something like this?

CSS:

Code Select


.picture {
   border: 1px solid black;
}

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

XHTML:

Code Select


<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 · September 25, 2004, 06:29 PM

Quote from: dxoigmn on September 25, 2004, 05:15 PM-

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 · September 26, 2004, 02:28 AM

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