Log in

View Full Version : image with special border (without width)



rufus
01-12-2008, 11:24 PM
how can i get this kind of border :

http://www.picdo.net/Fichiers/6262862d6135ab93343c77027e43c02/blocSable_b_2595.jpg

with no border added to img , only with span or div
I don't know at all image width and I cannot know it (for a photo forum or members galleries with no size limit)

something like



<div class="bord2">
<div class="bord1">
<img src="image.jpg" alt="" />
</div>
</div>
.bord1{
border:4px solid #ffffff;text-align:center;
padding:30px;background-color:#dddddd;}
.bord2{border:2px solid #000000;text-align:center;padding:0px;}





if you know how to do it ??
thank you

Medyman
01-13-2008, 04:02 PM
What's wrong with what you have there?

to get rid of the border around the image:


img { border-style:hidden; }

BLiZZaRD
01-13-2008, 04:44 PM
CSS:



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




<span><img src= "main.jpg"></span>


If you want a third color, add padding and make that third color your page background as it will show through ;) Adjust the border sizes and colors to suit your needs.

rufus
01-13-2008, 05:04 PM
thank you BLiZZaRD !
it works fine in that way but I am getting a strange padding-bottom (4 or 5 pixels ?) with safari, opera and firefox, not with IE but who cares for IE ? :-)

I have to add to the span
font-size : 0px; and it is great !!

BLiZZaRD
01-13-2008, 05:18 PM
Glad it works, sorry I left out the span fix, it happens as a result of the auto width attribute for some reason. Good catch.