Liquid width solution to link with 2 background images? - html

Question

I need to give a link background styling. As the width will vary I need to use 2 images, which is why I have a span within my link.
Ive also needed to float the link left, which means I have to set paragraphs to clear both.
My solution works but it seems like a lot of css and adding extra html elements. Is there a more elegant solution?
http://jsfiddle.net/p9aXg/16/
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
<a href="#" class="my-link"><span> This is a link sdafsdafsdaf </span>
</a>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
a {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
line-height: 50px;
float: left;
}
a span {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;
height: 49px;
display: block;
padding-left: 20px;
padding-right: 40px;
}
p {
clear: both;
}

Answer 1

If you use "display;inline-block" instead of floating, you can remove a bit of the CSS.
See the updated fiddle here: http://jsfiddle.net/p9aXg/19/
a {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
display:inline-block;
}
a span {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;
line-height: 50px;
display: block;
padding-left: 20px;
padding-right: 40px;
}
As a general styling note, you should always try to avoid floating if you can. When you float an element, it takes it out of the flow of the page. This typically forces you to float other elements to make them line up as if they were in the flow of the page. I've seen it snowball to the point where every element is floated, which is simply an unnecessary headache.
Using inline-block instead of float will work most of the time. See the following links for more information:
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
http://www.vanseodesign.com/css/inline-blocks/
http://www.ternstyle.us/blog/float-vs-inline-block

Answer 2

It's possible to do this with no images and no extra elements, if you embrace 'progressive enhancement' across the range of browsers which you support. Here's an example: http://jsfiddle.net/Rt2Wa/4/
This uses CSS3 techniques to achieve a result that's as nice as your example in modern browsers, and produces a flat-but-beveled link in IE 7 & 8.
There are a few techniques at play here:
display: inline-block (mentioned by Ryan Henderson - very useful!)
border-radius
background gradient
:after pseudo-element
CSS triangles (created with a border effect).
Here's the basics of the effect (see the fiddle for a version with the vendor-prefixed styles where applicable):
a:link {
background-color: #18A580;
background: linear-gradient(to bottom, rgba(29,186,144,1) 0%,rgba(24,165,128,1) 100%);
box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.35), inset 0px 0px 1em 0px rgba(255, 255, 255, 0.4);
border-radius: 0.3em;
border-top: 1px solid #67D0BF;
border-bottom: 1px solid #18805B;
color: #FFF;
display: inline-block;
padding: 0.45em 0.75em;
text-decoration: none;
margin-bottom: 0.8em;
}
a:link:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.25em 0 0.25em 0.5em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}

Answer 3

I would use one background image and make it adjust
DEMO jsFiddle
a {
background-image: url("image.jpg");
background-repeat:no-repeat;
background-size:90% 70%;
background-position:center;
line-height: 50px;
padding:20px;
}