Footer Images

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?

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.

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.

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.

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.

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;
}

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;
}

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?

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.

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.

Originally I did just use the code you gave me and it did work, beautifully!

I just now ready your latest post and did it the 'kosher' way. My only question now is, is there a way to control the spacing and maybe bring them in closer to each other?

Thanks for your great help!

With your site down for maintenance, we can't see your current structure to suggest styling changes.

gjh42:

With your site down for maintenance, we can't see your current structure to suggest styling changes.

Ok, its back up, please take a look!

It's been tough to test some of the things that should work, because you can't always override a style specification with no specification...
Anyway, you can style #footer {} with either width: 80%; margin: 5em auto 0; or padding: 0 5em; to make a narrower space to hold the seals.
There is at least one other method you could use, so let me know if one of those works when you do it in the actual stylesheet.

gjh42:

It's been tough to test some of the things that should work, because you can't always override a style specification with no specification...
Anyway, you can style #footer {} with either width: 80%; margin: 5em auto 0; or padding: 0 5em; to make a narrower space to hold the seals.
There is at least one other method you could use, so let me know if one of those works when you do it in the actual stylesheet.

Ok, well I tried all 3 and none really worked :(

Any other suggestions?

"All 3"... Oops - I can see how you thought that.

I suggested two different options, either
width: 80%; margin: 5em auto 0;
or
padding: 0 5em;

The width and margin have to be done together to be effective. They worked when I tested them on your site.