1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

wordpress align image at exact location - need help

Discussion in 'BlackHat Lounge' started by supermanden, Jan 10, 2015.

  1. supermanden

    supermanden BANNED BANNED

    Joined:
    Jan 12, 2012
    Messages:
    537
    Likes Received:
    140
    Hi, I need to place an image right underneath another. Since I only have the options to align left/right/center and the images are of different sizes it's impossible.

    I want to place a button to click on under an image, but no matter what I try the image underneath keep being out of position by a good margain. Any ideas?
     
  2. neverquitting

    neverquitting Regular Member

    Joined:
    Nov 10, 2014
    Messages:
    410
    Likes Received:
    327
    Location:
    United States
    Home Page:
    I don't see why that should be causing a problem, but why not use a table? TablePress can help.
     
    • Thanks Thanks x 1
  3. laur.laurix

    laur.laurix Power Member

    Joined:
    May 8, 2013
    Messages:
    703
    Likes Received:
    262
    Occupation:
    Reverse Engineering Maniac
    Location:
    Mars
    Or u can use alignnone and use nbsp to align them (newbie way) or u can use css.
     
    • Thanks Thanks x 1
  4. supermanden

    supermanden BANNED BANNED

    Joined:
    Jan 12, 2012
    Messages:
    537
    Likes Received:
    140
    Alignnone still get the images out of position in comparision with each other. Sorry but I don't know what nbsp is? The newbie way is probably the best way to go but if you know a css code I am sure I can figure it out :).
     
  5. laur.laurix

    laur.laurix Power Member

    Joined:
    May 8, 2013
    Messages:
    703
    Likes Received:
    262
    Occupation:
    Reverse Engineering Maniac
    Location:
    Mars
    Google it. Maybe it will help u in the future. Cheers.

    The power of ( ) :)

     
  6. hzwill

    hzwill Junior Member

    Joined:
    Jul 25, 2011
    Messages:
    185
    Likes Received:
    46
    Use text editor mode.

    Put <p align="left">your second image</p> behind your first image.
     
    • Thanks Thanks x 1
  7. supermanden

    supermanden BANNED BANNED

    Joined:
    Jan 12, 2012
    Messages:
    537
    Likes Received:
    140
     
  8. supermanden

    supermanden BANNED BANNED

    Joined:
    Jan 12, 2012
    Messages:
    537
    Likes Received:
    140
    Pasting that after the first image code and replacing "your second image" with the code for my second image? It makes no changes. It's still a few inches too right from my first image. Tried all the aligning options.
     
  9. TheVegan

    TheVegan Junior Member

    Joined:
    Mar 6, 2013
    Messages:
    179
    Likes Received:
    33
    Occupation:
    blackhat
    Location:
    Prague
    So first of all you should never align things with &nbsp, all your styling should be done in CSS not html.

    So you have a few options, one is a clear fix

    HTML:
    <div id="div1">
        <img src="img1.png">
    </div>
    <div class="clearfix"></div>
    <div id="div2">
        <img src="img2.png">
    </div>
    and the css

    HTML:
    .clearfix {
        clear:both;
    }
    or you can float them, here's a good page I found after quick google search

    http://www.inmotionhosting.com/supp.../insert-images-website/align-float-images-css
     
    • Thanks Thanks x 1
  10. FBGuru

    FBGuru Senior Member

    Joined:
    Sep 22, 2013
    Messages:
    928
    Likes Received:
    1,172
    Location:
    Personality Type : ESTP
    Select your first image and align it to center.
    Select your second image and align it to center.​

    Both images will now be perpendicular order. PM me the page so I can see what exactly are you doing out there.
     
  11. TheVegan

    TheVegan Junior Member

    Joined:
    Mar 6, 2013
    Messages:
    179
    Likes Received:
    33
    Occupation:
    blackhat
    Location:
    Prague
    Look at the link I posted... What with wordpress people and putting things in <p> tags ??!!! ahhhh <p> is for paragraph not image hahaha....
     
  12. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,267
    Likes Received:
    5,081
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    Is this what you want to do?

    Put the following lines in a text file and save as "test.html" (without quotes, ofc. :) in your c drive (use any folder anywhere... I am just making things simle for you... then open the browser and type:
    file:///c:/test.html

    You will see the result. So do you want something like this to happen? Or do you also want a selection list (eg.: 1. Left align, 2. Right align, 3. Center align) and a button and get the images align according to the selected choice and after pressing the button?


    ~~~
    Ofc, the formatting can be much simplified by using a CSS file, and attaching the style to the <div>s.
     
    Last edited: Jan 10, 2015
  13. hzwill

    hzwill Junior Member

    Joined:
    Jul 25, 2011
    Messages:
    185
    Likes Received:
    46
    "P" is the first letter of "Paragraph" but that not means it only can define text.

    QQ Photo20150101025440.jpg
    QQ Photo20150110192917.jpg

    I am not sure what OP trying to do. But if you want to put a button under the middle of the product picture. P align definitely work and Div is really not neccessary.