CSS placement of text

Question

Anyone know how I can get "Posted by AUTHOR on April 3rd, 2010 | 0 Comments" underneath the headline of the news links WITHOUT it being apart of the A CLASS? I want it to look, read, and function like:

[IMAGE] HEADLINE
        Posted by AUTHOR on April 3rd, 2010 | 0 Comments

All of that in the initial looking field, then the user can click and it expands further. I can obviously get it to work if I put it in the A CLASS tag, but that's the problem. I can't have it there.

EDIT: Forgot to show you guys what I'm currently trying to create with this; http://www.notedls.com/demo

Answer 1

Hard to say without seeing the markup, but this css2 selector pattern matching spec might help you. You can use sibling, child, descendant selectors.

Also, you may try the DL/DD/DT html elements:

<DL>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
</DL>

I don't have any experience using those elements, but my understanding is that they render similar to the example you posted.

Check them out at DL, DD, DT and on the w3 site

Answer 2

I see you already have a rule to target the div that contains the additional text: its ul#acc1 > li > div and has a padding of 65px, which is currently the same as the size of the images you use. But you can easily increase it to get more indentation.

also, you probably want to drop the 'width' specifications from the internal <ul> and <li> elements - these are all block level elements that by default expand to take the full width available to them. By specifying exact width for these you freeze their size and prevent them from flowing properly when the display changes due to different font sizes, screens, etc. Also if you ever change widths or paddings of something (like I recommend above), you will have to recalculate all the widths anyway. With the default of width: auto you don't have to worry about these things.