wordpress align image at exact location - need help

supermanden · Jan 10, 2015

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?

neverquitting · Jan 10, 2015

I don't see why that should be causing a problem, but why not use a table? TablePress can help.

laur.laurix · Jan 10, 2015

Or u can use alignnone and use nbsp to align them (newbie way) or u can use css.

supermanden · Jan 10, 2015

laur.laurix said:
Or u can use alignnone and use nbsp to align them (newbie way) or u can use css.

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

.

laur.laurix · Jan 10, 2015

Google it. Maybe it will help u in the future. Cheers.

The power of (Â )

supermanden said:
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 .

hzwill · Jan 10, 2015

Use text editor mode.

Put <p align="left">your second image</p> behind your first image.

supermanden · Jan 10, 2015

laur.laurix said:
Google it. Maybe it will help u in the future. Cheers.

Been googling all the search terms I could think of related the last hour without finding a solution that works. Still doing so but decided to throw in a question here on this lovely forum.

supermanden · Jan 10, 2015

hzwill said:
Use text editor mode.

Put <p align="left">your second image</p> behind your first image.

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.

TheVegan · Jan 10, 2015

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

FBGuru · Jan 10, 2015

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.

TheVegan · Jan 10, 2015

Look at the link I posted... What with wordpress people and putting things in <p> tags ??!!! ahhhh <p> is for paragraph not image hahaha....

srb888 · Jan 10, 2015

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?

Type:

<html>
<body>
<div>
<p>Hello World!</p>
<div style="text-align: left"><img src="http://thenypost.files.wordpress.com/2013/08/laying_flowers_oped-300x300.jpg" width="100" /></div>
<div style="text-align: left"><img src="http://thenypost.files.wordpress.com/2013/08/laying_flowers_oped-300x300.jpg" width="200" /></div>
<div style="text-align: left"><img src="http://thenypost.files.wordpress.com/2013/08/laying_flowers_oped-300x300.jpg" width="300" /></div>
<div style="text-align: left"><img src="http://thenypost.files.wordpress.com/2013/08/laying_flowers_oped-300x300.jpg" width="100" /></div>
<p>Hello World!</p>
</div>
</body>
</html>

~~~
Ofc, the formatting can be much simplified by using a CSS file, and attaching the style to the <div>s.

hzwill · Jan 10, 2015

TheVegan said:
Look at the link I posted... What with wordpress people and putting things in <p> tags ??!!! ahhhh <p> is for paragraph not image hahaha....

"P" is the first letter of "Paragraph" but that not means it only can define text.

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.

wordpress align image at exact location - need help

supermanden

BANNED

neverquitting

Regular Member

laur.laurix

Elite Member

supermanden

BANNED

laur.laurix

Elite Member

hzwill

Junior Member

supermanden

BANNED

supermanden

BANNED

TheVegan

Junior Member

FBGuru

Supreme Member

TheVegan

Junior Member

srb888

Elite Member

hzwill

Junior Member

Main Menu

Marketplace

Making Money

BlackHat World