Need help? Check out our Support site, then


WordPress.com Forums » Support

Images on Page will not align horizontally in Coraline

  1. vickivalosik
    Member

    Hi- I use the Coraline theme and am having trouble working with my images to place them where I want once I add them to the page. I have a page called Photography that displays four thumbnails. Each of those thumbnails are hyperlinked to take the viewer to a gallery with its own page. So for example, when you click on the picture of the peacock, it takes you to the animal photography page with its own gallery.

    The problem is, when I insert the four thumbnails into the Photography page, I can't get them to line up in one horizontal line across the page. By default they line up one on top of the other vertically. I tried choosing left alignment for one and center alignment for another, but they still came out on separate lines, even though one was to the right of the other. I just want to place four thumbnails in a straight line across the page. Is that possible? If you click on my photography page (http://vickivalosik.net/photography/), you can see what I mean about how they are stacked vertically. Thanks so much for any help!

    The blog I need help with is vickivalosik.net.

  2. panaghiotisadam
    Member

    Align left/center/right doesn't mean place left/center/right. Align left/right means place left/right and make the rest of the content wrap around, that is, start next to the image instead of below it. So, contrary to what you'd think, to display four thumbnails in a row you need to set the alignment of all four to left (with no line or paragraph breaks between them).
    After you do that, switch the editor to HTML and paste this after the fourth image code, to prevent further wrapping:
    <br style="clear:both;" />

  3. vickivalosik
    Member

    Wow, thank you so so much, Panaghiotisadam! That makes sense now. I just fixed it and added the code you suggested too.

    Do you know on related note, the best way to insert a one word text under each one so that people will know what categories the thumbnails represent? For example, "animals," "places," ect. ?

    Thanks again.

  4. vickivalosik
    Member

    Is there any way to create some space between them so they aren't all on the left side but rather spread evenly across the page? Thanks!

  5. panaghiotisadam
    Member

    You're welcome.

    Easiest way: click on the image in the Visual editor, click the edit tool (mountain icon), type the text in the Caption field, click Update; repeat for the other images; click Update page when you're done with all four.

    By the way, it's possible to make the whole set centered instead of left-aligned, if you wish. It's also possible to make the page title centered in that case. But what I would do is insert larger thumbnails, so that they take up the whole width of the page.

  6. vickivalosik
    Member

    Oh, that's a great idea about inserting larger thumbnails! Also, I tried centering them, but that's when I get a stacked vertical line. Is there another way I should be doing it?

    Thanks for the caption instructions. I will do that now!

  7. panaghiotisadam
    Member

    As we said, the alignment of each image must be set to left. To center the whole row (if you won't insert larger versions), switch the editor to HTML, and paste this at the very beginning:
    <div style="margin-left:136px;">
    and this at the very end:
    </div>

  8. vickivalosik
    Member

    Thank you so much for your help! I have successfully centered them. If you could humor me for one last question, I would be so grateful. You mentioned earlier that it is possible to make the page title centered as well. How would I do that? Is it possible to remove the page title just from the body of the page but leave it on the menu? When I try deleting it from the body of the page, it also disappears from the menu. If I can't remove it then I would at least like to have it centered on the photography and writing pages. Is it simple to do? Thank you.

  9. timethief
    Member

    Is it possible to remove the page title just from the body of the page but leave it on the menu?

    Yes. The tab in the top navigation menu has to be the actual page title, so here’s what to do:
    1. Edit the pages and delete their titles.
    2. Go to Appearance> Menus and create a custom menu.
    3. Select your (now nameless) pages from the Pages module, click Add to Menu. Click the arrow at the right side of each page module to open it, type the title in the Navigation Label field.
    4. Click Save Menu, select the menu from the Theme Locations pulldown, click Save.

  10. panaghiotisadam
    Member

    See here for more:
    http://wpbtips.wordpress.com/2011/12/19/custom-menus/
    (Timethief's suggestion is actually an older one of mine, but there's a new glitch that causes absurdities to show up at random in place of the title if you leave it completely blank.)

  11. timethief
    Member

    @panaghiotisadam
    Thanks for the head up onthat change I wasn't aware of. Is it possible now to remove the page title just from the body of the page but leave it on the menu or not?

  12. timethief
    Member

    @panaghiotisadam
    Not to worry about answering. I found the answer which is yes and the how-to here > Tabs for pages but no page titles on the actual pages in your post.

  13. panaghiotisadam
    Member

    Yup, that's it: you need to add the HTML entity for a space, otherwise you may get Next-something or Previous-something in place of the missing title.

  14. timethief
    Member

    Thanks. :)

  15. vickivalosik
    Member

    Thanks to you both. I am just not sure from your exchange whether I should follow the instructions Timethief posted at 8:39.

  16. timethief
    Member

    @vickivalosik
    See here > http://wpbtips.wordpress.com/2011/12/19/custom-menus/
    Scroll down to "Tabs for pages but no page titles on the actual pages" in that post for instructions.

  17. vickivalosik
    Member

    Thank you, Timethief! I will try it tomorrow when my brain is fresh. I really appreciate your help!

  18. timethief
    Member

    @vickivalosik
    Get some sleep and then you will find panaghiotisadam's instructions will work just fine for you.

  19. vickivalosik
    Member

    : )

  20. vickivalosik
    Member

    It worked! Thank you both so much!

  21. timethief
    Member

    panaghiotisadam's instructions are excellent. Thanks for letting us know this issue has been resolved and best wishes for happy blogging.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags