Image question

[traytray]

How can I create a thin frame around each image on the main page?

And what if I wanted to add the name of the product directly under the image?

I've added an alt image, but when you hover on the image, only the product page URL displays.

These are different images than the ones I use for product pages and I don't believe I can use the same product number for two different images, so that meant I couldn't use Featured Products for this, so I've created the images in this way on the main page:

<a href="http://www.designerperfumesnob.com/womens-perfume/Marc-Jacobs/Daisy-Dream/EDT/3.4oz"><img width="250" height="350" alt="Daisy Dream Perfume by Marc Jacobs for Women" src="images/isimages/daisydream.jpg"> </a>

<a href="http://www.designerperfumesnob.com/womens-perfume/Dolce-and-Gabbana/Dolce/EDP/2.5oz"><img width="250" height="350" alt="Dolce Perfume by Dolce and Gabbana for Women" src="images/isimages/dolce.jpg"> </a>

<a href="http://www.designerperfumesnob.com/womens-perfume/Lolita-Lempicka/EDP/1.7oz"><img width="250" height="350" alt="Lolita Lempica Perfume for Women" src="images/isimages/lolita.jpg"> </a>
<br /><br /><br /><br />


<a href="http://www.designerperfumesnob.com/womens-perfume/Jessica-Simpson/Fancy/edp/3.4oz"><img width="250" height="350" alt="Fancy by Jessica Simpson for Women" src="images/isimages/fancy.jpg">
</a>
<a href="http://www.designerperfumesnob.com/womens-perfume/Lancome/Tresor-Midnight-Rose/EDP/2.5oz"><img width="250" height="350" alt="Midnight Rose by Lancome for Women" src="images/isimages/midnight-rose.jpg">
</a>
<a href="http://www.designerperfumesnob.com/womens-perfume/Christian-Dior/Poison/edt/1.7oz"><img width="250" height="350" alt="Poison by Christian Dior for Women" src="images/isimages/poison.jpg"></a>


www.designerperfumesnob.com

[philip937]

looking at your page you have built it manually therefore try adding some inline css for the image borders. See here for examples on the css:
http://css-tricks.com/using-css-for-image-borders/

try adding the tag title="Daisy Dream Perfume by Marc Jacobs for Women" as well as the alt tag.

[traytray]

looking at your page you have built it manually therefore try adding some inline css for the image borders. See here for examples on the css:
http://css-tricks.com/using-css-for-image-borders/

try adding the tag title="Daisy Dream Perfume by Marc Jacobs for Women" as well as the alt tag.

I found one suggestion I liked from that link:

img {
padding:1px;
border:1px solid #021a40;
background-color:#ff0;

but where do I put it? I entered it in the stylesheet, but since it doesn't know what image to apply it to, nothing happened.

Also, you mentioned adding a tag title. For this particular image for example, what would I enter?


<a href="http://www.designerperfumesnob.com/womens-perfume/Marc-Jacobs/Daisy-Dream/EDT/3.4oz"><img width="250" height="350" alt="Daisy Dream Perfume by Marc Jacobs for Women" src="images/isimages/daisydream.jpg"> </a>

thank you~

[traytray]

Quote Originally Posted by philip937 View Post

looking at your page you have built it manually therefore try adding some inline css for the image borders. See here for examples on the css:
http://css-tricks.com/using-css-for-image-borders/

try adding the tag title="Daisy Dream Perfume by Marc Jacobs for Women" as well as the alt tag.

I found one suggestion I liked from that link:

img {
padding:1px;
border:1px solid #021a40;
background-color:#ff0;

but where do I put it? I entered it in the stylesheet, but since it doesn't know what image to apply it to, nothing happened.

Also, you mentioned adding a tag title. For this particular image for example, what would I enter?


<a href="http://www.designerperfumesnob.com/womens-perfume/Marc-Jacobs/Daisy-Dream/EDT/3.4oz"><img width="250" height="350" alt="Daisy Dream Perfume by Marc Jacobs for Women" src="images/isimages/daisydream.jpg"> </a>

thank you~


Anybody care to jump in and help me out?

Thanks~

[traytray]

OK, after hours of working on it, I figured it out.

All I would like to know now is if I can reduce the white space between images. As close as they are horizontally, I'd like to see that same amount of space vertically.

Possible?

I used:

#indexDefault img {
padding: 0px;
border: 1.75px solid #a6a6a6;
background-color:#feeff2;
}

Thank you!

[traytray]

The issue has been fixed.

[philip937]

hi traytray, sorry only just saw your replies on this. glad you got it sorted.