Fixing an awkward layout

  • Resolved UnnumberedT

    (@unnumberedt)


    11 years, 3 months ago

    Hello folks,

    I’m working on my first WordPress website, and having trouble with one of my pages. Specifically, this one

    On my screen, and I think on most screens, the images along the right side have a stair-step layout. This is unattractive, and not what I’d hoped for.

    My intention was to have an unordered list, where each list element consisted of an image and some corresponding text, with some horizontal whitespace between each list element, as is usual for unordered lists. Basically, I want the layout to see the text/image combo as a single semantic element that ought to be grouped together, not mishmashed into earlier/following elements. More specifically, each element would have a right-aligned image and some text, which would likely wrap across multiple lines, but might or might not take up more or less vertical space than the image. There would then be a bit of horizontal whitespace, followed by the next image/text combo.

    I considered using a table instead of a ul, but experts seem to strongly discourage use of tables for layout. And I wanted to use good practices in my webdesign.

    I’d greatly appreciate any help or advice in fixing my layout problem.

    P.S. I checked the html code, and the text/image combos are indeed organized in li tags in the way I’d intended. Each li has one image, followed by the corresponding text. The problem is that this setup isn’t displaying as I had hoped.

Viewing 2 replies - 1 through 2 (of 2 total)
  • WPyogi

    (@wpyogi)

    11 years, 3 months ago

    I think what you need to do is “clear” each <li> tag from the one above it — so see if this will work in your CSS:

    .page-id-46 .entry-content li {
    clear: both;
    margin-top: 10px;
}

    This is assigned only to that page — so if you have other similar pages you’d need to add them to the above.

    Thread Starter UnnumberedT

    (@unnumberedt)

    11 years, 3 months ago

    I added that snippet to my CSS, and the layout now comes out as I’d hoped. Unfortunately, my intended design turns out to be less attractive than I’d thought it would be, but that’s my problem, and I’ll work on it.

    Thanks,

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Fixing an awkward layout’ is closed to new replies.