help with image links

[jdrury]

I am miserable at html, and the photos I have currently posted in an entry (thumbnails with links to larger images), instead of arranging in a straight row, are showing up diagonal to one another (see the entry to see what I'm talking about).

Can anyone tell me how to fix this?

Thanks in advance,

J.P.

[jdrury]

Here is the code I'm using. The break tag may be somewhere that I can't figure out.

<center><a class='serendipity_image_link' href='/ed/blogs/Drury_Jon/uploads/shells1.JPG'><!-- s9ymdb:6 --><img width="100" height="133" style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/ed/blogs/Drury_Jon/uploads/shells1.JPG" alt="" /></a>
<a class='serendipity_image_link' href='/ed/blogs/Drury_Jon/uploads/shells2.JPG'><!-- s9ymdb:6 --><img width="100" height="133" style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/ed/blogs/Drury_Jon/uploads/shells2.JPG" alt="" /></a>
<a class='serendipity_image_link' href='/ed/blogs/Drury_Jon/uploads/shells3.JPG'><!-- s9ymdb:6 --><img width="100" height="133" style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/ed/blogs/Drury_Jon/uploads/shells3.JPG" alt="" /></a>
<a class='serendipity_image_link' href='/ed/blogs/Drury_Jon/uploads/shells8.JPG'><!-- s9ymdb:6 --><img width="100" height="133" style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/ed/blogs/Drury_Jon/uploads/shells8.JPG" alt="" /></a>
<a class='serendipity_image_link' href='/ed/blogs/Drury_Jon/uploads/shells9.JPG'><!-- s9ymdb:6 --><img width="100" height="133" style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/ed/blogs/Drury_Jon/uploads/shells9.JPG" alt="" /></a></center>

[garvinhicking]

Hi!

I suppose the issue is floating; the images are not cleared before they wrap.

I think you must insert <br style="clear: both" /> at some point, I don't know how else to properly wrap images.

Regards,
Garvin

[jdrury]

That arranges them vertically. Is there any way to have them in a horizontal row?

[garvinhicking]

Hi!

Ah, now I see. The nl2br plugin appllies the stacking br to your entries. You need to either:

1. Remove the nl2br event markup plugin (but you will loose automatic linebreaks everywhere

2. I don't know if this can be done, but: Configure the nl2br plugin to add a custom tag like "div class='images'" (note the missing <>) to the ignore list of when it should be applied. Then you can manually add a <div class="images"> befor your image listing, and </div> after it. This should prevent the nl2br markup plugin to convert linebreaks to <br> within your image list.

3. Maybe the easiest middle-way: Install the "Extended properties for entries" plugin, then you can conditionally exclude the nl2br markup plugin for individual entries inthe new "extended options" section of each entry. Then you can exclude your entry with the images to be applied.

HTH,
Garvin