WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to add space between images in sidebar (11 posts)

  1. Motionworks
    Member
    Posted 8 years ago #

    I've just started setting up a list of Amazon books in my sidebar (http://www.motionworks.com.au) and would like some advice on how I can increase the vertical space between each of the book images. I'd also like to know how to center the books in the column. Sorry for the basic questions, I'm a beginner.

  2. Beel
    Member
    Posted 8 years ago #

    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}

  3. Motionworks
    Member
    Posted 8 years ago #

    Thanks very much. Another basic question: where do I place this in the code?

    JD

  4. S.K
    Member
    Posted 8 years ago #

    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">..

  5. Beel
    Member
    Posted 8 years ago #

    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.

  6. Motionworks
    Member
    Posted 8 years ago #

    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

  7. moshu
    Member
    Posted 8 years ago #

    It seems to be OK ;)

  8. Beel
    Member
    Posted 8 years ago #

    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)

  9. Motionworks
    Member
    Posted 8 years ago #

    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

  10. Beel
    Member
    Posted 8 years ago #

    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
    }

  11. sygyzy
    Member
    Posted 8 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.