Multiple borders around an image

[TedM]

I have a photo upload site and would like to put borders around the uploaded photos. The thing is that the size of the photos differs in size, depending on what size photo is uploaded. Because of this I cannot set a definite width. So I have done the following:

CSS:
.mainphoto
{
float: none;
}

div.mainphoto img { border: 6px solid #cddcf6; }

HTML:
<div class="mainphoto"><img src="anyphoto.jpg"></div>

This works for one border, however I would like to put multiple borders around the image. From the photo out, I would like to have a 1px black border and then have the 6px blue border.

I thought by duplicating the above it would do this but it only shows the border of the <div> closest to the image.

I have also tried to apply the 1px black border on the <img> via a class statement and the 6 px border on the containing <div> element but this does not show the black border.

Any ideas?

<btw - CSS newbie, be gentle :)>

[4hero]

Hi Ted,

You could possibly try adding a span inside the div like this:

<div class="mainphoto"><span><img src="anyphoto.jpg" width="120" height="120"></span></div>

and the css:

div.mainphoto {float: none;}
div.mainphoto span {border:6px solid #cddcf6; display:block; float:left; }
div.mainphoto img {border:1px solid #000}

worth a shot :)

[TedM]

Oops... by leaving out the fact that the photo is centered I may have led you in a wrong direction, sorry.

By applying the above code the photo now shows to the left of the page.

By removing the float:left; from <span> centers it once again but the blue border is full page width.

By removing both the display:block; and float:left; from <span> it shows centered in both IE and Firefox however (why is there always an 'however' :)) in Firefox the blue border only shows at the bottom of the photo and up about 5% on each side.

[benihana]

put the 1px border on the image itself.

img {
border:1px solid #000;
}

and the blue on the div. no need for a span.

[TedM]

No, putting the 1px border on the image itself does not work. It puts the border on all the other page images but not this one. :(

[londrum]

can't you just do a div with 1px padding, and a 6px blue border? if you make the background color of the div black then it should give you what you want.

it won't look too pretty while the photo's loading though - as you'll have a big black box with thick blue border.

[TedM]

This did not work. It causes the border to go full page wide and not shrinkwrap the image:

.mainphoto
{
float: none;
padding: 1;
background: #000000;
border: 6px solid #cddcf6;
}

This did not work either. Did not affect original in any way:

.mainphoto
{
float: none;
}

div.mainphoto img {padding: 1; background: #000000; border: 6px solid #cddcf6;}

If you meant something else please explain.

[doodlebee]

Sort of what the other guy said...

I just had this issue witha client - they wanted a graphic border. Image size was fluid, so I was ta aloss as to what to do. My solution was this:

img {
border:1px solid #000;
}

div.border {
background-color:blue;
border:solid 1px #000;
padding:6px;}

<div class="border">
<img src="image.jpg" />
</div>

What this does is place the image within a div - the div will automatically size itself to the contents (the image), and have a 6 pixels of padding all the way around - showing the blue background behind it. The div itself has a black border - as does the image.

HTH!

[londrum]

or...

img{padding:0;margin:0;border:none}
div.photo{padding:1px;background:black;border:6px solid blue}

the code will look like this:

<div class="photo"><img src="blah blah" height="10" width="" alt="" /></div>

[edit - sorry, i just noticed that i've said more or less the same thing as the last guy!]

[TedM]

While both of the above examples shows the required borders they force the border full page wide instead of wrapping the photo. :(

btw, doodlebee's code shows a 3rd border (1px black / 6px blue / 1px black) which is even cooler than only two borders!

Any ideas on how to get this one to wrap the photo?

Thanks for all!

[londrum]

A-ha! I have solved it. and the good news is that you don't even need the <div>.
all you need to do is put a class on the image

<html><head>
<style>
.mainphoto{border:6px solid #cddcf6;padding:1px;background:black}
</style>
</head><body>

<img src="anyphoto.jpg" height="50" width="50" class="mainphoto">

</body></html>

[londrum]

[edit -- actually, i've just noticed that this only works in firefox. it doesn't work in IE.
but we're nearly there!]

[londrum]

okay... this works in both IE and firefox

<html><head><style>
.mainphoto{padding:6px;background:#cddcf6;float:left}
.mainphoto img{border:1px solid black}
</style></head><body>
<div class="mainphoto"><img src="blank.jpg" height="50" width="50"></div>
</body></html>

but the float might cause you problems

[TedM]

Yes, while the borders work the photo unfortunately displays to the left and any changes made to the float cause the border to go full page. :(

[doodlebee]

Ahh...add a flaoting element:

img {
border: 1px solid #000;
}
.border {
background-color:blue;
border: 1px solid #000;
padding:6px;
float: left;
clear: left;
}

<div class="border">
<img src="Image.gif" width="300" height="300" />
</div>

[doodlebee]

sorry - I'm a big fat dummy. I see that someone else already offered this, but it's messing with your centering.

Try this:

<style type="text/css">

img {
border: 1px solid #000;}

.centerp {
padding:1% 25%;
background: #EEE;
float: left;
}

.border {
background-color:blue;
border: 1px solid #000;
padding:6px;
float:left;
clear:left;}

</style>

</HEAD>
<BODY>

<div class="centerp">
<div class="border">
<img src="Image.gif" width="300" height="300" />
</div>
</div>
</BODY>

maybe that'll help? you'll have to adjust the padding...

[jessejump]

img { border: 6px solid red; }
span {
border: green solid 5px;
width: auto;
float: left; }

<span><img src= "main.jpg" width="200" height="120"></span>

put a class on the IMG if necessary

[TedM]

jessejump, I'm sorry but this does not center.

doodlebee, yes, this does work however I'm not keen on the centering aspect with the padding adjustments. It seems to differ for each browser size and hard to find a happy medium.

I'm at fault again for perhaps leading astray. When stating in above replies that the padding was going full page wide I should have been saying that it was going full COLUMN wide. Sorry.

Thanks for all!

[doodlebee]

Could you do us a favor and post *all* of your code - CSS *and* HTML? Maybe there's something else you've got in there that's conflicting with your image problem. It would help to see what you've got already.

[londrum]

you could, of course, just create the images with a 1px black border around them in the first place. and then just use a blue border like normal.
that would save all the problems

[TedM]

Sorry for the delay :)

You will require an image to view this properly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

body {
margin:0px;
text-align:center;
padding:0px;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
color:#000000;
background-color:fff;
}

#header {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#3b61a7;
height:60px;
border-style:solid;
border-color:black;
border-width:1px 0px;
line-height:20px;
voice-family: "\"}\"";
voice-family:inherit;
height:60px;
}

body>#header {height:60px;}

#footer {
margin:0px 0px 0px 0px;
padding:0px 0px 2px 0px;
background-color:#3b61a7;
height:20px;
border-style:solid;
border-color:black;
border-width:1px 0px;
line-height:20px;
voice-family: "\"}\"";
voice-family:inherit;
height:20px;
}

body>#footer {height:20px;}

#content {
margin:12px 160px 12px 2px;
padding:0px;
}

#sidebar {
position:absolute;
top:76px;
right:8px;
width:140px;
padding:0px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family:inherit;
width:140px;
}

body>#sideBar {width:145px;}

#menu {
text-align: left;
width: 140 px;
}

.mainphoto
{
float: none;
}

div.mainphoto img { border: 6px solid #cddcf6; }

</style>

</head>

<body>

<div id="header"> header here </div>

<div id="content">

<div class="mainphoto"> <img src="photo.jpg" alt="image"></img></div>

</div>

<div id="sidebar"> menu here </div>

<div id="footer"> footer here </div>

</body>
</html>