Help - Search - Members - Calendar
Full Version: How do images align?
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
jaykcon
Hi, I inserted three thumbnail images on a post on Wordpress. They are 133x100 px and the code was
<p>
<img src="thumbnails/dog1.jpg" alt="Adog">
<img src="thumbnails/pelusa.jpg" alt="A dog">
<img src="thumbnails/puppies.jpg" alt="Puppies">
</p>
When I view the post they are one under the other.
Why they align one under the other and not one after the other if they are really small and seems to be enough space for the three of them. Considering <img> element is an in-line element.
pandy
Maybe something in the CSS makes them behave differently than they would do otherwise. With only the above the images should line up the same way as words, one after the other as long as there is room.
Darin McGrew
Can you provide the URL (address) of a document that demonstrates the problem? Without seeing the document, my guess would be that WordPress added <br> tags...
jaykcon
QUOTE(Darin McGrew @ Oct 5 2009, 01:01 PM) *

Can you provide the URL (address) of a document that demonstrates the problem? Without seeing the document, my guess would be that WordPress added <br> tags...


The code is very simple:

<p>
<img src="images/dog1.jpg" alt="A dog">
<img src="images/pelusa.jpg" alt="Another dog">
<img src="images/puppies.jpg" alt="The puppies">
</p>

and you can watch it on www.imagetheweb.com
pandy
That may be what you enter, but it isn't the output. So Darin was right.

View Source and see for yourself.

HTML
<p>

<p>
<img src="images/dog1.jpg" alt="A dog"><br />
<img src="images/pelusa.jpg" alt="Another dog"><br />
<img src="images/puppies.jpg" alt="The puppies"></p>
</p>


I guess you enter your code in an online editor. Maybe it adds a BR every time you hit ENTER and a P when you do it twice. Try to put everything on one single line and see if that helps.
jaykcon
QUOTE(pandy @ Oct 6 2009, 01:30 AM) *

That may be what you enter, but it isn't the output. So Darin was right.

View Source and see for yourself.

HTML
<p>

<p>
<img src="images/dog1.jpg" alt="A dog"><br />
<img src="images/pelusa.jpg" alt="Another dog"><br />
<img src="images/puppies.jpg" alt="The puppies"></p>
</p>


I guess you enter your code in an online editor. Maybe it adds a BR every time you hit ENTER and a P when you do it twice. Try to put everything on one single line and see if that helps.


Checking the source I found this:

<p>
<img src="images/dog1.jpg" alt="A dog"><br />
<img src="images/pelusa.jpg" alt="Another dog"><br />
<img src="images/puppies.jpg" alt="The puppies"></p>

As you say it adds a br tag, doesn't it?
When you write a post on wordpress you have to views on the editor to check what you are writing: a VISUAL view and a HTML view. On the VISUAL view you see the three images in this case, and on the HTML view you see the code. The confusing thing is when I see the HTML view the code doesn't show a BR tag at the end of each image AND when I see the SOURCE on my explorer, appear the code above that present a BR at the end of each image inserted. That is confusing for me Why doesn't show the BR tags on the HTML view of the editor for you to know that they are there and to know that images are going to line up vertically not horizontally as I wanted to show them.
THXS
AnglinaS
Hello,

You can do that in CSS, by align command center right or left , I used CSS to align the images. or you can try this
CODE
<IMG SRC="test.gif" ALT="picture
of me" ALIGN=LEFT>


pandy
QUOTE
That is confusing for me Why doesn't show the BR tags on the HTML view of the editor for you to know that they are there and to know that images are going to line up vertically not horizontally as I wanted to show them.


I would find that confusing too. I've never used WP, I can only guess it's the carriage returns that so it. I've seen some desktop WYSIWYGs set up that way.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.