Stylesheet Link Problem

Dieses Thema im Forum "Webentwicklung" wurde erstellt von timelez, 25. Mai 2007 .

Schlagworte:
  1. 25. Mai 2007
    Hallo RR'ler

    folgendes Problem:

    Also auf meiner seite Will ich eine Navi einbauen bei der die Links einen Hintergrund bekommen der beim Hover wechselt.
    Wie ich das von den Befehlen her mache is mir klar, nur raff ich ned wie ich mehrere Linkklassen definiere, weil wenn ich das mit a:link mache ist das ja für das ganze dokument.

    Wie muss ich das abändern? irgendwelche klassen oder wie?

    Code:
    <html>
    <head>
    <style type="text/css">
    a:link {
    
    background-image: url(bild1.png); color: #666666; text-decoration: none; width: 120 px; height: 50 px; }
    
    a:hover {
    
    background-image: url(bild2.png); color: #FFFFFF; text-decoration: none; }
    </style>
    </head>
    <body>
    
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a><br>
    <a href="#">Link 4</a><br>
    
    <a href="#">Link 5</a><br>
    
    </body>
    </html>
    Link 5 soll dabei nicht so formatiert werden wie die anderen.

    Danke schonmal, bw gibts natürlich für sinnvolle hilfe!
     
  2. 25. Mai 2007
    AW: Stylesheet Link Problem

    Wie wärs damit:
    Code:
    <html>
    <head>
    <style type="text/css">
    a:link.navi {
    
    background-image: url(bild1.png); color: #666666; text-decoration: none; width: 120 px; height: 50 px; }
    
    a:hover.navi {
    
    background-image: url(bild2.png); color: #FFFFFF; text-decoration: none; }
    
    a:link.wasandereshalt {
    wasweißich:1px;
    }
    
    a:link {
    blub;
    }
    </style>
    </head>
    <body>
    
    <a href="#" class="navi">Link 1</a><br>
    <a href="#" class="navi">Link 2</a><br>
    <a href="#" class="navi">Link 3</a><br>
    <a href="#" class="navi">Link 4</a><br>
    
    <a href="#" class="wasandereshalt">Link 5</a><br>
    <a href="#">Link 6</a><br>
    
    </body>
    </html>
     
  3. 25. Mai 2007
    AW: Stylesheet Link Problem

    ich hab mal nen bissl rumgeschaut und hab selbst ne lösung gefunden.

    Code:
    <style type="text/css">
    
    #navi a:link, #navi a:visited, #navi a:active{
    background-image: url(button.png); color: #000000; text-decoration: none; width: 150 px; height: 20 px; font: bold 10px verdana; padding-left: 10px; padding-top: 3px;}
    
    #navi a:hover {
    background-image: url(button_hover.png); color: #51b5fc; text-decoration: none; }
    
    </style>
    Code:
    <div class="navi"><td width="150" height="20" align="left"><a href="#">Link</a></td></div>
    aber trotzdem danke.
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.