any other ideas out there? thanks
On Mar 14, 9:07 pm, Ken Post <[email protected]> wrote:
> 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 -- 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]
-~----------~----~----~----~------~----~------~--~---
