Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] CSS Vererbung?/Formatierungsproblem

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] CSS Vererbung?/Formatierungsproblem

    Ich habe zwar ein Problem welches sich ausschließlich auf HTML und CSS bezieht und weniger bzw nichts mit PHP ich hoffe aber trotzdem auf eure Hilfe.

    Ich arbeite an einem umfangreihen Projekt und habe ein Problem mit der Formatierung von zwei <a>s
    Ich möchte gerne das die Farbe der Links blau (#3399CC) ist und wenn ich mit der Maus darüberfahre soll sich die Farbe in orange (#FF9966) ändern.
    Der Hover-Effeckt funktioniert bereits. Nur bekomme ich die "normale" Farbe nicht dem Link zugewiesen.
    Obwohl doch das Div näher am <a> ist als die Tabelle scheint sich deren Formatierung auf die <a>s zu vererben.
    Ich wäre euch für konstruktive Lösungsansätze und Hinweise zu Denkfehlern sehr dankbar.

    PHP-Code:
    <body>
    <
    style type="text/css">
    .
    aktemenu {
        
    width:100%;
            
    }
    .
    aktemenu tr td {
        
    width:14%;
    }
    .
    aktemenu tr td a {
        
    display:block;
        
    width:100%;
        
    line-height:20px;
        
    text-align:center;
        
    text-decoration:none;
        
    color:#FFFFFF;
        
    font-weight:bold;
        
    font-size:10px;
        
    height:20px;
    }
    .
    aktemenu a:hover {
        
    background-color:#FFFFFF;
        
    color:#000000;
    }
    .
    trerste td {
        
    color:#FFFFFF;
        
    font-weight:bold;
        
    background-color:#3399cc;
    }
    .
    delakteint {
         
    width:550px;
         
    border:red 2px solid;
    }
    .
    delakteint a {
        
    border1px solid black;
        
    color#3399CC;

    }
    .
    delakteint a:hover {
        
    color:#FF9966;
    }
    </
    style>

    <
    table class="aktemenu" cellspacing="0" cellpadding="0">
        <
    tr class="trerste">
            <
    td colspan="6"><a  href="#">TestNavi</a></td>
        </
    tr>
        <
    tr>
            <
    td colspan="7">
                <
    div class="delakteint">
                    
    M&ouml;chten Sie 
                    
    <a href="#">HIER</a>
                    <
    a href="#">ODER HIER</a>klicken
                
    </div>
            </
    td>
        </
    tr>
    </
    table>
    </
    body


  • #2
    Das hier kann dir weiterhelfen: Understanding CSS Style Precedence | Van SEO Design .

    Style-Angaben werden übrigens im Kopf der Seite definiert, nicht im Körper.
    http://hallophp.de

    Kommentar


    • #3
      Vielen Dank für den Link und den Hinweis bezüglich der Positionierung des CSS.

      Wenn ich den Text richtig verstanden habe, dann ist es so, dass die Angaben in .aktemenu tr td a {} "gewichtiger" sind als die in .delakteint a {}.
      Mir ist auch bewusst, dass ich eigentlich nur einen Hover-Effekt zu sehenbekomme weil für die Klasse aktemenu keine entsprechenden Anweisungen vorliegen.

      Allerdings hilft mir das alles nicht viel weilter. An der Formatierung der Tabelle kann ich eigentlich nichts ändern weil die verwendete classe an zig anderen Stellen noch verwerndung findet. Gut ich könnte eine extra klasse schreiben.
      Eine andere Möglichkeit wäre es aus der classe eine id zu machen um die "gewichtung" zu erhöhen.



      PS: Noch wärend dem schreiben ist mir mein Fehler klar geworden. Ich bedanke mich sehr bei dir für deinen Link. Denn er hat mir einen Lernerfolg verschafft.

      PHP-Code:
      #hurz{
          
      color:green;
          }
      #hurz:hover{
          
      color:red;
          } 
      PHP-Code:
      <tr>
              <
      td colspan="7">
                      
      M&ouml;chten Sie 
                      
      <a id="hurz" href="#">HIER</a>
                      <
      a id="hurz" href="#">ODER HIER</a>klicken
              
      </td>
          </
      tr

      Kommentar


      • #4
        Möglich wäre auch
        Code:
        .aktemenu tr td .delakteint a {
            border: 1px solid black;
            color: #3399CC;
        
        }
        
        .aktemenu tr td .delakteint a:hover {
            color:#FF9966;
        }
        oder - noch eine Nummer kürzer
        Code:
        tr td .delakteint a {
            border: 1px solid black;
            color: #3399CC;
        
        }
        
        tr td .delakteint a:hover {
            color:#FF9966;
        }
        . Alles Andere hast du richtig verstanden.

        Gruß
        http://hallophp.de

        Kommentar


        • #5
          Vielen Dank für die Kurzfassung. An so eine Konstruktion hatte ich absolut gar nicht gedacht.

          Kommentar


          • #6
            Noch ein Hinweis - wo ich das gerade noch mal überfliege: Die Lösung mit der ID ist zwar von der Idee her richtig, doch du darfst nicht mehreren Elementen die selbe ID zuweisen. Eine ID dient zur eindeutigen Identifizierung. Daher kannst du die ID nur an ein einziges HTML-Element vergeben.

            Code:
            <a id="hurz" href="#">HIER</a>
            <a id="hurz" href="#">ODER HIER</a>klicken
            ist also ein Fehler.
            http://hallophp.de

            Kommentar

            Lädt...
            X