Thanks for the input Jamie-
I had tried a solution like what you suggested (great minds think
alike right?) before posting. At first I thought it would be
perfect, but there's a problem.
With the background image solution, if everything is on one line,
great, no problems. The issue is that if the <a> spans more than one
line, the top/right background image will show on the first line, the
top right of the irregularly shaped css section that's defined by <A
href> .. </a> and I need the image to appear after the link text.
Using bottom right doesn't work either as this region won't be shown.
For demontrative purposes, take something like this
code:
<p>Very narrow column some text and <a href="link" class="email-
link">the link</a> bla bla bla</p>
displays as:
Very narraow column some text and the
link bla bla bla
I want the icon to appear after the word "link" which is the first
word on the second line. Setting to bottom right, doesn't show the
link because the bottom right of the <A> object is really below the
word "the" on the first line.
See what I mean?
Is there some css instruction to have an image (not the background,
but a regular image) keep with the previous word?
FYI - here's some jquery code that I use to append to A Href's with
jquery using a rel on the a href:
html code: <a href="bla" rel="email-link">theem...@whatever</a>
javascript:
$('a[href][rel=email-link]').each(function(i){}).append('<img src="/
icon.png" />');
you could also add a class to that like this:
$('a[href][rel=email-link]').each(function(i){}).append('<img src="/
icon.png" />').addClass('ClassName');
On Mar 13, 9:56 pm, "Jamie C." <[email protected]> wrote:
> 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- Hide quoted text -
>
> - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
--
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]
-~----------~----~----~----~------~----~------~--~---
