/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Classes og a:hover i CSS
Fra : Ukendt


Dato : 03-12-04 21:10

Hej,

Jeg har to menuer på http://www.cfcc.dk/ (en topmenu og en menu til
venstre), og jeg ønsker, at hver menu har sin helt specielle "hover-effekt".
Kan jeg på en eller anden måde lave det med "class"?

Indtil videre er det kun lykkedes mig at hitte ud af, hvordan jeg gør
linksene i topmenuen og venstremenuen henholdsvis ikke-understeget og
understreget:

<div id="topmenu">
<p class="menupunkt2"> <!-- bare en speciel fond -->
<a href="http://www.cfcc.dk/" class="link_uden_understregning">|
Home |</a>
<!-- osv -->
</p>
</div>

a:link { color: white;
}

a.link_uden_understregning { text-decoration: none;
}


Nu kunne jeg godt tænke mig, at følgende "hover-effekt" skal være gældende
for topmenuen:

a:hover { color: white;
background-color: black;
padding: 5px 5px 5px 5px;
}


Samtidig med at følgende er gældende for den venstre menu (ingen
background-color og padding):

a:hover { color: color: #99CCCC;
}

Kan jeg på en eller anden måde strikke det sammen med "class"?


Mvh.

Martin



 
 
Bertel Lund Hansen (03-12-2004)
Kommentar
Fra : Bertel Lund Hansen


Dato : 03-12-04 21:33

Martin Nystrup Rasmussen skrev:

>Jeg har to menuer på http://www.cfcc.dk/ (en topmenu og en menu til
>venstre), og jeg ønsker, at hver menu har sin helt specielle "hover-effekt".
>Kan jeg på en eller anden måde lave det med "class"?

Ja, rimeligt let endda:

Følgende i CSS vil sætte udseendet på *alle* links i en div af
klassen topmenu. Jeg har kopieret udseendet fra et af mine egne
ark, men du kan sikkert nemt selv sætte de rigtige
specifikationer ind.

..topmenu a { text-decoration: none; }
..topmenu a:link { color: #f00; }
..topmenu a:visited { color: #a00; }
..topmenu a:hover { background: #fffcf0; }

Bemærk at den første linje fjerner understregning på alle
topmenu-links uanset hvordan de så ellers sættes nedenunder. Kun
en ny text-decoration kan ændre det.

Eksempel i HTML-koden:

<div id="topmenu">
<p class="menupunkt2"> <!-- bare en speciel fond -->
<a href="http://www.cfcc.dk/">| Home |</a>
<!-- osv -->
</div>

På tilsvarende måde laver du erklæringerne til <a> i klassen
venstremenu.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

Ukendt (03-12-2004)
Kommentar
Fra : Ukendt


Dato : 03-12-04 22:47

"Bertel Lund Hansen" <nospamius@lundhansen.dk> skrev i en meddelelse
news:bti1r0hd0d34kbbdcl360eb17cp40qoh94@news.stofanet.dk...
> Ja, rimeligt let endda:
>
> Følgende i CSS vil sætte udseendet på *alle* links i en div af
> klassen topmenu. Jeg har kopieret udseendet fra et af mine egne
> ark, men du kan sikkert nemt selv sætte de rigtige
> specifikationer ind.

<Klip>

Hej Bertel,

Tak for tippet, men umiddelbart kan jeg ikke få det til at virke. Jeg
har bl.a. sat følgende ind i min css-fil, men det virker ikke som om, at det
har nogen effekt. Topmenuen har stadigvæk links, som er understreget, og der
fremkommer ingen sort baggrund ved "hover":


..topmenu a
{
text-decoration: none;
}

..topmenu a:link
{
color: white;
}

..topmenu a:visited
{
color: white;
}

..topmenu a:hover
{
color: white;
background-color: black;
padding: 5px 5px 5px 5px;
}


Har du nogen idéer om, hvad der kan være galt?


Mvh.

Martin



JH (03-12-2004)
Kommentar
Fra : JH


Dato : 03-12-04 23:07

Martin Nystrup Rasmussen wrote:
> Har du nogen idéer om, hvad der kan være galt?

Bertel er kommet til at skrive id i div-tag'et. Der skulle have stået
class istedet. Altså:
<div class="topmenu">

Eller også skulle CSS-klasserne ikke have været defineret som klasser,
men således:
#topmenu a { text-decoration: none; }
#topmenu a:link { color: #f00; }
#topmenu a:visited { color: #a00; }
#topmenu a:hover { background: #fffcf0; }

You choose...

--
Mvh
Jeppe

We have unmistakable proof that throughout all past time, there has been
a ceaseless devouring of the weak by the strong.

Ukendt (03-12-2004)
Kommentar
Fra : Ukendt


Dato : 03-12-04 23:50

"JH" <spam@spam.com> skrev i en meddelelse
news:js5sd.2010$Jt5.1417@news.get2net.dk...
> Bertel er kommet til at skrive id i div-tag'et. Der skulle have stået
> class istedet. Altså:
> <div class="topmenu">

Søreme ja, Jeppe. Mange tak. Nu virker det: linksene i menuerne har nu
forskellige egenskaber.


Mvh.

Martin




Jens Gyldenkærne Cla~ (03-12-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 03-12-04 23:00

Martin Nystrup Rasmussen skrev:

> Tak for tippet, men umiddelbart kan jeg ikke få det til at
> virke.

Har du et link til din side? Det er meget lettere at hjælpe hvis
man kan se siden online.

Se evt. artiklen her: <http://infimum.dk/HTML/hjaelpmig.html>.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Ukendt (03-12-2004)
Kommentar
Fra : Ukendt


Dato : 03-12-04 23:07

"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev i en meddelelse
news:Xns95B4EA04AE23Djcdmfdk@gyrosmod.cybercity.dk...
> Har du et link til din side? Det er meget lettere at hjælpe hvis
> man kan se siden online.

Jo da :

http://www.cfcc.dk/


Mvh.

Martin



Søg
Reklame
Statistik
Spørgsmål : 177559
Tips : 31968
Nyheder : 719565
Indlæg : 6408935
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste