[CSS] Links active/hover/normal

[Verwijderd]

Hallo.. im cracking my skull here:

Cascading Stylesheet:

/********************************************************************************************************/ 
/*                                                                                                      */
/*                                          headermenu + mouseovers                                     */ 
/*                                                                                                      */
/********************************************************************************************************/ 

#navbar li {
    float: left;
}

#navbar a {
    text-decoration: none;
    display: block;
    height: 53px;
    text-indent: -5000px;
    background-image: url(../images/navbar.jpg);
    background-repeat: no-repeat;
}

/********************************************************************************************************/ 
#navbar #index {
    background-position: 0px 0px;
    width: 106px;
}

#navbar #index:hover {
    background-position: 0px -53px;
}

#navbar #index:active {
    background-position: 0px -53px;
}

/********************************************************************************************************/ 

#navbar #account {
    background-position: -106px 0px;
    width: 145px;
}

#navbar #account:hover {
    background-position: -106px -53px;
}

#navbar #account:active {
    background-position: -106px -53px;
}

/********************************************************************************************************/ 

#navbar #artikel {
    background-position: -251px 0;
    width: 139px;
}

#navbar #artikel:hover {
    background-position: -251px -53px;
}

#navbar #artikel:active {
    background-position: -251px -53px;
}

/********************************************************************************************************/ 

#navbar #contact{
    background-position: -389px 0px;
    width: 145px;
}

#navbar #contact:hover {
    background-position: -389px -53px;
}

#navbar #contact:active {
    background-position: -389px -53px;
}

HTML

<!--- Header menu --->

<div id="headermenu">

<ul id="navbar">

<li><a href="index.php" id="index">index</a></li>

<li><a href="profile.php" id="account">account</a></li>

<li><a href="voorwerp.php" id="artikel">voorwerp</a></li>

<li><a href="help.php" id="contact">help</a></li>

</ul>

</div>

<!--- Einde headermenu --->

Voorbeeld:

Mn link hoort als active te blijven staan maar het gebeurt niet...
dat is toch waar 'active' voor staat

[ Voor 20% gewijzigd door Verwijderd op 05-10-2007 10:18 ]

[BtM909]

Mijn god he, je hebt zeker tijd teveel

Kijk eens hier Overzicht van UBB-codes #tag_code en plaats je code gewoon netjes tussen [code=css][/] ipv die rare tabel

Daarnaast mis ik een beetje wat je zelf hebt geprobeert. Probeer zelf even een test case te maken met een voorbeeld en leg uit wat er gebeurt en wat niet zo moeten kloppen met wat je wilt bereiken

[Verwijderd]

http://groep1.sites.icaprojecten.nl/site/arjantest/index.php

Daar staat mijn voorbeeld..
wat niet lukt is dat je op de pagina waar je op dat moment ZIT dat grijze blokje ook moet blijven staan
daar staat active voor en in andere gevallen werkt het wel

ik zeg hier duidelijk

Cascading Stylesheet:

[/#navbar #contact:active {
    background-position: -389px -53px;
}

dat bij een actieve link het plaatje 'navbar' op die manier weergeven moet worden
(plaatje:)

[ Voor 34% gewijzigd door Verwijderd op 05-10-2007 10:26 ]

[scorpie]

In CSS zijn de links volgorde gevoelig. Ik weet de precieze volgorde ook even niet meer, maar zal het even opzoeken. Ondertussen kun je wel kijken of jij het sneller vindt dan ik

edit:
ok, gewoon gevonden op w3schools:
http://w3schools.com/css/pr_pseudo_hover.asp

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

hmm maar volgens mij heb je dat ook gewoon of ik heb nog niet genoeg koffie op =]

edit2:
Probeer eens de overige CSS link definitions toe te voegen, je hebt nu alleen maar een hover en active, maar geen link zelf of een visited.

Cascading Stylesheet:

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

[ Voor 75% gewijzigd door scorpie op 05-10-2007 10:51 ]

[Verwijderd]

Jep volgens mij heb ik de volgorde wel goed staan...

en ik heb zojuist om het uit te sluiten toch de volgorde even aangepast naar

Cascading Stylesheet:

#navbar #contact{
    background-position: -389px 0px;
    width: 145px;
}

#navbar #contact:active {
    background-position: -389px -53px;
}

#navbar #contact:hover {
    background-position: -389px -53px;
}

En dit werkt alsnog niet.. I need som coffee too

*edit even je laatste message-edit testen*
*edit2 dat werkt ook niet :(*

Cascading Stylesheet:

/********************************************************************************************************/ 

#navbar #contact {
    background-position: -389px 0px;
    width: 145px;
}

#navbar #contact:visited {
    background-position: -389px 0px;
    width: 145px;
}

#navbar #contact:hover {
    background-position: -389px -53px;
}

