Archief - Actief menu item weergeven.

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
A

AeroFury

Legacy Member
Ik werk nog niet lang met Dreamweaver en voor school moet ik een portfolio maken en daarin wil ik ervoor zorgen dat mijn rollover button ingedrukt blijft wanneer ik me op deze pagina bevind.

Anders gezegd: Wanneer ik op de pagina "Profiel" ben, wil ik dat de bijhorende menuknop profiel ingedrukt blijft, m.a.w dat mijn rollover image zichtbaar blijft i.p.v de standaard menuknop.

Ik heb 6 verschillende menu bottons, met elk hun aparte rollover image.

De html en css voor mijn navigatie ziet er zo uit:

html
Code: 
<div id="navigatie">
<ul>
<li><a href="index.htm" id="ProfielMenu"><span>Profiel</span></a></li>
<li><a href="traject.htm" id="TrajectMenu"><span>Traject</span></a></li>
<li><a href="showcase.htm" id="ShowcaseMenu"><span>Showcase</span></a></li>
<li><a href="links.htm" id="LinksMenu"><span>Links</span></a></li>
<li><a href="contact.htm" id="ContactMenu"><span>Contact</span></a></li>
<li><a href="sitemap.htm" id="SitemapMenu"><span>Sitemap</span></a></li>
</ul>
</div>

css (voor 1 knop)

Code: 
a#ProfielMenu 
{ 
background-image:url(Images/Profiel%20button.png);
height: 74px; 
width:153px; 
display:block; 
}

a#ProfielMenu span 
{ 
display:none; 
}

a#ProfielMenu:hover
{ 
background-image:url(Images/rollover%20profiel.png); 
}

Dus nu wil ik ervoor zorgen dat wanneer ik op de knop "Profiel" klik en ik mij op de pagina "index.htm" bevindt. De knop profiel weergegeven wordt als rollover image, dezelfde image die getoond wordt bij :hover.

Ik heb 6 verschillende buttons, dus ik kan niet 1 class maken voor de 6 buttons samen. Iedere button heeft een verschillende rollover image. Ik denk dat het daarom niet wil lukken.

Het zou echt super zijn, moest iemand me kunnen helpen..
Ik wil zelfs heel m'n html en css doorsturen incl. de images. Ik ben echt wanhopig om dit goed te krijgen
Hoe zou ik dit moeten aanpakken?
M

Metropolice

Legacy Member
Kan je dit niet makkelijk oplossen door de classe a:active de zelfde code/afbeelding te geven dan uw hover ? Zo geeft hij dezelfde image weer als de link actief is dan wanneer je erover gaat met je cursor.

Voor links heb je altijd 4 classes: link, visited, active en hover. Normaal zou het probleem dan opgelost moeten zijn.
a

adrianhates

Legacy Member
je moet een class active meegeven aan de actieve link.
a:active is wanneer je er op drukt.

(ik was een beetje te rap)
edit : Je zal nog een aparte id moeten meegeven voor je active links :)
Ik zie niet direct een andere oplossing

ff muggenziften :p
Metropolice zei:
Voor links heb je altijd 4 classes: link, visited, active en hover. Normaal zou het probleem dan opgelost moeten zijn.
Klik om te vergroten...
dat zijn selectors , niet klassen. En de volgorde is verkeerd.. ( toch vrij belangrijk bij css )
link,visited,hover,active
A

AeroFury

Legacy Member
Ik heb het gevonden.

Kzat de hele tijd te klooien in mijn template terwijl op iedere pagina de navigatie er eigenlijk anders moet uitzien. Heb dan een nieuwe editable region aangemaakt en op iedere pagina het bijhorende menu-item een extra class gegeven en die aangesproken in mijn CSS.

Dus voor mijn profielpagina bijvoorbeeld (index.htm)

Code: 
 <div id="navigatie">
    <ul>
      <li><a id="ProfielMenu" class="ProfielSelected"><span>Profiel</span></a></li>
      <li><a href="traject.htm" id="TrajectMenu"><span>Traject</span></a></li>
      <li><a href="showcase.htm" id="ShowcaseMenu"><span>Showcase</span></a></li>
      <li><a href="links.htm" id="LinksMenu"><span>Links</span></a></li>
      <li><a href="contact.htm" id="ContactMenu"><span>Contact</span></a></li>
      <li><a href="sitemap.htm" id="SitemapMenu"><span>Sitemap</span></a></li>
    </ul>
  </div>

Code: 
#ProfielMenu.ProfielSelected
{
	background-image:url(Images/rollover%20profiel.png);
}

Voor de volgende pagina (traject.htm)

Code: 
 <div id="navigatie">
    <ul>
      <li><a href="index.htm" id="ProfielMenu"><span>Profiel</span></a></li>
      <li><a id="TrajectMenu" class="TrajectSelected"><span>Traject</span></a></li>
      <li><a href="showcase.htm" id="ShowcaseMenu"><span>Showcase</span></a></li>
      <li><a href="links.htm" id="LinksMenu"><span>Links</span></a></li>
      <li><a href="contact.htm" id="ContactMenu"><span>Contact</span></a></li>
      <li><a href="sitemap.htm" id="SitemapMenu"><span>Sitemap</span></a></li>
    </ul>
  </div>

Code: 
#TrajectMenu.TrajectSelected
{
	background-image:url(Images/rollover%20traject.png);
}

Maar als ik bijvoorbeeld #TrajectMenu .TrajectSelected deed ipv aan elkaar dan ging het niet, daarom dat ik zolang zitten prutsen heb. :p Je moet wel heel exact zijn met je namen.
Kheb ook de href weggehaald zodat je niet meer op de button kan klikken. Kweet niet of dit de "correcte" methode is van werken, maar het gaat nu wel.
a

adrianhates

Legacy Member
als je #container .klasse zet dan werkt die .klasse alleen op een element dat in uw element met id #container zit.

Als je #container.klasse zet , dan werkt die .klasse alleen op het element met id #container :)


Waarom zou je je href wegdoen? Dan mis je toch compleet het punt van een link? :D
A

AeroFury

Legacy Member
Als ik op de pagina index.htm doe ik de href weg naar index.htm. De links naar de andere pagina's werken wel nog uiteraard.
Zo zie je beter op welke pagina je je bevindt imo. :p
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan