[Erledigt] CSS Vererbung?/Formatierungsproblem

MFGSparka · 20.08.2010, 16:07

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 {

    border: 1px 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>

Asipak · 20.08.2010, 16:15

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.

MFGSparka · 20.08.2010, 17:07

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>

Asipak · 20.08.2010, 18:03

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ß

MFGSparka · 24.08.2010, 13:09

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

Asipak · 24.08.2010, 13:22

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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

20.08.2010, 16:07
MFGSparka Benutzer Registriert seit: 23.09.2009 Beiträge: 43 PHP-Kenntnisse: Anfänger	[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 { border: 1px 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öchten Sie <a href="#">HIER</a> <a href="#">ODER HIER</a>klicken </div> </td> </tr> </table> </body>


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

20.08.2010, 16:15
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.071	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. __________________ HalloPHP

20.08.2010, 17:07
MFGSparka Benutzer Registriert seit: 23.09.2009 Beiträge: 43 PHP-Kenntnisse: Anfänger	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öchten Sie <a id="hurz" href="#">HIER</a> <a id="hurz" href="#">ODER HIER</a>klicken </td> </tr>`

24.08.2010, 13:09
MFGSparka Benutzer Registriert seit: 23.09.2009 Beiträge: 43 PHP-Kenntnisse: Anfänger	Vielen Dank für die Kurzfassung. An so eine Konstruktion hatte ich absolut gar nicht gedacht.

24.08.2010, 13:22
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.071	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. __________________ HalloPHP