SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding on the sides for multiline link background?

    Hi, I have a link that spills over to a 2nd line. This link has a background color. When I put padding on the left and right side, the top line only gets the left padding, and the bottom line only gets right padding.

    Can someone tell me how I can make it so that the padding affects both lines without having to separate the link or put a break?

    I'm including an image of what it should look like.



    And here's the code I'm using:
    Code:
    <html>
    <head>
    <style>
    
    a {
    padding: 0;
    color: #999;
    background-color: black;
    font-size: 40px;
    font-family: sans-serif;
    text-decoration: none;
    }
    
    a:hover{
    text-decoration: underline;
    }
    
    a span{
    	margin: 0 30px 0 30px;
    	background-color: black;
    }
    
    </style>
    </head>
    <body>
    <a href=""><span>This is my very long link that I want to go to two lines and still retain the padding on both the left and right side.</span></a>
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Grifter730, welcome to SitePoint!

    Anchors are inline elements, meaning that the browser sees them as a "one line" element rather than a block element, even if the line wraps.

    It's best to nest an inline element in a block-level element anyway, so I've changed your code so that the link is inside a paragraph:

    Code:
    <html>
    <head>
    <style>
    
    a {
    padding: 0;
    color: #999;
    background-color: black;
    font-size: 40px;
    font-family: sans-serif;
    text-decoration: none;
    
    }
    
    a:hover{
    text-decoration: underline;
    }
    
    p {
    margin: 0;
    padding: 0 30px;
    background-color: black;
    width: 700px;
    }
    
    </style>
    </head>
    <body>
    <p><a href="">This is my very long link that I want to go to two lines and still retain the padding on both the left and right side.</a></p>
    </body>
    </html>
    Hope that helps.

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph, the code you used makes it so that the whole text is essentially placed inside of a rectangle that gets filled in black. In the example image I linked, only the background of the text link is filled in black, and if there's no text, there's no background color (notice how the right side is uneven). The problem is that I want to put some padding to the sides and retain the background color.

    Any ideas?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, sorry, I realized that code I posted wasn't what you wanted. I did experiment around a bit, with no luck. To be honest, I don't think what you are aiming for is possible—at least not without a bunch of clever hacks that some smartie around here may be able to conjure!

    It might be better to rethink this layout, I'm afraid.

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehe, no biggie. If there's no simple solution, that's not a problem. My main concern was just making sure that I'm not missing anything obvious. I wracked my brains for several hours just trying to figure out a way to do it, but if it's not possible, I'll just go ahead and use the block background.

    I saw people messing with negative text-indent while using padding as well, but I never could quite get it to work right.

    On a related note, how do I make that block background to have transparency (say, 50&#37; opacity), but make the text have 100% opacity?

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    at least not without a bunch of clever hacks that some smartie around here may be able to conjure!
    I'm usually up for a good challenge but your right Ralph, this ain't gonna happen with html and css.

    You might be able to pull it off with some silly script that adds padding to the first and last text nodes of each new line. I don't even know for sure if that's possible.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Grifter730 View Post
    On a related note, how do I make that block background to have transparency (say, 50% opacity), but make the text have 100% opacity?
    Unfortunately, opacity is inherited from parents (like certain unfortunate diseases). I've only seen trickery to get around this, such as shown here:

    http://css-tricks.com/non-transparen...rent-elements/

    Quote Originally Posted by Rayzur View Post
    I'm usually up for a good challenge but your right Ralph, this ain't gonna happen with html and css.
    I always quake in my boots when I say "it's not possible" around here! Too many clever coders.

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think I'd do what you're trying to do, but if I did, I might try something like this.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
            
    
      <title>Test Page</title>
      <style type="text/css">
    /*<![CDATA[*/
      p {
        background-color: gray;
        font-size: 40px;
        height: 6.5em;
        margin: 0;
        width: 15em;
        }
    
      b {
        background-color: black;
        float: left;
        width: 40px;
        height: 100&#37;;
        }
    
      span {
        color: white;
        display: block;
        padding: 0 40px 0 0;
        }
    
      a {}
        
    
      span span {
        background-color: black;
        display: inline;
        }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <p><b>&nbsp;</b><span class=""><a href=""><span>This is my very
      long link&nbsp;&nbsp;&nbsp; that I want to go to
      two&nbsp;&nbsp;&nbsp; lines and still retain the padding on both
      the left and right side.</span></a></span></p>
    </body>
    </html>
    Notice the container's height must be well adjusted. See, too, the jiggery-do used to simulate right padding on the first two lines.

    The problem is that you can't make an element act as both inline and something else at the same time. If you didn't want the ragged right with padding ….

    Talk about a kluge.

    Apropos of nothing at all, the <a> element may not be a child of <body>.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


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
  •