#navbar #contact:active {
    background-position: -389px -53px;
}

Geen resultaat

[ Voor 40% gewijzigd door Verwijderd op 05-10-2007 10:57 ]

[scorpie]

En de unvisited link?

BTW waarom gebruik je 2x #? Moet dat niet #navbar.contact zijn? Of is dit speciale code voor een aparte browser?

[Verwijderd]

Om aan te geven op welke pagina je zit, zul je serverside (of eventueel met JavaScript) op moeten lossen, dat kan niet met CSS, active in CSS wil zeggen de status van de link op het moment dat je 'm aanklikt.

Door middel van een serverside taal (bijvoorbeeld PHP) geef je op de juiste pagina aan op welke pagina je je bevindt, in de html geef je de link een id en in de CSS style je die link.

[Verwijderd]

scorpie schreef op vrijdag 05 oktober 2007 @ 11:12:
En de unvisited link?

BTW waarom gebruik je 2x #? Moet dat niet #navbar.contact zijn? Of is dit speciale code voor een aparte browser?

Wat bedoel je met unvisited?
Ik heb nu de 4 zoals eigenlijk overal op elke pagina over css links staat gebruikt

Cascading Stylesheet:

#navbar #contact {
    background-position: -389px 0px;
    width: 145px;
}

#navbar #contact:visited {
    background-position: -389px 0px;
    width: 145px;
}

#navbar #contact:hover {
    background-position: -389px -53px;
}

#navbar #contact:active {
    background-position: -389px -53px;
}

Link gewoon
Visited link
Hover link
Active link... nog niets..


# 2x is omdat
#navbar het plaatje is en #contact de id van de link waar hij naar toe linkt (html code)

HTML:

<ul id="navbar">
  <li><a href="index.php" id="index">index</a></li>
  <li><a href="profile.php" id="account">account</a></li>
  <li><a href="voorwerp.php" id="artikel">voorwerp</a></li>
  <li><a href="help.php" id="contact">help</a></li>
</ul>

[ovvessem]

a:active zal hier niet snel werken omdat je linkt naar een externe pagina.
Je kunt dit oplossen door een klein stukje php toe te voegen bovenaan je pagina's en
een CSS class te maken voor je active.

Met het stukje PHP controleer je welke pagina je open hebt staan en welke
<a href> in je header dus de class="active" moet krijgen.

Dit zou je simpel met een

code:

<?php if else ?>

kunnen doen.

[Verwijderd]

maar zou ik nu aan mijn hoverlink nog steeds een javascript kunnen toevoegen (drop down menu)
volgens mij kan door mijn manier van schrijven geen extra optie aan een knop worden toegevoegd

omdat je niet echt een knop hebt maar een totaal image met meerdere knoppen en dmv css een stukje uitkiest wat actief moet zijn als link

weet iemand hier iets meer van?
javascript functie eraan toevoegen

of moet ik gewoon die hele hover-functie anders gaan schrijven?

[Boelie-Boelie]

Verwijderd schreef op vrijdag 05 oktober 2007 @ 11:13:
Om aan te geven op welke pagina je zit, zul je serverside (of eventueel met JavaScript) op moeten lossen, dat kan niet met CSS

Het kan wel met CSS. Stel ik heb pagina's A, B en C. Ik geef elke paginabody een eigen id/class mee, voor het gemak corresponderend met de paginanaam (dus pagina A krijgt id="A", etc.). Daarnaast geef ik elk menu-item een eigen id/class, corresponderend met de naam van het menu-item (dus menu-item A krijgt id="item-A", etc.).

Op die manier kan ik ervoor zorgen dat menu-item A op pagina A gehighlight is, terwijl hij op andere pagina's de normale kleur heeft, gewoon door #A #item-A, #iB #item-B, #C #item-C {background: red}, terwijl de default menu-itemkleur bijvoorbeeld li a {background: yellow} is. Door CSS-specificiteit kun je die defaultregel overrulen.

www.google.nl/search?q=css+current+page

[Verwijderd]

Boelie-Boelie schreef op vrijdag 05 oktober 2007 @ 22:54:
Ik geef elke paginabody een eigen id/class mee, voor het gemak corresponderend met de paginanaam (dus pagina A krijgt id="A", etc.). Daarnaast geef ik elk menu-item een eigen id/class, corresponderend met de naam van het menu-item (dus menu-item A krijgt id="item-A", etc.).

Maar dan zou je dus elke pagina een ander id moeten geven, dat lijkt me ook niet echt handig. Dan is het toch makkelijker om het serverside te regelen, en al helemaal als je pagina's dynamisch gegenereerd worden en je dus een onbeperkt aantal pagina's hebt.

Maar goed, ik heb er inderdaad nooit over nagedacht dat het met CSS zou kunnen, maar de methode spreekt me ook niet echt aan .