✔ Ein Linkblock mit mit zwei unterschiedlich farbigen Unterstreichungen?

[Rayne]

Hallo liebe Leute,

ich möchte einen Linkblock erstellen, der im Prinzip aus zwei Elementen besteht:

Einer H2-Überschrift
und einem Absatz mit beliebigen Einträgen

Wichtig ist mir, dass die Elemente nur ein Link sind, die H2 also nicht separat von den Absatzelementen angeklickt werden kann, sondern immer der gesamte Linkblock aktiviert wird. Das klappt auch ganz gut, nur wird die Überschrift in einer falschen Farbe unterstrichen, wenn man mit der Maus darüber geht (siehe Screenshot). Ich möchte, dass die Überschrift in der dunklen Farbe unterstrichen wird und die Absatzelemente in ihrer jeweiligen Farbe.

Ich bin mir leider nicht ganz schlüssig, was ich dazu wo im Code ändern muss.

Das sind die betreffenden Einträge in der styles.css:

body  { font: 14px/20px 'Helvetica Neue', Helvetica, Arial, Sans-serif; color: #555; background-color: #fafafa; }

h2, h3, h4, h5, h6  { margin: 0; color: #444; font-weight:bold;}
h1  {font-size: 12px; font-weight:normal; display:inline;} h2  {font-size: 14px;} h3  {font-size: 18px;} h4  {font-size: 15px;} h5  {font-size: 13px;} h6  {font-size: 12px;}

p {margin: 0; font-size:13px; line-height:18px; color: #444; }

.custom-field-2 {
padding: 3px 0 0 0;
color:#4fa0b2;
}

a:link, a:visited  { color: #4fa0b2; text-decoration:none;}
a:hover {text-decoration:underline;}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited  { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover  {text-decoration: underline;}

#posts_outer {
	padding:20px 20px 0 20px; border: 1px solid #e3e3e3; background-color:#fff; margin:0 0 10px 0;
}

.post  { margin: 0 0 10px; padding-bottom: 10px; }

.post .title  { font-weight: bold; font-size: 18px; line-height: 22px; margin: 0; color:#222;}
.page .post .title  { margin: 0 0 20px 0; }
.post .title a:link, .post .title a:visited  { color:#222; }

Und hier der Code aus der betreffenden php-Datei:

            <div class="post">
           			
			<div style="float:right"><img src="/images/logo.png</img></div>
                    
                    <div style="float:left"><a href="#"><h2 class="title">Titel hier</h2>

				<p class="custom-field-2">			
						<?php echo get_post_meta($post->ID, ' ', true); ?><br />
						<?php echo get_post_meta($post->ID, ' ', true); ?> <?php echo get_post_meta($post->ID, ' ', true); ?>
				</p></a></div>
                 
                    <div class="fix"></div>
                                         
            </div>

Wisst ihr, welche Änderung ich wo vornehmen muss? Das wäre wirklich großartig!

Vielen Dank schon vorab für eure Hilfe!

 

[fbfeix]

Also als erstes würde ich dir mal raten dass du deinen Code besser bzw. übersichtlicher aufbaust. In deinem HTML-Code zum Beispiel ist ein Durcheinander an Einrückungen und co. dass naja... und das wird ja noch nicht mal der komplette Code sein geh ich mal davon aus.
Den CSS-Teil könntest du auch übersichtlicher gestalten.

Aber nun zum Thema:
Du machst bei deinen Selektoren einen kleinen Fehler:

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited  { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover  {text-decoration: underline;}

Du suchst ja nicht die Links in deinen Überschriften sondern anderstrum oder? Dass heißt die ganzen Selektoren gehören entweder anderstherum (wie mir im nachhinein noch eingefallen ist) oder so:

a:link > h2,a:visited > h1,a:link > h2,a:visited > h2,a:link > h2,a:visited > h3,a:link > h4,a:visited > h4, a:link > h5, a:visited > h5, a:link > h6,a:visited > h6
	{
	text-decoration: none;
}

a:hover > h2, a:hover > h3,a:hover > h4,a:hover > h5,a:hover > h6 {
	text-decoration: underline;
}

 

[Rayne]

Vielen Dank für die Antwort, hat prima funktioniert Dankeschön!!