Aligning text and images in a widget?

[Greg777]

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

[Paulie_D]

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?

[Greg777]

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

[Greg777]

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

[Paulie_D]

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.

[Greg777]

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

[Paulie_D]

Here’s a rough idea.

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

[Greg777]

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?

[Paulie_D]

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.

[Author]

Posts