Need Help with Wordpress images in sidebar.

Discussion in 'HTML & Website Design' started by hmansfield, Jan 2, 2008.

  1. #1
    I have a wordpress blog. I would like to arrange the images in one of my my side bar widgets (that read HTML code), next to each other (Horizontally ), instead of vertically (the way the post automatically).

    Can anyone give me some simple pointers in the right direction?
    Thanks in advance, w/rep.
     
    hmansfield, Jan 2, 2008 IP
  2. longroad

    longroad Well-Known Member

    Messages:
    1,645
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    155
    #2
    If your sidebar isn't wide enough for the images to sit together they will automatically be placed under one another.
     
    longroad, Jan 2, 2008 IP
  3. hmansfield

    hmansfield Guest

    Messages:
    7,904
    Likes Received:
    298
    Best Answers:
    0
    Trophy Points:
    280
    #3
    I will resize the images, but they will still show one under the other, by default...any help?
     
    hmansfield, Jan 2, 2008 IP
  4. hmansfield

    hmansfield Guest

    Messages:
    7,904
    Likes Received:
    298
    Best Answers:
    0
    Trophy Points:
    280
    #4
    OK no I didn't..I still can't make them do the most important thing, that is have individual link on each one...right now, each set in the same row, link to the same place...still need help if anyone can, thanks.
    Here is how I have them arranged, side by side:

    <a class+"inline"href='http://astore.amazon.com/theclublifeshop-20?%5Fencoding=UTF8&node=96'><img src='http://www.mysite.com/my-content/uploads/2008/01/dj.png' border='0'title='DJ Equipment and Accessories'
    a class+"inline"href='http://astore.amazon.com/digitaltvs42009-20?%5Fencoding=UTF8&node=11'><img src='http://www.mysite.com/my-content/uploads/2008/01/home-entertainemnt.png' border='0'title='HDTV, Plasma, & Home Theater Systems'></a>


    What am I doing wrong?
     
    hmansfield, Jan 2, 2008 IP
  5. longroad

    longroad Well-Known Member

    Messages:
    1,645
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    155
    #5
    How are you getting this code?

    There is no such thing as class+"inline"

    Get rid of class+"inline"

    You will need to place an </a> after each image if you want the images to have their own link
     
    longroad, Jan 2, 2008 IP
  6. hmansfield

    hmansfield Guest

    Messages:
    7,904
    Likes Received:
    298
    Best Answers:
    0
    Trophy Points:
    280
    #6
    OK...but when I do that...the images just post up vertically. I want them to be side by side, with their own individual link.
     
    hmansfield, Jan 2, 2008 IP
  7. SuzanneMarie

    SuzanneMarie Peon

    Messages:
    38
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    The suggested code above is correct. If you simply place two of these in a row without a <p> or a <br>, they will be side by side, UNLESS the images are too big.

    <a href="xxxxxx"> some text here</a>

    Can you provide a link to reference the problem?
     
    SuzanneMarie, Jan 3, 2008 IP
  8. hmansfield

    hmansfield Guest

    Messages:
    7,904
    Likes Received:
    298
    Best Answers:
    0
    Trophy Points:
    280
    #8
    Right hand side....the links to my aStore, "Visit the Club Life Entertainment Shop".
    I have the images vertically now, I want to put them 2X2.

    Link

    They will fit side by side, but I can't make them have separate links.
     
    hmansfield, Jan 3, 2008 IP
  9. SuzanneMarie

    SuzanneMarie Peon

    Messages:
    38
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    the top one is different than the others, all the ones below it have a <p> tag, this will make t hem stack vertically. But the top one doesn't have that tag so I'm guessing that it is the one you have been playing with?

    Are you saying that you can EITHER have them side by side OR have them hyperlinked, but not both? That when you create the hyperlink anchor text then don't align side by side anymore?

    in the css for your a img, you have a border width set. Try setting the border to 0px for your a img and see if that fixes it:

    Can you paste the code you are using in the widget for the first sidebyside pair?
     
    SuzanneMarie, Jan 3, 2008 IP
  10. hmansfield

    hmansfield Guest

    Messages:
    7,904
    Likes Received:
    298
    Best Answers:
    0
    Trophy Points:
    280
    #10
    Well, I have since, just resolved to keeping them posted vertically, so as not to have it looks tupid on my site, but the above code is how I had it set up. They did align side by side, but both images clicked at the same time, to a single link


    <a class+"inline"href='http://astore.amazon.com/theclublifeshop-20?%5Fencoding=UTF8&node=96'><img src='http://www.mysite.com/my-content/uploads/2008/01/dj.png' border='0'title='DJ Equipment and Accessories'
    a class+"inline"href='http://astore.amazon.com/digitaltvs42009-20?%5Fencoding=UTF8&node=11'><img src='http://www.mysite.com/my-content/uploads/2008/01/home-entertainemnt.png' border='0'title='HDTV, Plasma, & Home Theater Systems'></a>
     
    hmansfield, Jan 3, 2008 IP
  11. SuzanneMarie

    SuzanneMarie Peon

    Messages:
    38
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Well, right, that's what the code you just posted SHOULD do.

    you can try removign the border width from your a img tags. Then when you wrap each image in its own anchor tag, it won't take up additional space.
     
    SuzanneMarie, Jan 3, 2008 IP
  12. hmansfield

    hmansfield Guest

    Messages:
    7,904
    Likes Received:
    298
    Best Answers:
    0
    Trophy Points:
    280
    #12
    Ok thanks , I will give a try and let you know how it works out.
    I appreciate you help.
     
    hmansfield, Jan 4, 2008 IP
  13. SuzanneMarie

    SuzanneMarie Peon

    Messages:
    38
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #13
    BEst of luck. Nice looking icons, by the way... did you make them?
     
    SuzanneMarie, Jan 4, 2008 IP
  14. alextic

    alextic Guest

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    More idea more expert.
     
    alextic, Jan 5, 2008 IP