[CSS]Horizontaal lijst navigatie probleem

[alex3305]

Wat ik wil maken is een horizontaal navigatiemenu met preloaded knoppen, welke niet zo moeilijk is. Gewoon de achtergrond laten verschuiven in CSS en dat lukt ook allemaal wel. Echter wil ik ook graag het zo maken dat ik ook een 'actieve' tab heb. Dit lukt dan weer niet helemaal.

HTML:

<div id="menu">
    <ul>
        <li id="nieuws"><span class="nodisp">Nieuws</span></li>
        <li id="team"><a href="#"><span class="nodisp">Team</span></a></li>
        <li id="pers"><a href="#"><span class="nodisp">Pers</span></a></li>
        <li id="making"><a href="#"><span class="nodisp"><a href="#">The Making of...</span></a></li>
        <li id="contact"><a href="#"><span class="nodisp"><a href="#">Contact</span></a></li>
        <li id="alphen"><a href="#"><span class="nodisp"><a href="#">Alphen 1300</span></a></li>
    </ul>
</div>

Cascading Stylesheet:

/* Menu: */

div#menu {padding: 278px 0 0 375px; width: 650px; height: 24px; position: relative; z-index: 9; text-align: left;}

ul {list-style-type: none; padding: 0; margin: 0; float: left;}
ul a {display: block; margin: 0; height: 0; overflow: hidden;}

li {display: inline; height: 24px; padding: 0 3px 0 0; margin: 0 35px 0 0;}
li a {float: left; height: 24px; padding: 0; margin: 0 35px 0 0;} 

.nodisp {position: relative; z-index: -1;}

/* Non-clickable items */
li#nieuws   {background: url(img/nieuws.jpg) 0 -2px;}
li#team     {background: url(img/team.jpg) 0 -2px;}
li#pers     {background: url(img/pers.jpg) 0 -2px;}
li#making   {background: url(img/making.jpg) 0 -2px;}
li#contact  {background: url(img/contact.jpg) 0 -2px;}
li#alphen   {background: url(img/alphen.jpg) 0 -2px;}

/* Link items */
li#nieuws a {background: url(img/nieuws.jpg) 0 -26px;}
li#team a   {background: url(img/team.jpg) 0 -26px;}
li#pers a   {background: url(img/pers.jpg) 0 -26px;}
li#making a {background: url(img/making.jpg) 0 -26px;}
li#contact a    {background: url(img/contact.jpg) 0 -26px;}
li#alphen a {background: url(img/alphen.jpg) 0 -26px;}

/* Hover items */
li#nieuws a:hover   {background: url(img/nieuws.jpg) 0 -50px;}
li#team a:hover     {background: url(img/team.jpg) 0 -50px;}
li#pers a:hover     {background: url(img/pers.jpg) 0 -50px;}
li#making a:hover   {background: url(img/making.jpg) 0 -50px;}
li#contact a:hover  {background: url(img/contact.jpg) 0 -50px;}
li#alphen a:hover   {background: url(img/alphen.jpg) 0 -50px;}

Dit lijkt me duidelijke code en als je vragen hebt, mag je die natuurlijk altijd stellen. De afbeeldingen die ik gebruik zien er zo uit:

Let overigens op dat de sporen2 link wel een prototype bevat, maar dat hiervan de CSS niet goed is in verband met dat als ik een ander item actief wil maken, dat dan het gehele menu vertiefd wordt! Dus ga hier aub niet naar kijken, maar gebruik de code boven.

Op dit moment ziet het er zo uit;


Iemand die een oplossing weet ?

[Verwijderd]

Dan kun je niet met alleen maar css doen. Dat moet je met JavaScript of serverside regelen.

Je geeft bijvoorbeeld je pagina een naam en in je menu zet je dan (pseudocode):

code:

als pagina deze naam heeft, dan actieve link

[alex3305]

Nee, dit is wel te doen volledig met CSS? Gewoon de achtergrond verschuiven bij een bepaalde pagina. Als hij dan op pagina X terecht komt dan verander ik dat met PHP en niet met Javascript. Echter wil ik de 'titel' van de pagina linkloos laten en de rest wel gelinkt laten.

[Verwijderd]

Alex3305 schreef op zondag 30 maart 2008 @ 20:04:
Nee, dit is wel te doen volledig met CSS? Gewoon de achtergrond verschuiven bij een bepaalde pagina. Als hij dan op pagina X terecht komt dan verander ik dat met PHP en niet met Javascript. Echter wil ik de 'titel' van de pagina linkloos laten en de rest wel gelinkt laten.

Ik begrijp echt helemaal niks van je reactie :D! Ik snap sowieso al niet wat je bedoelt met:

Gewoon de achtergrond verschuiven bij een bepaalde pagina.

En eerst zeg je dat je het alleen met CSS wilt doen (wat dus niet kan) en later zeg je dat je PHP hiervoor erbij wilt gebruiken

Je wilde toch dat als je op een bepaalde pagina staat, dat je dan aan het plaatje in je menu ziet op welke pagina je bent? Of wil je iets heel anders? Dan heb ik het verkeerd begrepen.

[alex3305]

Elk menu-item heeft een plaatje met drie kleuren erin, wit, oranje en geel. Nu wil ik het plaatje met de witte gebruiken voor 'actieve pagina', de oranje voor 'link' en de gele voor 'hover'.

Als dus de pagina actief staat, (dus bijv. index.php voor Nieuws) dan behoort de tekst wit te zijn en wordt het bovenste plaatje gebruikt. Is het een link dan wordt het middelste plaatje gebruikt door middel van de achtergrondverschuiving in CSS;

Cascading Stylesheet:

li#nieuws a    {background: url(img/nieuws.jpg) 0 -26px;} 

Wordt hier dan overheen gegaan met de muis, dan wordt het onderste plaatje gebruikt

Cascading Stylesheet:

li#nieuws a:hover    {background: url(img/nieuws.jpg) 0 -50px;} 

Echter wil de uitlijning in CSS in het menu niet helemaal werken en zitten hier problemen in. Zie ook het plaatje in de TS. Dus daarom vraag ik of iemand hier een oplossing voor weet?

Het actieve pagina maken gaat overigens door

HTML:

<a href="#">...</a>

toe te voegen of te verwijderen. Dus dit hoeft totaal niet met Javascript oid.

[Bozozo]

Gewoon het menu item van de actieve pagina met PHP een CSS class geven waarin staat dat de achtergrond nog wat verder moet worden geplaatst.

Overigens moet je m.i. voor een horizontale lijst de LI items links laten floaten, niet de content van de list items (in dit geval de A tags).

[Boelie-Boelie]

Niet zoiets?

• Setting the current menu state with CSS
• Highlighting current page with CSS

offtopic:
afgelopen oktober met -sandra- ook al in zo'n topic beland

[Verwijderd]

Natuurlijk kun je wel een actieve link aangeven met alleen HTML/CSS, maar dan moet je natuurlijk wel allemaal losse HTML-pagina's hebben en dat lijkt me niet zo efficient .

Jij zegt dat de uitlijning van je menu niet klopt, maar dat is toch logisch als je die achtergrondplaatjes verschillende posities geeft

Boelie-Boelie schreef op zondag 30 maart 2008 @ 21:17:

offtopic:
afgelopen oktober met -sandra- ook al in zo'n topic beland

O ja , maar die methode spreekt me nog steeds niet aan , vooral niet als het een grote dynamische site betreft. Dus bij een grote site zou ik het serverside oplossen, maar daardoor bij kleine sites ook, omdat je anders óf je stylesheet ook dynamisch moet maken, of elke keer je stylesheet aan moet passen bij een nieuwe pagina. En trouwens, als ik het goed begrepen heb wil Alex3305 ook dat de actieve link niet klikbaar is, en dat is met deze methode weer wel.

[ Voor 55% gewijzigd door Verwijderd op 30-03-2008 21:29 ]

[Verwijderd]

Per ongeluk mezelf gequote.

[ Voor 98% gewijzigd door Verwijderd op 30-03-2008 21:25 ]

[alex3305]

Bozozo schreef op zondag 30 maart 2008 @ 21:17:
...

Overigens moet je m.i. voor een horizontale lijst de LI items links laten floaten, niet de content van de list items (in dit geval de A tags).

Danku zeer!

Bozozo had gewoon het antwoord, dus heel erg bedankt. Misschien volgende keer beter lezen oid

@Sandra,
Wat jij zegt klopt niet. Als je namelijk de positie van de achtergrondafbeelding veranderd, dan veranderd niet de positie van het object (span, a, li). Overigens is de positie van de achtergrondafbeelding pas anders bij een hover of link.

Boelie-Boelie schreef op zondag 30 maart 2008 @ 21:17:
Niet zoiets?

• Setting the current menu state with CSS
• Highlighting current page with CSS

offtopic:
afgelopen oktober met -sandra- ook al in zo'n topic beland

Ook bedankt, maar zover was ik al

[Geert.H]

Als ik eerlijk ben snap ik je probleem niet helemaal.
Voor zover ik het begrijp maak je gebruik van sprites (vandaar je opmerkingen over het verschuiven van afbeeldingen (je voorbeeld afbeelding werkt namelijk niet meer). Verder werkt http://www.faut.nl/sporen/img/ prima.

Dus wat is het probleem?

Over de discussie met een id tag meegeven aan de body ben ik het eens met sandra. Tis een beetje kneuterig om dat te doen (om de reden die sandra geeft). Wat het makkelijkst is gewoon simpel het item wat actief is een class="active" meegeven.

[Bozozo]

Het standaard argument voor de 'body-id oplossing' is dat het handig werkt met statische webpagina's. Ik ben het daar niet helemaal mee eens.

Zelf gebruik ik zelfs voor statische websites (met redelijk wat content) gewoon een MySQL database en PHP. Eigenlijk is dat zonde van de serverbelasting. Je zou bijvoorbeeld offline een database met je content kunnen bijhouden, en na elke update met een druk op de knop in je CMS een map volschrijven met .html files. Je hebt misschien wat overhead in je schijfverbruik (valt wel mee als je stylesheets en script netjes buiten je html files houdt), maar dat is veel goedkoper dan processortijd.

Stel dat je voor zo'n oplossing gaat, dan heb je twee opties voor het instellen van de actieve pagina:
- De body id="home" oplossing. Voordeel: overzichtelijk want de titel van de huidige pagina staat in de source altijd op dezelfde plek. Nadeel: voor elke pagina extra CSS regeltjes nodig.
- De class="current" oplossing. Voordeel: één CSS class kan gedeeld worden onder alle pagina's, en dus in je stylesheet worden opgenomen. Nadeel: moeilijker terug te vinden in de source.

Ik zou dus voor de body id methode gaan als je toch al een apart CSS blok voor ieder actief menu item nodig hebt (zoals in dit topic: een uniek plaatje voor ieder actief menu item) en voor de class methode als je hetzelfde CSS blok gebruikt voor elk actief menu item (zoals een bepaalde backgroud-color).

edit: eigenlijk geldt bovenstaand verhaaltje trouwens ook voor pagina's die met server side logic worden samengesteld.

[ Voor 4% gewijzigd door Bozozo op 01-04-2008 09:26 ]

[r0bert]

Alex3305 schreef op zondag 30 maart 2008 @ 18:11:

HTML:

<div id="menu">
    <ul>
    [..]
        <li id="making"><a href="#"><span class="nodisp"><a href="#">The Making of...</span></a></li>
        <li id="contact"><a href="#"><span class="nodisp"><a href="#">Contact</span></a></li>
        <li id="alphen"><a href="#"><span class="nodisp"><a href="#">Alphen 1300</span></a></li>
    [..]
    </ul>
</div>

Een <a /> in een <a /> is sowieso vragen om problemen. En ze zijn ook niet afgesloten.

[ Voor 3% gewijzigd door r0bert op 01-04-2008 15:52 ]

[Verwijderd]

Bozozo schreef op dinsdag 01 april 2008 @ 09:23:
Ik zou dus voor de body id methode gaan als je toch al een apart CSS blok voor ieder actief menu item nodig hebt (zoals in dit topic: een uniek plaatje voor ieder actief menu item) en voor de class methode als je hetzelfde CSS blok gebruikt voor elk actief menu item (zoals een bepaalde backgroud-color).

Dat zou ik dan nog steeds niet doen met de body id methode, ik zou dan ook de plaatjes serverside laten maken, i.v.m. eventuele uitbreidingen van de site in de toekomst.