Well the markup I'd use would be:
<ul>
<li>
This is all of the description text. <a href="#">this is the link</a>
</li>
</ul>
(I don't think a <p> tag is necessary in this case?)
and to style it I'd have
li{position:relative;padding-bottom:30px;}
a{position:absolute;bottom:0;left:0;}
Give that a try.
On 20/07/06, Paul Bennett <[EMAIL PROTECTED]> wrote:
Hi all,
I'm trying to achieve the following:
-------------------------
* list item - loads of text here. loads of text here.loads of text here.
loads of text here.loads of text here.loads of text here.loads of text here.
http://link.here
----------------------
(note the line break between the link and the list item text)
I want to have a visual break between the text and the link without having to add a
pseudo-structural element to force the gap (eg: the awful '<br /> <br />').
I have the following CSS:
ul#private li a {
display: block;
margin: 10px 0 10px 0;
}
This has the desired visual effect but unfortunately, setting the link to
display block means I can run the mouse over text WAY to the right of where the
link text ends and the link is activated.
Can anyone think of a pure CSS & structural html way of achieving this?
Thanks,
Paul
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
