SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Read more" inline graphic link?

    Hi,

    I am in the process of trying to figure out the best way to have a "read more" background graphic link, inside a paragraph -- at end, that links to the full article.

    As I was writing my css, I realized that I have to set my link to display:block if I want to give it dimensions... This would not work so well because I need to keep it inline to the paragraph.

    I think my brain is slow right now, but does anyone know if this is possible without a lot of hacks and/or extra markup?

    I feel like I am not seeing the obvious on this one.

    Here is a small sample of what I am starting with:

    Code:
    a.more,
    a.more:link {
    	text-indent: -999em;
    	width: 9px;
    	height: 11px;
    	background: url(/images/template/more-off.gif);
    	display: block;
    	outline: none; /* For Firefox. */
    }
    HTML Code:
    <p>Lorem ipsum dolor sit amet, lacus diam commodo massa, at cursus augue neque vel, enim &hellip; <a class="more" href="#" title="Read more">Read More</a></p>
    Tips would be great.

    Thanks,
    Micky

  2. #2
    SitePoint Zealot planewalker's Avatar
    Join Date
    Jun 2007
    Location
    Somewhere witty
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably not proper code, hehe, but it worked for me (in a hurry on my way out the door messin around...

    Code:
    <style type="text/css">
    .article {width:100&#37;;}
    .article ul {list-style:none;display:inline;}
    .article .desc {float:left;}
    .article desc .readMore {width:200px;float:left;white-space:nowrap;}
       .article .readMore a:link    {}
       .article .readMore a:visited {}
       .article .readMore a:hover   {background-color:#999;}
    </style>
    Code:
    <div class="article">
     <ul>
       <li class="desc">This is the article description that would end it what you need...<li class="readMore"><a href="#">Read More</a></li></li>
     </ul>
    </div>
    Just change bg color to image.

    Like I said, it's probably not proper (has an li inside of an li, hehehe), but I thought I would mess with it before leaving (g/f is prodding me out the door now!)
    witty comment here...

  3. #3
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, interesting solution.

    I will play with your code now. Many thanks for sharing.

    Hehe, was not sure if anyone else had the urge to do similar things... Glad to see I am not the only one wanting a "read more" image.

    If I can something to work, my goal is to do a simple CSS rollover using background images.

    Anyway, thanks again for the tips planewalker, I appreciate the help.

    Have a great day/night.

    Cheers,
    M


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •