I’m looking for a CSS solution that would enable me to start showing a background image after the (title) text ends.
So that it would look like this:
So first title, followed by a background image that would start after the title text ends and runs all the way to the end of the line. The title length would change depending on the number of characters it contains.
Is there anyway this can be done using a single class element? I tried it using the sample on Verlee’s blog but it doesn’t quite work as I want it.
I don’t think you’ll be able to given that the text is variable width.
If you wrapped the title in a div with a background image as you want, then gave the title a background colour of white that would stop the image going behind the text.
It’s not as neat as I’d like, I’d be interested to know if there is a way of doing it…
Yes that should work in IE6 and 7 with some caveats but needs to be hidden form other browsers otherwise you will lose the text if the image is too wide.
However it is clever thinking on your part and indeed back in 2006 we had a css quiz where the solution was similar (the second example in that post).
We could roll your example and mine together to produce a cross browser solution:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
height:25px;
overflow:hidden;
position:relative;
text-align:left;
}
p:after {
background:red;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:0 0 0 5px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
p{
display:list-item;
list-style-position:inside;
list-style-image:url(images/img.jpg);/* same image goes here */
direction:rtl;
white-space:nowrap;
height:auto;
overflow:visible;
}
</style>
<![endif]-->
</head>
<body>
<p>This is the text </p>
</body>
</html>
The caveats I mentioned that for this to work in IE<8 then the element must not have a layout which rules out dimensions and overlow and float etc. There is also the problem that you can’t really fine tune the background position as you can with the background property but it may be good enough in some cases.
That’s another interesting solution. I’m not usually keen on using expressions due to their performance overheads but it keeps the code quite tidy in your example.
You’ll need a height on the absolute element and perhaps a small margin to give the text breathing space and I think we are done
Just tossed together an expression version. I prefer to use zoom, since that’s also a haslayout trigger and if we’re gonna use CSS to add the element, we might as well give it a class so you can go ahead and use other spans or b inside the tag in question. Oh, and you do NOT need to state “this” inside expressions, it is assumed.
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<title>
image after text demo
</title>
<style type="text/css">
p {
overflow:hidden;
height:25px;
zoom:expression(
runtimeStyle.zoom=1,
insertAdjacentHTML('beforeEnd','<span class="after"></span>')
);
}
p .after,
p:after {
content:" ";
display:inline-block;
width:999em;
height:25px;
margin:0 -999em 0 0.4em;
vertical-align:middle;
background:red;/* apply your image here */
}
</style>
</head><body>
<p>This is the text</p>
</body></html>
That has all kinds of possibilities for keeping the html clean when needing to support legacy IE. I could have used something like that to eliminate the empty elements I used in a recent example.
I would worry about JS being turned off for IE6/7 users either. Those folks won’t being getting very far on the web without it.
Thing is, that’s worst case scenario; IE 6/7 without javascript enabled – what’s the damage? Oh noes, they don’t get an extra presentational image… Is the functionality/usability of the page going to be hampered by this?
I think not. I may end up using this same technique for all my image replacements from now on – if just IE7 and lower user with scripting disabled will get the plaintext instead of the image… Big honking deal.
what’s the damage? Oh noes, they don’t get an extra presentational image
Whoops, that was a typo in my last post. I meant to say “I wouldn’t worry about…”
Yeah I was thinking the same thing too when I was thinking about JS off, big deal if IE<8 doesn’t get a bg image. They still get a working page.
This is the recent example I was talking about that it would work well in. Once again, if JS is off IE<8 just wouldn’t get v-a:middle text. Not a deal breaker as the page would still be functional.
The problem with this approach (and the others above) is that it fails on multi-line headings. The solution uses slightly more markup. The assumption is that the background image is matched end to end vertically.
and if we’re gonna use CSS to add the element, we might as well give it a class so you can go ahead and use other spans or b inside the tag in question. Oh, and you do NOT need to state “this” inside expressions, it is assumed.