another problem with images...

[Halcrow]

I'm having trouble with CSS and image galleries.

I want display an image with two borders - the first to be a solid line around the image, and the second to be another solid line roughly 30px away from the edges.

I started to tackle this problem by setting the padding around the image to 0 and the border to 1px solid. That get's my first border. Now here's the problem: I put the image inside a div tag, and set the padding of this div to 30px, border 1px solid. Instead of giving me a nice "frame" around my image, the div took the same width as its parent, and gave me a frame with too great a width. My images are of various sizes so I cannot simply set the width of my div tag.

What can I do to ensure that for any image, I get a nice frame of this nature?

Calum

 

[Vragabond]

Have you tried setting the margin for the second div? Margin should make it 30px smaller than the parent element.

 

[Halcrow]

The problem there is that by setting the margin to a fixed size, the border of the div will never move - I want it to adjust to the size of each image (what I'm trying to do is give the impression of a mounted picture - the image sizes vary in width and height though)

Thanks for the suggestion.

Calum

 

[ChrisHunt]

Try using a <span> instead of a <div>.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[LFI]

You may have to set the position STYLE attribute of the DIV to absolute. In testing, I experienced the same as you (the right border of the DIV being all the way to the right of the BODY).

Although absolute-ly positioned elements come with their own set of problems (i.e., making sure other elements don't overlap them), the following STYLEs worked for me (in IE6):

<style>
div{
 position:absolute;
 padding:1cm;
 border:1 solid;
}

img{
 border:1 solid;
 padding:0cm;
}
</style>

'hope that helps.

--Dave

 

[Halcrow]

Thanks for the tip - it nearly works, but for some reason when I change padding-left/right nothing happens.

I'll keep thinking though...

 

[vongrunt]

Can you simply wrap image into floating DIV?

<style type="text/css">
.imgframe
{	float: left;
	border: solid blue 4px;
	padding: 8px;
}

.imgframe img
{	border: solid red 4px;
	padding: 4px;
}
</style>

<div class="imgframe"><img src="foo.gif"></div>

 

[Halcrow]

thanks for the tip. I tried it but still had the problem that the border was the full width of the containing div.

The float: left; also made my scrolling menu (see menus and images post!), located underneath, jump up the screen when I hovered over it.

Calum