There are a number of ways to do it, one is…
img {padding-bottom:20px}
That will provide space for all images. For just the amazon pics you can use…
#amazon img {padding-bottom:20px}
Thanks very much. Another basic question: where do I place this in the code?
JD
You can add that snippet to the .css file of your active theme. If you use #amazon img….etc, you have to call it by <img id="amazon">..
Just an “oops” in the last post… DO NOT set the images with an id=”amazon”… You have a div in the code with that id and each id has to be unique so nothing else in the page can have “amazon” as its id.
As your page is currently coded, any image positioned within the block <div id=”amazon”> </div> will have the padding if you put
#amazon img {padding-bottom:20px} in style.css.
Not following you exactly… I put in the previous suggested changes into sidebar.php and styles.css this morning and it looks okay… could you take a look at the code and let me know… I feel like such a newbie…
thanks a million.
JD
Back out all the editing you did in your sidebar. <img id=”amazon”> has no meaning and is invalid. Follow only my directions. All you needed to do was to put #amazon img {padding-bottom:20px} in your css.
moshu: no it is not, look at the source…
<li><a href=””><img border=”0″ src=”ZZZ_.jpg”></a><img id=”amazon”><img src=”…” /></li>
(I edited out a lot of strange additional stuff in the tags)
Thanks Beel, I’ll do that. One other thing I noticed is that the “rollover” appears as a white line below each image. This was at the base of the image before I added the padding… is there an easy fix? or a way to add a nicer rollover simply?
thanks for your time.
JD
Once you clean up your code, you will have to insert something (in the css) to override the default you have for hover which is…
a:hover {
color: #B9D9EE;
text-decoration: underline;
}
with…
#amazon a:hover {
whatever you want
}
How will the CSS know to apply it to all the Amazon tags? Do you have to tag the images in the source with Amazon?
