SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show url with css print stylesheet

    I have been trying to get my browsers (Opera 10.0, FF 3.0.8) to show the full urls when printing. I have

    Code:
    a:link:after, a:visited:after {
       content: " (" attr(href) ") ";
       }
    which work fine for all absolute links,

    however using
    Code:
    a[href^="/"]:after {
    # content: " <http://localhost/myhost/"attr(href)"> ";
    for relative links doesn't work, it just shows for eg. (about/aboutus.php) when I want (http://localhost/myhost/about/aboutus.php).

    Anyway to work around it?

    Thanks
    CathyM

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
     
    * {
        margin:0px;
        padding:0px;
    }a:link:after, a:visited:after {
       content: " (http://localhost/" attr(href) ") ";
       }
    </style>
    </head>
    <body>
    <a href="about/us.php">-</a>
        </body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That solution puts http://localhost/ in front of both relative and absolute links. I already have a solution to show all absolute links, I am looking for a solution to show the full url for relative links.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The easiest way I can think of is give all the relative/absolute links a class and assign the proper CSS to each....that would be easiest I would think .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a[href]:after, a[href^="http:"]:after { content: " (" attr( href ) ") "; }
    a[href^="/"]:after { content: " (http://localhost" attr( href ) ") "; }
    The problem with this, the domain is hard coded.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    What about these logic
    Code:
    <a href="index.php">-</a>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    What about these logic
    Code:
    <a href="index.php">-</a>
    Don't know, CSS is really not all that suited for this type of thing.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Javascript is probably your best solution - you could create some <span /> tags after each URL that you wanted to create (you could ignore navigation or whatnot), then tell Javascript if it should add any text, then hide those spans, only showing them on printed pages.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it to work, it seems it needed a url of '/about/about.php' to work instead of 'about/about.php'. the slash made all the difference

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yea...it needs that but I'm saying what about that? If you want a better solution and more crossbrowser use classes as I mentioned above or use JS.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

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
  •