Could use some help with a bit of CSS...

OK, so I'm styling a NSP module in order to look like this the bottom left hand side module of the postnote template of Gavick:

layout_2011-02-24.jpg

I'm nearly there. The only thing I can't seem to work out is why the different pieces of text (Header, Author, Text) do not want to align vertically underneath each other to the right of the date block (see: www.changingplanet.co.uk/test).

I'm using the following settings:

[attachment]Settings.jpg[/attachment]

In here I have added some code in the following fields in order to style the date block:

Second Info Format:

Code: Select all

<div class="nsp_author">Published by: %AUTHOR [%COMMENTS]</div>

Date:

Code: Select all

<div class="nsp_date"><span class="nsp_day">%d</span><span class="nsp_month">%B</span></div>

I've tried everything with "float" and "clear" in CSS, but it just refused to do what I want it to do. Any thoughts?

I've added the float:left for the .nsp_art div element and get the layout in attached image, this is the effect that you desire ?

Clipboard01_2011-02-25.jpg

It's a start, bkrztuk, but I'd also like the text of the message and the read more to in line with each other to the right of the date block. basically like the items within the highlighted purple box below (mind you, the purple box is just for illustrative purposes).

layout_2011-02-25.jpg

Try to add for element

Code: Select all

.nsp_art p.nsp_text {clear: none; float: none}

and next you need only to add paddings for text block

Clipboard01_2011-02-25-2.jpg

Ah, that solves it partially. However, now the "author" and "text" wraps around the "header" on the right hand side:

layout_2011-02-25-5.jpg

This issue you can fix by padding-top and padding-left, look at the paddings at firebug window.

Ah, that figures... been staring myself blind for days! Ok, I've changed some more parameters and this is what I got now:

layout_2011-02-25-6.jpg

Two things that hopefully you can help with:

1) How do I drag the "prev/next" navigation bit into the top-right hand side of the white border?
2) Why is there such a large piece of white beneath the "readmore" button, ideally I'd want that to be 20px.

Sorry to keep pestering you, but I've been trying to do this for three days now.

1/ It could be hard, please try to move interface to bottom.
2/ The next slides have more text and fill this space, you need to cut text length in module options.

Ok, I can live with that. However, one thing.. if you go to the third slide, you'll see that the "Author" element is within the "txt" element. How can you solve this?

layout_2011-02-25-7.jpg

NVM, think I've got it sorted. Thanks for your help

+1 karma for your next life