Center images within a photo frame

I saw a friend's site where it used a pre-bought package. It had nice photo
frames and a sutle drop shadow.

The site I'm working on has a lot of photos and I would like to set them off
this way.

What I did was make the frame with a drop. Drop shadow isn't looking good even
though I did a .png Anyway, I made the frame the background image-ok. Now I
want to center the photo within the frame. The photo info is in the page as the
owner wants to change it. Its a <img> tag. I tried doing a align center in the
<img> but that didn't do it.

Somehow that program did it. I believe it was done with CSS.

Anyone know?

Sure. Just buy that same package.

--

Walt


"phrarod" <webforumsuser (AT) macromedia (DOT) com> wrote

I saw a friend's site where it used a pre-bought package. It had nice photo
frames and a sutle drop shadow.

The site I'm working on has a lot of photos and I would like to set them
off
this way.

What I did was make the frame with a drop. Drop shadow isn't looking good
even
though I did a .png Anyway, I made the frame the background image-ok. Now
I
want to center the photo within the frame. The photo info is in the page
as the
owner wants to change it. Its a <img> tag. I tried doing a align center in
the
img> but that didn't do it.

Somehow that program did it. I believe it was done with CSS.

Anyone know?

Funny. Its a whole website package. I'm sure I could make just that part. Here's an example:

http://www.vintagemotoring.net/image...um=1&gallery=2

phrarod wrote:

I saw a friend's site where it used a pre-bought package. It had nice photo
frames and a sutle drop shadow.

The site I'm working on has a lot of photos and I would like to set them off
this way.

What I did was make the frame with a drop. Drop shadow isn't looking good even
though I did a .png Anyway, I made the frame the background image-ok. Now I
want to center the photo within the frame. The photo info is in the page as the
owner wants to change it. Its a <img> tag. I tried doing a align center in the
img> but that didn't do it.

Somehow that program did it. I believe it was done with CSS.

Anyone know?

Give us a link to the page where you are trying centre your image or

give us a link to this friends site so we can take a look at the code.
Then we can advise you of how to achieve what it is you want.

I included the link to the page that does it in the premade site.

Here's where I'm trying to do it. I screwing around with the page so ignore
extraneous code/screwups.

http://hipnoticinc.com/alpha/alpha.r...breeders1.html

phrarod wrote:

I included the link to the page that does it in the premade site.

Here's where I'm trying to do it. I screwing around with the page so ignore
extraneous code/screwups.

http://hipnoticinc.com/alpha/alpha.r...breeders1.html


Ok well yourr going to want those gallery images to be a link at some

stage so first wrap the image in a anchor tag, as below: It's much
easier to go into code view to do this.


<div id= "beardbphoto1"><a href="#"><img src="images/breeder-photo1.jpg"
width="160" height="120" /></a></div>



Next position and style the anchor tag with some css. Add the below to
your css stylesheet:


#beardbphoto1 a {
width: 160px;
height: 120px;
display: block;
border: 6px solid #fff;
}

#beardbphoto1 a:hover {
border: 6px solid #999;
}

a img {
border: none;
}


Now when you mouse over the image you should get a grey border.

Osgood. Is my link showing up? Here's what I'm working on now. Less complex. I
just want to center the photo within the box I made. I made a div to contain
the photo.

http://hipnoticinc.com/alpha/alpha.r...breeders1.html

phrarod wrote:

Osgood. Is my link showing up? Here's what I'm working on now. Less complex. I
just want to center the photo within the box I made. I made a div to contain
the photo.

http://hipnoticinc.com/alpha/alpha.r...breeders1.html


Sure your link is showing up,

Heres my reply form a previous post:

Ok well youre going to want those gallery images to be a link at some
stage so first wrap the image in a anchor tag, as below: It's much
easier to go into code view to do this.


<div id= "beardbphoto1"><a href="#"><img src="images/breeder-photo1.jpg"
width="160" height="120" /></a></div>



Next position and style the anchor tag with some css. Add the below to
your css stylesheet:


#beardbphoto1 a {
width: 160px;
height: 120px;
display: block;
border: 6px solid #fff;
}

#beardbphoto1 a:hover {
border: 6px solid #999;
}

a img {
border: none;
}


Now when you mouse over the image you should get a grey border.