---

Hej NG.

Jeg vil gerne lave et ToolTip på et enkelt ord. Det kan laves med span og
title:

Her er et svært ord: <span class="hardWord" title="Jeg aner ikke hvad det
betyder">sublimation</span>.

Nu vil jeg gerne fremhæve at der er hjælp at hente på ordet ved at
understrege det med en stiplet linie og ændret cursor:

..hardWord {
text-decoration: underline;
}
..hardWord:hover {
cursor: help;
}

Kan jeg ændre linien til et stiplet linie vha. CSS?
Og kan det passe at hover (på et span) ikke virker i IE? Og hvordan får jeg
det til at virke i IE?


Mvh
Stefan

---

Stefan Kristensen wrote:

> .hardWord {
> text-decoration: underline;
> }
> .hardWord:hover {
> cursor: help;
> }
>
> Kan jeg ændre linien til et stiplet linie vha. CSS?

Nej, du må i stedet bruge border:

border-bottom:1px dashed black;

> Og kan det passe at hover (på et span) ikke virker i IE?

Ja

> Og hvordan får jeg det til at virke i IE?

Ved at bruge onmouseover:

<span onmouseover="this.style????

Spørg i javascript-gruppen hvordan:

news:dk.edb.internet.webdesign.clientside

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk

---

> > .hardWord {
> > text-decoration: underline;
> > }
> > Kan jeg ændre linien til et stiplet linie vha. CSS?
>
> Nej, du må i stedet bruge border:
> border-bottom:1px dashed black;

Det er jo lige så godt

> > Og kan det passe at hover (på et span) ikke virker i IE?
>
> Ja
>
> > Og hvordan får jeg det til at virke i IE?
>
> Ved at bruge onmouseover:
>
> <span onmouseover="this.style????
>
> Spørg i javascript-gruppen hvordan:


Det gør jeg.
Tak for dine svar (og din glimragende hjemmeside).

Mvh
Stefan

---

> > .hardWord {
> > text-decoration: underline;
> > }
> > .hardWord:hover {
> > cursor: help;
> > }

Da cursor kun trigges når man peger på elementet, kan cursor: help; lægges
direkte i .hardWork

..hardWork {
color: gray;
border-bottom: 1px dashed gray;
cursor: help;
}

Hvordan får jeg stregen tættere på ordet? Jeg har forsøgt med padding-bottom
1, 0 og -1, men uden held.

Mvh
Stefan

---

> Hvordan får jeg stregen tættere på ordet? Jeg har forsøgt med
padding-bottom
> 1, 0 og -1, men uden held.

Kan du ikke lave det i stil med nedenstående?

<style type="text/css">

a.hardWord {
font-family:Trebuchet, verdana;
font-size:12px;
text-decoration: none;
color: #FF6633;
outline: none;
border-style: dotted;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 2px;
border-left-width: 0px;
cursor:help;
}


</style>

Ellers kan man måske bruge noget med line-height:0.1em;

Hilsen Martin




"Stefan Kristensen" <jems@mad.dk> wrote in message
news:420d0ff0$0$29278$14726298@news.sunsite.dk...
> > > .hardWord {
> > > text-decoration: underline;
> > > }
> > > .hardWord:hover {
> > > cursor: help;
> > > }
>
> Da cursor kun trigges når man peger på elementet, kan cursor: help; lægges
> direkte i .hardWork
>
> .hardWork {
> color: gray;
> border-bottom: 1px dashed gray;
> cursor: help;
> }
>
> Hvordan får jeg stregen tættere på ordet? Jeg har forsøgt med
padding-bottom
> 1, 0 og -1, men uden held.
>
> Mvh
> Stefan
>
>

---

Martin Ploug wrote:
> a.hardWord {
> font-family:Trebuchet, verdana;
> font-size:12px;
> text-decoration: none;
> color: #FF6633;
> outline: none;
> border-style: dotted;
> border-top-width: 0px;
> border-right-width: 0px;
> border-bottom-width: 2px;
> border-left-width: 0px;
> cursor:help;
> }

