Ken,
I would add a class to these mail links like .email-link for example. Then
for that class use the image as a background image and give it some padding
on the appropriate side.
Example:
.email-link {
padding-right:15px;
background: transparent url("emailicon.gif") no-repeat top right;
}
That way all you have to do is put <a class="email-link" href="mailto:
bobjo...@thedomain">Bob Jones</a>
If you are sing jQuery you coul goes a far to just add the class to mailto
links. I am a little weak on that side but maybe something like:
$('a...@href^=\"mailto:\";]').addClass('email-link');
Best of Luck,
Jamie
On Fri, Mar 13, 2009 at 9:22 AM, Ken Post <[email protected]> wrote:
>
> Hi all-
>
> I'm looking to do something that I'd think has been done many times
> before, I'm just not finding it...
>
> After all email links on an intranet site we have, we show an envelope
> icon. Simple enough:
>
> <p>This is a topic here If you are looking for help on this, please
> contact <a href="mailto:bobjo...@thedomain";>Bob Jones<img
> src="emailicon.gif" style="width:10px;height:10px;" /></a></p>
>
> If in the paragraph "Bob" is on the first line and "Jones" is on the
> second, that's fine, the whole think is linked, including the icon
> which will be inline, right after "jones" on the second line.
>
> The issue occurs when "Jones" is at the end of the first line and
> there's no more room for the image. This keeps "Bob Jones" on the
> first line, but moves only the image to the second line, which looks
> silly.
>
> Now, I could surely use "white-space:nowrap" in the <A> style, but
> that would cause "Bob Jones" to move to the second line, when what I
> really want is only "Jones" to move to the second line.
>
> Is there some "keep-with-previous-word" type of css that i could set
> on the style of the image?
>
> Now, I am using jquery to insert the image, and maybe there's some
> kind of modification that I can do to only the last word, like adding
> a div with no wrap...
>
> Thanks in advance for you ideas.
> Ken
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
