Antworten auf deine Fragen:
Neues Thema erstellen

[DW CS2] Problem mit Grafik anzeigen

Louie_K

Rumprukller

[DW CS2] Problem mit Grafik anzeigen[gelöst]

Hi Leute

Ich bastel mir ne Page und ich wolte die Navigation mit 2 Grafiken machen.
Ich habe mir die angesehen und auch fast so nach gebaut. Es funktioniert auch schon ganz gut aber nicht alles. Beim anzeigen des hover Status wird die Grafik nicht eingeblendet. Ich hab schon geschaut ob ich Schreibfehler habe aber keine gefunden(aber was heist das schon ? Betriebsblind??)

Hier das html
Code:
<div id="header">
         <img src="bilder/Head_02.png" width="998" height="166" border="0" usemap="#Startseite">
         <map name="Startseite">
              <area shape="circle" coords="124,82,81" href="index.html" alt="Startseite">
        </map>
        <ul id="navigation">
          <li class="li_der_verein-active"><a href="der_verein.html" title="Der Verein">Der Verein</a></li>
          <li><a href="turniere.html" title="Turniere" class="li_turniere">Turniere</a></li>
          <li><a href="Bilder.html" title="Bilder" class="li_bilder">Bilder</a></li>
          <li><a href="inerersantes.html" title="Interesantes" class="li_interesantes">Interesantes</a></li>
          <li><a href="gaestebuch.html" title="Gästebuch" class="li_gaestebuch">Gästebuch</a></li>
          <li><a href="internes.html" title="Internes" class="li_internes">Internes</a></li>
          <li><a href="impressum.html" title="Impressum" class="li_imperessum">Impressum</a></li>   
        </ul>

      </div>
Und hier das CSS
Code:
 /* Navigation im Kopf der Web site*/
 
    ul#navigation {
    display:block;
    height:29px;
    position:absolute;
    width:757px;
    margin-top: 0px;
    margin-left: 220px;
    top: 113px;
    left: 100px;
    }
    
    ul#navigation li {
    border:none;
    display:block;
    float:left;
    text-decoration:none;
    text-indent:-9999px;  
    height:29px; /*neu  height und width müsen vorhanden sein um damit die Linkfelder richtig positionirt werden */
    width:99px;
    }
    
    ul#navigation li a {
    /*border:groove;*/
    display:block;
    float:left;
    text-decoration:none;
    text-indent:-9999px;
    height: 29px; 
    width: 99px; 
    }
    
    ul#navigation li a:hover {
    border:groove;
    display:block;
    float:left;
    text-decoration:none;
    text-indent:-9999px;/*war -9999px*/
    margin: -1px 0 0 -1px; /* zur Anpassung der Rahmenfelder das diese übereinander liegen */
    }
    
    ul#navigation li a.li_der_verein {
    border:groove;  /*war ausgeklammert*/
    margin:-1px 0 0 2px;
    position:absolute;
    width:99px;
    height:29px;
    }
    
    ul#navigation li a.li_der_verein:hover, ul#navigation li a.li_der_verein-active {
    background-image: url(../bilder/Navigation.png);
    margin: -1px 0 0 2px;
    position:absolute;
    width:99px;
    height: 29px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    }
Kann mir jemand bitte helfen ? Ich weis nicht was ihr noch für Infos braucht. Sagt doch einfach noch Bescheid:

Dankeschön
 
Zuletzt bearbeitet:

MyBad

localhorst

AW: [DW CS2] Problem mit Grafik anzeigen

Hallo!

Sehe ich das richtig, das keines deiner a-Tags die Klasse "li_der_verein" hat. Dann kann das auch nicht gehen. Oder fehlt der Teil in deinem Auszug aus der CSS?

Gruß
Tim
 

Louie_K

Rumprukller

AW: [DW CS2] Problem mit Grafik anzeigen

Laut der anleitung
Dem "a", also Link, nehme ich die Klasse "li-der_verein" weg, weil ich nicht möchte, dass der Link benutzt werden kann, wenn man sich auf der
jeweiligen Seite bereits befindet. Wenn Du das dennoch wünschst, kannst Du
die Klasse drin lassen.

das htlm ist von der Datei der_verein
 

MyBad

localhorst

AW: [DW CS2] Problem mit Grafik anzeigen

Wenn du nur die Klasse aus dem a-Tag entfernst, ist der Link dennoch weiter verwendbar. Nur die Formatierung für die Klasse ist nicht mehr vorhanden bei dem Link.

In deinem CSS wechselt das Bild nur deim hovern des a-Tags mit der Klasse "li_der_verein". Wenn also kein a-Tag diese Klasse zugewiesen bekommt, kann auch nichts passieren.

Kleines Beispiel wie es aussehen muss:
HTML
Code:
<ul>
 <li><a class="test">TEST-LINK</a></li>
</ul>

CSS
Code:
ul li a.test{ background: #990000; } /* Hintergrundfarbe des a-Tags mit der Klasse "test" rot formatieren */
ul li a.test:hover { background: #000000; } /* Hintergrundfarbe des a-Tags mit der Klasse "test" beim hover schwarz formatieren */

Hoffe das hilft dir weiter
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.482
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben