Padding on the sides for multiline link background?

HTML & CSS
1

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:


<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

I don’t think I’d do what you’re trying to do, but if I did, I might try something like this.

<!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. :stuck_out_tongue:

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

cheers,

gary

3

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% opacity), but make the text have 100% opacity?

4

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?

5

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.

6

Unfortunately, opacity is inherited from parents (like certain unfortunate diseases). I’ve only seen trickery to get around this, such as shown here:

I always quake in my boots when I say “it’s not possible” around here! Too many clever coders. :slight_smile:

7

at least not without a bunch of clever hacks that some smartie around here may be able to conjure!

:lol: 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.

8

Hi Grifter730, welcome to SitePoint! :slight_smile:

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:


<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. :slight_smile: