• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS-Formatierungen bei include beibehalten?!

K

kuranyi

New member
Hallo!

Mein Problem:
Ich möchte eine Seite, die eigene CSS-Formatierungen für Links (Hover-Effekt etc.) hat, in eine andere includen.
Kein Problem soweit.
Doch dann werden für die includete Seite die Formatierungen übernommen, die ich im Quellcode der Seite, in die die andere eingefügt wurde, definiert habe. Das passt mir überhaupt nicht. Ich möchte, dass jede includete Seite eigene Formatierungen hat!
Jetzt hat nämlich mein Menü, das eigentlich nen Hover-Effekt hat, die Formatierungen für die Links in der Seite, in die ich das Menü includet habe!!!

Vielen Dank für Antworten!!

kuranyi
 
Ok ...

hab versucht, das mit Klassen zu machen - aber wirklich hinhauewn tuts nicht.

Was ist falsch?
Code: 
<style type="text/css">
     .a
     .navi          {      background-color:#DEE4E7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:171px; height:20;   }
     .navi:hover    {      background-color:#C7D0D7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:171px; height:20;   }

     .tab           {      color:black; font-family:Microsoft Sans Serif; font-size:8pt}
     .tab:hover     {      color:black; font-family:Microsoft Sans Serif; font-size:8pt; text-decoration:underline}

     .info       {background-color:#DEE4E7; color:black; font-family:Times New Roman; font-size:10pt; line-height:21px}

     </style>

Vielen Dank für Antworten!

kuranyi
 
Ok, hier ein Beispiel:

In der CSS Datei (oder auch im Dokument selbst):
HTML: 
a.mainlink:link { text-decoration:none; color:#333333; }
a.mainlink:visited { text-decoration:none; color:#666666;  }
a.mainlink:hover { text-decoration:overline; color:#666666;  }
a.mainlink:active { text-decoration:none; color:#666666; }
a.mainlink:focus { text-decoration:none; color:#666666;  }

Und beim Link die class angeben:
HTML: 
<a href="index.html" class="mainlink">Link</a>

Grüsse,
Vanquish
 
Schön - jetzt hab ich den Code angewandt, den du geschrieben hast, Vanquish, aber der Hover-Effekt funktioniert nicht - hier meine CSS-Formatierung:

Code: 
<style type="text/css">
     

     a.mainlink:link     {      background-color:#DEE4E7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;   }
     a.mainlink:hover    {      background-color:#C7D0D7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;     }
     a.mainlink:visited  {      background-color:#DEE4E7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;   }
     a.mainlink:active   {      background-color:#DEE4E7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;   }
     a.mainlink:focus    {      background-color:#DEE4E7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;   }
     
     a.tablink:link      {      color:black; font-family:Microsoft Sans Serif; font-size:8pt}
     a.tablink:hover     {      color:black; font-family:Microsoft Sans Serif; font-size:8pt; text-decoration:underline}
     a.tablink:visited   {      color:black; font-family:Microsoft Sans Serif; font-size:8pt}
     a.tablink:active    {      color:black; font-family:Microsoft Sans Serif; font-size:8pt}
     a.tablink:focus     {      color:black; font-family:Microsoft Sans Serif; font-size:8pt}
     


     </style>

Grüße
kuranyi
 
Zuletzt bearbeitet:
Hallo!

Ich hab noch eine kleine Frage!
Ich habe jetzt den Hover-Effekt aktiv, aber wenn ich mit der Maus klicke, erhält der Link wieder seine "normale" (also Nicht-Hover-)Hintergrundfarbe.
Mit welcher Bezeichnung ändere ich das?
Ich habs nämlich mit link, visited, active und focus ausprobiert, aber es klappt nicht ...

Für Antworten vielen Dank!

Grüßle
kuranyi
 
Jo, klappt schon ... danke.

Aber wenn ich den Link mit der Maus geklickt habe, dann aber von der Seite, zu der ich geleitet wurde, den Zurück-Button drücke, dann hat der Link immer noch den Hover-Hintergrund.
Dasselbe, wenn ich den Link markiert habe und ihn dann mit der Maus verlasse!

Hier mein Code, falls er hilft ...
Code: 
a.mainlink:link     {      background-color:#DEE4E7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;   }
     a.mainlink:visited  {      background-color:#DEE4E7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;   }
     a.mainlink:hover    {      background-color:#C7D0D7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;     }
     a.mainlink:active   {      background-color:#C7D0D7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;   }
     a.mainlink:focus    {      background-color:#DEE4E7;     display:block;  padding: 2px;  text-decoration:none; font-family: Arial; font-size: 10px; color: black; width:167px; height:20;   }
 
Ich hab es jetzt nochmal versucht zu lösen, indem ich alles außer a.mainlink und a.mainlink:hover weggelassen habe, aber dann blinken die Hover-Effekte nochmal auf, wenn ich die Links schon längst verlasen habe - Im IE ...

Vielen Dank für Antworten!

kuranyi
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben