Grow your CSS skills. Land your dream job.

Aligning text and images in a widget?

  • # February 19, 2014 at 6:57 am

    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

    # February 19, 2014 at 8:15 am

    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?

    # February 19, 2014 at 9:49 am

    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

    # February 19, 2014 at 9:53 am

    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

    # February 19, 2014 at 9:56 am

    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.

    # February 19, 2014 at 10:07 am

    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

    # February 19, 2014 at 10:11 am

    Here’s a rough idea.

    http://codepen.io/Paulie-D/pen/ILewh

    # February 19, 2014 at 10:38 am

    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?

    # February 19, 2014 at 1:01 pm

    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.

    # February 19, 2014 at 2:38 pm

    I’m not 100% sure exactly what you’re after.

    From what I’m understanding, you want to put this content into a sidebar / footer of a main site?

    Without getting too complicated, you could very easily use the built-in text widget and copy code in there. You would just need to place the styles in the main theme’s stylesheet.

    It’s not a good way to set it up for maintenance, however it would work.

    Do you have a live site or theme we could look at?

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".