Skal border definitionen pindes ud på den måde, skal man vel også have
border-color med. Men det er lige så gyldigt bare at skrive
border-bottom:2px dotted black; - hvis man vil have prikker i stedet for
streger (dashed).

I øvrigt har du glemt at tilføje generisk font-family = sans-serif.

> Ellers kan man måske bruge noget med line-height:0.1em;

Det vil bare gøre den understregede tekst så lille, at den er ulæselig.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk

---

> > Hvordan får jeg stregen tættere på ordet? Jeg har forsøgt med
> padding-bottom
> > 1, 0 og -1, men uden held.
>
> Kan du ikke lave det i stil med nedenstående?
>
> <style type="text/css">
<snip>Formatering</snip>
> </style>
>
> Ellers kan man måske bruge noget med line-height:0.1em;

..hardWord {
color: gray;
border-bottom: 1px dashed gray;
cursor: help;
}

Giver det ønskede resultat. Jeg vil bare gerne have stregen lidt tættere på
selve ordet. Jeg vil ikke ændre font eller størrelse på ordet.

Mvh
Stefan

---

Stefan Kristensen wrote:

> .hardWord {
> color: gray;
> border-bottom: 1px dashed gray;
> cursor: help;
> }
>
> Giver det ønskede resultat. Jeg vil bare gerne have stregen lidt
> tættere på selve ordet.

Det kan du ikke, hvis du vil have den punkterede understregning.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk

---

> > .hardWord {
> > color: gray;
> > border-bottom: 1px dashed gray;
> > cursor: help;
> > }
> >
> > Giver det ønskede resultat. Jeg vil bare gerne have stregen lidt
> > tættere på selve ordet.
>
> Det kan du ikke, hvis du vil have den punkterede understregning.

ØV!
Hvad har jeg af muligheder hvis jeg ikke vil have den punkterede
undestregning?

Mvh
Stefan

---

Stefan Kristensen wrote:

> Hvad har jeg af muligheder hvis jeg ikke vil have den punkterede
> undestregning?

Hvis du bruger text-decoration, får du en ubrudt streg, som du så kan
placere over, gennem og under teksten med værdierne overline, line-through
og underline:

<span style="text-decoration:overline underline;cursor:help;"
alt="forklaring på et svært ord">sublimation</span>

Sætter en streg over og under ordet - surprise. ;)

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk

---

"Stefan" == Stefan Kristensen <jems@mad.dk> writes:

> Hej NG.
> Jeg vil gerne lave et ToolTip på et enkelt ord. Det kan laves med span og
> title:

> Her er et svært ord: <span class="hardWord" title="Jeg aner ikke hvad det
> betyder">sublimation</span>.

Brug <acronym title="Stoffers direkte overgang fra fast form til
luftform">sublimation</acronym>

Acronym er netop beregnet til det formål, og så vidt jeg husker kan
IE finde ud af noget mere med det ord.

--
/Wegge <http://wiki.wegge.dk/>
<http://wiki.wegge.dk/En_side_med_tilfaeldige_ord>
mailto:awegge@gmail.com - Invitationer på FCFS basis

---

> > Hej NG.
> > Jeg vil gerne lave et ToolTip på et enkelt ord. Det kan laves med span
og
> > title:
>
> > Her er et svært ord: <span class="hardWord" title="Jeg aner ikke hvad
det
> > betyder">sublimation</span>.
>
> Brug <acronym title="Stoffers direkte overgang fra fast form til
> luftform">sublimation</acronym>
>
> Acronym er netop beregnet til det formål, og så vidt jeg husker kan
> IE finde ud af noget mere med det ord.

IE viser godt nok selve tooltip'et, men der skal stadig bruges css for at
fremhæve ordet. <abbr> har slet ingen effekt i IE.
<acronym> og <abbr> bliver begge understreget i FF der også viser teksten
for <abbr>.

Tak for dit svar og betydningen af sublimation

Mvh
Stefan