tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
1198
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 15.06.10 17:11 #1
    AnjaR AnjaR ist offline Rookie
    Registriert seit
    Jun 2010
    Beiträge
    6
    Hallo zusammen!

    ich möchte eine Navigation mit unterschiedlichen Linkzuständen für jeden einzelnen Menüpunkt erstellen. Das funktioniert auch soweit. ich möchte jedoch das jedes seite ein anderes navigationsbild hat wenn ich gerade auf der seite bin. ich würde dies gerne über <li id=aktuell ... machen. Meine Frage ist jetzt: wie kann ich im css auf die einzelnen aktuellen bilder zugreifen? Bin noch Anfänger, deshalb weiss ich nich ob das ne überflüssige Frage ist die bilder wechseln schon beim hover, active zustand aber ich weiss nicht wie ich genau im css auf #aktuell zugreifen muss...

    Für einen Tipp wär ich sehr dankbar!



    hier mal mein aktueller html-part der navi:
    HTML-Code:
    <div id="navigation">
        <ul>
             <li id="aktuell"><a class="link1" href="index.html"></a></li>
             <li><a class="link2" href="überuns.html"></a></li>
            <li><a class="link3"  href="#" ></a></li>
            <li><a class="link4"  href="#" ></a></li>
             <li><a class="link5"  href="#" ></a></li>
        </ul>
             <br style="clear:both;" />
   
</div>


    und der entsprechende css-part:



    Code css:
    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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

    /******NAVIGATION*********/
#navigation{
    
    margin: 200px 0 20px 10px;
}
 
 
#navigation ul{
    list-style: none;
    margin: 0;
    padding: 0;
 
}
 
 
 
#navigation li {
    float:left;
    margin-left:5px;
    
    }
    
 
#navigation a {
    display:block;
    height:83px;
    margin-left: 15px;  
}   
/*************LINK1***/
 
a.link1:link,a.link1:visited {
    width:98px;
    background-image:url(../images/home-ohne.png);
    
    
}
 
 
a.link1:hover {
    width:98px;
    background-image:url(../images/home-grau.png);
    
    
    
}
 
 
 
 a.link1:active,a.link1:focus{
     width:98px;
    background-image:url(../images/home-mit.png);
     
     
     
}
 
 
#navigation#aktuell a{
    
    
    
}
    Geändert von Maik (15.06.10 um 17:16 Uhr) Grund: Quellcode in Syntax-Highlighter gepackt
     
    Zitieren Zitieren
  2. 15.06.10 17:15 #2
    Maik Tutorials.de Gastzugang
    Hi,

    nutze bitte zukünftig in deinen Beiträgen die Syntax-Highlighter (hier: [html] [/html], [css] [/css], [code] [/code]) für deine Quellcode-Präsentationen - vielen Dank!

    Grundsätzlich lautet hier der Selektor für den ersten Menüpunkt "Home":

    Code css:
    1
2
3

    #navigation #aktuell a.link1:link, #navigation #aktuell a.link1:visited {
background-image:url(../images/home-xxx.png);
}

    Zu beachten sind im Vergleich zu seinem Ansatz die Leerzeichen zwischen den ID-Bezeichnern, da es sich hier um einen Selektor für Nachfahren handelt.

    Sofern es sich um dieses Hintergrundbild handeln sollte, werden die bestehenden gruppierten Selektoren folgendermaßen erweitert:

    Code :
    1
2
3
4
5

    a.link1:active,a.link1:focus[b], #navigation #aktuell a.link1:link, #navigation #aktuell a.link1:visited[/b] {
width:98px;
background-image:url(../images/home-mit.png);
 
}


    Für den zweiten Menüpunkt gilt demnach:
    HTML-Code:
    <div id="navigation">
        <ul>
             <li><a class="link1" href="index.html"></a></li>
             <li id="aktuell"><a class="link2" href="überuns.html"></a></li>
             <li><a class="link3"  href="#" ></a></li>
             <li><a class="link4"  href="#" ></a></li>
             <li><a class="link5"  href="#" ></a></li>
        </ul>
        <br style="clear:both;" />
</div>
    Code css:
    1
2
3

    #navigation #aktuell a.link2:link, #navigation #aktuell a.link2:visited {
background-image:url(../images/xxx-xxx.png);
}
    bzw.
    Code :
    1
2
3
4

    a.link2:active,a.link2:focus[b], #navigation #aktuell a.link2:link, #navigation #aktuell a.link2:visited[/b] {
...
 
}


    Eine alternative Art der Selektor-Definitionen wird in dem Artikel Highlighting current page with CSS vorgestellt. Hier wird sich stattdessen auf den benannten ID-Bezeichner im <body>-Tag der einzelnen Seiten bezogen.

    mfg Maik
     
    Zitieren Zitieren
  3. 15.06.10 20:40 #3
    AnjaR AnjaR ist offline Rookie
    Registriert seit
    Jun 2010
    Beiträge
    6
    Super! vielen lieben Dank!
     
    Zitieren Zitieren
  4. 15.06.10 20:55 #4
    Maik Tutorials.de Gastzugang
    Ich empfehle dir, dich mit CSS Sprites näher zu beschäftigen.

    Bei dieser Technik sind alle Link-Zustände in einer einzigen Grafikdatei vereint, und der entsprechende Bildausschnitt wird mittels background-position im Anzeigebereich des Links sichtbar.

    Die Vorteile:
    1. Weniger HTTP-Requests, da nur noch eine einzige Grafikdatei vom Server geladen wird.
    2. Kein kurzes "Flackern" beim erstmaligen Überfahren der Verweise, da zu diesem Zeitpunkt erst die "Hover"-Grafikdatei vom Browser angefordert wird.

    Ein Beispiel im kleinen Maßstab, wo ich für jeden Menüpunkt eine gesonderte Grafikdatei verwendet habe, kannst du im zweiten Teil meines Tutorials CSS-Rollover unter dem Abschnitt "CSS-Rollover mit background-position" entnehmen.

    mfg Maik
     
    Zitieren Zitieren
  5. 16.06.10 11:13 #5
    AnjaR AnjaR ist offline Rookie
    Registriert seit
    Jun 2010
    Beiträge
    6
    ok werde ich mir anschaun! danke
     
    Zitieren Zitieren
« Wie werden diese PNG-Grafiken im IE6 transparent angezeigt? | Navigation mit dritter Ebene »

Ähnliche Themen

  1. Vorher besuchte Seite ermitteln
    Von Schumiel im Forum PHP
    Antworten: 14
    Letzter Beitrag: 27.05.09, 09:34
  2. Aktuelle Seite hervorheben
    Von xollo im Forum PHP
    Antworten: 3
    Letzter Beitrag: 24.07.07, 07:33
  3. Objektorientierte Programmierung vs. stark besuchte Seite
    Von diggity im Forum PHP
    Antworten: 4
    Letzter Beitrag: 22.10.06, 10:27
  4. Letzte besuchte Seite speichern
    Von Naisetsu im Forum PHP
    Antworten: 2
    Letzter Beitrag: 28.06.05, 12:06
  5. nach Login weiterleitung auf letzte Besuchte Seite
    Von BSA im Forum PHP
    Antworten: 5
    Letzter Beitrag: 03.03.05, 11:26

Stichworte