CSS Help

Shicky · 6 Aug 2010 at 11:33

Setting up another webby with a product image left aligned, on the right of that I want a small blurb about the product. Problem being once the text is lengthier than the height, it starts to go under the image. Which doesnt look too nice to me. I want the text to hold the same line even after the image is done. How can I do this? Was experimenting with a special p classes with increased margins but doesnt seem to work. Any ideas?

Additionally I want a small box below this with 3 tabs. By clicking on the tabs you change the information inside the box, without reloading the page I hope. Anybody know of any wordpress plugins? Have an outside idea how to achieve this with javascript if not

gord · 6 Aug 2010 at 11:42

Give your blurb a fixed width and it won't automatically wrap underneath the image.

As for the tabs, you could use jquery tools tabs. http://flowplayer.org/tools/demos/tabs/index.html But you'd have to read the docs and implement it into your wordpress template.

FabienO · 6 Aug 2010 at 14:35

Put the image and text in a div, float image div and text div left.

div>
div id="image" style="float: left; width: 100px; height: 100px;"> img src="" />/div>
div id="image" style="float: left; width: 100px;">TEXTdiv>
/div>

I've removed all the <'s as I dunno how to

Code:

 it yet.

Tripnologist · 6 Aug 2010 at 14:57

FabienO said:
I've removed all the <'s as I dunno how to

Code:

it yet.[/QUOTE] You need to close it. (without the spaces obviously) [ code] [ /code]

djkav · 6 Aug 2010 at 15:19

FabienO said:
Put the image and text in a div, float image div and text div left.

div>
div id="image" style="float: left; width: 100px; height: 100px;"> img src="" />/div>
div id="image" style="float: left; width: 100px;">TEXTdiv>
/div>

I've removed all the <'s as I dunno how to

Code:

it yet.[/QUOTE] If you're going to be using repeating regions then a <ul> and <li> would be more appropriate, and style with a class. DIVs and IDs should only be used for major layout regions/sections.

FabienO · 6 Aug 2010 at 15:23

aye, a lazy effort on my behalf. Just a quick solution. I put id's just to make it a little clearer.

djkav · 6 Aug 2010 at 15:24

FabienO said:
aye, a lazy effort on my behalf. Just a quick solution. I put id's just to make it a little clearer.