Skip to main content

Forums

This topic contains 9 replies, has 3 voices, and was last updated by  shaneisme 5 years, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #163344

    Greg777
    Participant

    Hi there, I’m new here and busy trying to learn CSS….

    I’m busy trying to build a test site to see if the theme will work for a client’s needs…It’s a WordPress site…

    I’ve read that it is better to use CSS to make things align properly (or the way you want them to) in the widget areas. And I’ve spent hours trying to find out what the CSS should look like….

    I know this is definitely not good practice, but normally I would use a table to layout the format of the images and content in the main content area on say a page for example.

    But how do you achieve this in a widget?

    So here is my dilemna – I need to align two images with text (and I need to do this at least 10 times)

    The 1st image is aligned on the left, and 2nd image next to it at the top and TEXT is under the 2nd image… Please excuse my rudimentary diagram:

    http://screencast.com/t/cOb85vd4sW

    I have been researching this for several hours and can’t find what I’m looking for….

    However, I found this bit of code for a table:

    <div class="table">
    
    <div>
      Basic <ul>
        <li>
          List Item #1
        </li>
        <li>
          List Item #2
        </li>
        <li>
          List Item #3
        </li>
      </ul>
    </div>
    

    Is that the type of thing that would work? How do I replicate layout? Would really appreciate your help Regards Greg

    #163360

    Paulie_D
    Moderator

    No…a list would probably not be right.

    So each ‘item/article’ would consist of a top image, text underneath and another image in a ‘sidebar’…is that right?

    #163376

    Greg777
    Participant

    Hi Paulie,

    This is all in one widget area….

    The 1st Image is on the left…it is a vertical image
    The 2nd image is next to it…..it is a horizontal image…..so together they form an upside down L

    The text then fits into the space under the horizontal image…hopefully that makes sense…

    Were you able to view my diagram?

    Regards
    Greg

    #163378

    Greg777
    Participant

    Hopefully this makes sense if you can’t see my image:

    The XXXXX is 1st image, and YYYYY is 2nd image and TEXT is content… Like this:

    XXXXXXXX…………………YYYYYYYYYYYYYYY
    XXXXXXXX………………..YYYYYYYYYYYYYYY
    XXXXXXXX………………..YYYYYYYYYYYYYYY
    XXXXXXXX
    XXXXXXXX………………..TEXT TEXT TEXT
    XXXXXXXX………………..TEXT TEXT TEXT
    XXXXXXXX………………..TEXT TEXT TEXT
    XXXXXXXX………………..TEXT TEXT TEXT

    Spaces exaggerated….

    Regards
    Greg

    #163379

    Paulie_D
    Moderator

    Were you able to view my diagram?

    Yeah but I’m not sure that a diagram is much help…we’d need more information.

    Will the images be of fixed size in each instance because that might help in the HTML / CSS structure.

    Will the text be of variable height?

    You might try googling “full height sidebar” for example of how the basic structure might go.

    #163382

    Greg777
    Participant

    Yes Paulie,

    Each image is basically the same size (give a px or two)…The amount of text might vary a bit.

    The widget is situated where the main content page would be. So it is not in a sidebar area.

    If you take my diagram as one unit….there will be about 9 or 10 units stacked vertically, each one below the one above.

    Hope you can picture what I mean….

    Regards
    Greg

    #163383

    Paulie_D
    Moderator

    Here’s a rough idea.

    #163390

    Greg777
    Participant

    Thanks Paulie,

    That certainly looks interesting….

    So I guess the million dollar question is how to implement the code…
    I assume that the CSS would go into the child theme editor for the particular widget?

    Would you suggest putting each “image unit” described above into a seperate text widget?

    #163403

    Paulie_D
    Moderator

    Well that’s a WP thing which is beyond my expertise.

    If you’re going to have lots of them I’ve heard of something called Custom Post Types.

    I think I’ll push this over to the CMS area for further ideas.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star