html - Active link - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #7177 @ 01.02.05 19:52

Hej,

Jeg roder lidt med HTML, CSS og PHP - er nybegynder.

Jeg har tidligere brugt frames og er nu ved at nå frem til et design hvor jeg kan undgå dette.

Jeg har en php fil for hver side og så bruger jeg php include til bla min menu i venstre side. Når man klikker på en knap i min menu åbnes den aktuelle side og jeg vil så gerne have at den aktive knap i menuen er fremhævet (lige nu står den til background-color red)!

Jeg har tidligere brugt a:active, men den virker vel ikke nu hvor det faktisk er en ny side der åbner?

Hvad gør jeg??

Dette er fra min css fil:

div.cssmenulodret a {
font-style: normal;
font-family: verdana, arial, sans-serif;
line-height: 2.2em;
text-align: center;
display:block;
margin:0;
margin-bottom:0spx;
padding-left:0px;
width:105px;
height:15px;
font-size: 66%;
font-weight:bold;
color:white;
background:#627957;
border:3px outset #81947A;
text-decoration:none;
}

div.cssmenulodret a:active {
font-style: normal;
font-family: verdana, arial, sans-serif;
line-height: 2.2em;
text-align: center;
display:block;
margin:0;
margin-bottom:0spx;
padding-left:0px;
width:105px;
height:15px;
font-size: 66%;
font-weight:bold;
color:white important;
background-color:red;
border:3px outset #81947A;
text-decoration:none;
}

div.cssmenulodret a:hover {
font-style: normal;
font-family: verdana, arial, sans-serif;
line-height: 2.2em;
text-align: center;
background-color:transparent;
font-weight:bold;
text-decoration:none;
border-style:inset;
font-size: 66%;
}

Se her http://testdomain.kongensgaard.dk/

Jeg håber nogen kan hjælpe. Java script er udelukket da jeg helst vil undgå det på mit site.

7 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #6546 @ 01.02.05 22:44

178

Desuden kan jeg ikke finde den stump kode du viser her i din css fil.

Min menu ligger i en php fil som jeg så henter ind v.h.a. include på hver side.

I min menufil angiver jeg øverst dette css link:
<link rel="stylesheet" type="text/css" href="style/stylemenu.css">

Håber det hjælper for jeg er ved at få grå hår over dette!!!

Det er egentligt lige meget hvad for en rækkefølge det står i.

Active i css, er det tidspunkt når muse-knappen holdes nede på et link.

Du kan tjekke med php, hvilken side du er på, og derefter give det link der svarer til siden en anden css class, eller ændre i dets style direkte.
Det ville være den letteste måde umidlbart.

Mvh Bob

Bruger #4468 @ 10.02.05 15:00

221

Du kan tjekke med php, hvilken side du er på, og derefter give det link der svarer til siden en anden css class, eller ændre i dets style direkte.
Det ville være den letteste måde umidlbart.

Okay, er der nogen der har lidt inspiration til hvordan jeg gør det?

Hmm vil tro du også let kan lave det med Javascript?

Bar gør så når man trykker linket så bliver den selv den rigtige farve og de andre links bliver normal farve.

Noget i stil med dette:

Kode

onclick="document.getElementById('detlinkdertrykkespåid').style.color = 'farve'; document.getElementById('1linkhvorfarvenskalgørenormal').style.color = 'den normale farve';

Håber du forstår

Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

Bruger #3275 @ 01.02.05 21:07

1.736

Jeg mener nok at css koderne skal stå i rækkefølgen

a

a:hover

a:active

Så du skal bytte rundt på din menulodret:hover og menulodret:active

-----BEGIN GEEK CODE BLOCK-----
Version: 3.12
GED d- s: a--- C++ W++ w PS X+ tv+ b D G e- h! !r z--
------END GEEK CODE BLOCK------

Bruger #3275 @ 01.02.05 21:15

1.736

Desuden kan jeg ikke finde den stump kode du viser her i din css fil.

-----BEGIN GEEK CODE BLOCK-----
Version: 3.12
GED d- s: a--- C++ W++ w PS X+ tv+ b D G e- h! !r z--
------END GEEK CODE BLOCK------

Bruger #7177 @ 01.02.05 21:20

Jeg mener nok at css koderne skal stå i rækkefølgen

a

a:hover

a:active

Så du skal bytte rundt på din menulodret:hover og menulodret:active

Det har desværre ingen effekt. :-/

Sådan ser koden ud for menuen:

<body>
<div class="cssmenulodret">
<a href="index.php">Forside </a>
<a href="chantal.php">Vores katte </a>
<a href="galleri_chantal.php">Galleri </a>
<a href="udstilling.php">Udstilling </a>
<a href="aktivering.php">Adfærd </a>
<a href="foder.php">Pasning & Pleje </a>
<a href="alarm.php">Værd at vide </a>
<a href="have.php">Udendørs liv </a>
<a href="britishshorthair.php">British Shorthair </a>
<a href="nukuld.php">Killinger</a>
<a href="brite.php">Tidligere katte </a>
<a href="kontakt.php">Kontakt </a>
<a href="gaestebog.php">Gæstebog </a>
 
<a href="http://www.kongensgaard.dk/gb_index.php" target="_top">English Version</a>
</div>
</body>

Og jeg har nu prøvet følgende i min CSS fil:

div.cssmenulodret a {
font-style: normal;
font-family: verdana, arial, sans-serif;
line-height: 2.2em;
text-align: center;
display:block;
margin:0;
margin-bottom:0spx;
padding-left:0px;
width:105px;
height:15px;
font-size: 66%;
font-weight:bold;
color:white;
background:#627957;
border:3px outset #81947A;
text-decoration:none;
}

div.cssmenulodret a:hover {
font-style: normal;
font-family: verdana, arial, sans-serif;
line-height: 2.2em;
text-align: center;
background-color:transparent;
font-weight:bold;
text-decoration:none;
border-style:inset;
font-size: 66%;
}

div.cssmenulodret a:active {
font-style: normal;
font-family: verdana, arial, sans-serif;
line-height: 2.2em;
text-align: center;
display:block;
margin:0;
margin-bottom:0spx;
padding-left:0px;
width:105px;
height:15px;
font-size: 66%;
font-weight:bold;
color:white important;
background-color:red;
border:3px outset #81947A;
text-decoration:none;
}

div.cssmenulodret a:link,
div.cssmenulodret a:visited, {
font-style: normal;
font-family: verdana, arial, sans-serif;
line-height: 2.2em;
text-align: center;
display:block;
margin:0;
margin-bottom:0spx;
padding-left:0px;
width:105px;
height:15px;
font-size: 66%;
font-weight:bold;
color:white important;
background-color:blue;
border:3px outset #81947A;
text-decoration:none;
}

Bruger #7177 @ 01.02.05 21:22

Desuden kan jeg ikke finde den stump kode du viser her i din css fil.

Min menu ligger i en php fil som jeg så henter ind v.h.a. include på hver side.

I min menufil angiver jeg øverst dette css link:
<link rel="stylesheet" type="text/css" href="style/stylemenu.css">

Håber det hjælper for jeg er ved at få grå hår over dette!!!

Bruger #7177 @ 09.02.05 20:06

Du kan tjekke med php, hvilken side du er på, og derefter give det link der svarer til siden en anden css class, eller ændre i dets style direkte.
Det ville være den letteste måde umidlbart.

Okay, er der nogen der har lidt inspiration til hvordan jeg gør det?

Active link

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler