Toon posts:

[CSS] Huidige pagina aanduiden in navigatie

Pagina: 1
Acties:
  • 201 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Hoi!

Ik zou graag de navigatie van mijn site http://www.900degrees.be verbeteren door de tekst in m'n navigatie een ander kleurtje te geven. Ik dacht dit op te lossen door een extra <div id="current"> toe te voegen, en dan natuurlijk mijn CSS aan te passen. Maar dit vern**kt de opmaak... Is er iemand die weet hoe ik dit mooi kan doen?
Navigatie (HTML):
code:
1
2
3
4
5
6
7
8
9
10
<div id="navigatie">
                <ul>
            <li><a href="http://www.900degrees.be">900&deg;</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="http://tim.vanschoote.be/blog">Blog</a></li>
            <li><a href="links.html">Links</a></li>
            <li><a href="photo.html">Photo's</a></li>
            <li><a href="school.html">School</a></li>
        </ul>
</div>

CSS code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#navigatie
{
    text-align: center;
    word-spacing: 30px;
    font-size: large;
    border-top: 3px solid #959596;
    border-bottom: 3px solid #959596;
    background-color: #D3D3D3;
    margin-bottom: auto;
}

#navigatie ul li
{
    
    list-style-type: none;
    display: inline;
}

#navigatie a
{
    color: #06c;
    text-decoration: none;
}

#navigatie a:hover
{
    color: #E44600;
    border-bottom: 4px solid #ff8400;
    padding-bottom: 2px;
    text-decoration: none;
}


Wie helpt mij? De oplossing lijkt me simpel maar ik vind het niet direct...

Ik heb ook nog een tweede vraag: ik heb een gratis domeinnaam kunnen aanvragen (www.900degrees.be), maar als je daar naar toe gaat, zie je mijn webspace van mijn provider (users.fulladsl.be/spb2827). Is er een mogelijk om dit te verbergen? Ik heb géén webspace bij die gratis domeinnaam...

Verwijderd

Waarom een <div id="current"> toevoegen, als je die id="current" gewoon op de li of a elementen kunt zetten?

  • TheDane
  • Registratie: Oktober 2000
  • Laatst online: 24-04 11:34

TheDane

1.618

deze topic al bekeken :?

Verwijderd

Topicstarter
Deze heb ik bekeken ja, maar er is daar niet echt een oplossing uit gekomen...
Allee het kan toch niet zo moeilijk zijn?

Zo denk ik dat ik het moet doen:
code:
1
2
3
4
5
6
7
8
9
10
    <div id="navigatie">
        <ul>
            <li><a id="current" href="http://www.900degrees.be">900&deg;</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="http://tim.vanschoote.be/blog">Blog</a></li>
            <li><a href="links.html">Links</a></li>
            <li><a href="photo.html">Photos</a></li>
            <li><a href="school.html">School</a></li>
        </ul>
    </div>


En dan natuurlijk CSS:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#navigatie
{
    text-align: center;
    word-spacing: 30px;
    font-size: large;
    border-top: 3px solid #959596;
    border-bottom: 3px solid #959596;
    background-color: #D3D3D3;
    margin-bottom: auto;
}

#navigatie ul li
{
    
    list-style-type: none;
    display: inline;
}

#navigatie a
{
    color: #06c;
    text-decoration: none;
}

#navigatie a:hover
{
    color: #E44600;
    border-bottom: 4px solid #ff8400;
    padding-bottom: 2px;
    text-decoration: none;
}

#navigatie a:active
{
    color: #FF4500;
    border-bottom: 4px solid #FF4500;
    padding-bottom: 2px;
    text-decoration: none;
}

#current
{
    color: Fuchsia;
}


Wie kan mij helpen met dit zo eenvoudige maar onnozel probleem? :(
ik zal het overigens niet in fuchsia zetten :+ gewoon om het duidelijk te maken

Verwijderd

Verwijderd schreef op zondag 13 november 2005 @ 14:14:
[...]


Allee het kan toch niet zo moeilijk zijn?

Zo denk ik dat ik het moet doen:
U gaat door voor de koelkast.
Al zou ik ipv een ID een class gebruiken, een ID is nl. uniek.

[ Voor 13% gewijzigd door Verwijderd op 13-11-2005 14:31 ]


Verwijderd

Letterlijk uit dat andere topic:
Verwijderd schreef op zaterdag 12 november 2005 @ 16:56:
Je maakt het jezelf vooral moeilijk als je de verkeerde volgorde gebruikt (minder specifieke regels kun je beter eerst opschrijven, specifiekere regels later), of als je niet specifiek genoeg bent bij het overriden van eerdere rules.
Verander in je stylesheet die #current eens in #navigatie a#current
Gaat er meteen een wereld voor je open, nietwaar?

Toch opvallend dat zoveel mensen problemen hebben met het cascadende deel van CSS.

Verwijderd

Topicstarter
Verwijderd schreef op zondag 13 november 2005 @ 14:32:
Letterlijk uit dat andere topic:

[...]


Verander in je stylesheet die #current eens in #navigatie a#current
Gaat er meteen een wereld voor je open, nietwaar?

Toch opvallend dat zoveel mensen problemen hebben met het cascadende deel van CSS.
Dit deed het hem! Erg bedankt! :>
Ik ben nog maar een CSS-beginneling, mijn excuses ;(
Pagina: 1