PDA

View Full Version : border around jpg images

sandy
7-2-03, 10:54 AM
I post many picture pages on my site, and, the pictures, 355X237, all butt up agianst each other. I would like to add a thin white border (look like a picture frame) to separate each picture (2 images per row currently are displayed). I found the border="x" html command, but the image shows up in black. I also see there is a border-color= command as well.

The question is how do I combine the border size and border color into the command?

The current html code is as follows:

<IMG SRC="http://www.site.com/image.jpg">

Any help will be appreciated.
moncur
7-2-03, 02:09 PM
<IMG SRC="http://www.site.com/image.jpg" border="5">

Border size can be any size you want. Some browsers dont read the code the same way, see this Tutorial (http://www.echoecho.com/htmlimages04.htm)
hyper
7-4-03, 11:01 AM
CSS is the way to go
Insert this into your <head> tag

<style type="text/css">
<!--
.PicBorder { border: #FFFFFF;
border-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px}
-->
</style>

And then give your image the class name...

<img src="image.jpg" width="355" height="237" class="PicBorder" alt="Image with 2 pixel white border">

This will give you a pretty basic border but if you have a look around at a few tutorials online you can do some pretty fancy stuff.
sandy
7-4-03, 12:31 PM
Thanks Hyper,

I'll give your suggestion a tryout!

Thanks again.
hyper
7-4-03, 08:11 PM
No problems.
You can also link to an external css text style.
Use this in your head tag
<link rel="stylesheet" href="yourstylesheet.css" type="text/css">
And put this into a plain text file and save it with a .css extension and put it in to the same location as your html doc.

.PicBorder { border: #FFFFFF;
border-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px}

Then use the same html img tag as previously specified.
If you link several pages in your web site to this style sheet and you want to change the border attributes, all you have to do is change the .css file and all the borders on your site will change!
I set up all my default <p> <h1> <h2> etc. tags this way, then when my client wants a change to the text colour/size it takes next to no fuss at all!
sandy
7-4-03, 11:30 PM
Thanks again Hyper. Your info did work just fine with the one page I re-worked. Your current suggestion linking to other pages with the link will work great for most of my pages. IT will definitely work for pages going forward when I re-size to a consistent size. Right now I have some at 350X233, some at 355X237 and some at 300X200. Going forward I'll try some consisentcy, and that will make the links work a lot better :)

Thanks again for all of your help and recommedations.