Footer Images

[autoace]

Hi,

I am trying to display 3 different images in my tpl_footer file.

I am confused about the li part of it for the css. I know I can use background-image in css to display the image, but I have 3 images to display and they are all different, NOT the same.

How would I set that up using unordered lists and css?

[gjh42]

We need a bit more info on your desired results. Do you want the images to be in the background with text crossing them, or are they to be foreground images? How do you want them arranged? Spacing? A link to see what you have may improve the advice.

[autoace]

We need a bit more info on your desired results. Do you want the images to be in the background with text crossing them, or are they to be foreground images? How do you want them arranged? Spacing? A link to see what you have may improve the advice.

Thanks for your response. I guess the best way to do this would be to give you a link: http://www. a u t o m o t i v e a c e.com and simply scroll to the bottom and you will see 3 images that are in 'column' formation in the middle just above the footer menu.

I want these 3 images to appear in "row" formation, if you will and also to put a light gray background behind them.

Thanks for your help.

[gjh42]

You have your three images in three divs all with the same id, which is not supposed to be done - each id on a page should be unique.
<div id="secureShopping">

In this case, it does make it easier because you can just add to stylesheet_footer_menu.css

#secureShopping {
    width: 33%;
    float: left;
    margin-top: 1.0em;
    }

[autoace]

You have your three images in three divs all with the same id, which is not supposed to be done - each id on a page should be unique.
<div id="secureShopping">

In this case, it does make it easier because you can just add to stylesheet_footer_menu.css

#secureShopping {
    width: 33%;
    float: left;
    margin-top: 1.0em;
    }

So just to be sure I understand what you are saying, give the 3 separate images their own div ids and then just put those in the stylesheet_footer_menu .css? Is this correct?

[gjh42]

That would be the officially correct way to do it. You could just paste the code I gave in your stylesheet and it would work as is; the "id" rule is not generally enforced and won't cause your page to break, only perhaps throw a warning or something in validation. Since you have already edited the file to get those divs, changing them from id="secureShopping" to class="secureShopping" and changing the stylesheet rule to .secureShopping { would make it completely kosher and functional.