CSS Style

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi AT-ler,
ich habe eine Frage zu einem "Theme" was ich gerade schreibe (übrigens mein erstes für Wordpress).

Mein code:
Code:
<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>

und hier die dazugehörigen CSS Styles:
Code:
a:link, a:visited {
	color:#ff0050;
	font-family:Times;
	font-size:10px;
	text-decoration:none;
	border-bottom:1px #ff0050 dotted;
}

Code:
h2 {
	display:inline;
	margin-top:5px;
	margin-bottom:5px;
	color:#999999;
	font-family:Times;
	font-weight:normal;
	font-size:26px;
	border-bottom:none important!;
}

Das Problem ist, jetzt sieht das im Browser folgendermassen aus:
- Der Titel des Posts hat die richtige formatierung wie das H2
- Der Titel ist aber mit dem Style von A:LINK unterstrichen und als rollover hat er auch den "border-bottom" und das background-color fon A:HOVER.

Meine Frage: wie bekomme ich das hin, dass er obwohl es sich um ein Link handelt nur den CSS Style von dem H2 beachtet?
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
semantisch is IMHO der anchor um das h2 nicht korrekt es müsste umgekehrt sein also

<h2><a>...</a></h2>

validiert dein code?

dahui
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
semantisch is IMHO der anchor um das h2 nicht korrekt es müsste umgekehrt sein also

<h2><a>...</a></h2>

validiert dein code?

dahui

Hi,
wenn ich den code umschreibe zu:
Code:
<h2><a>...</a></h2>
ist der Titel so formatiert wie im CSS das A:LINK definiert ist, der H2 Style wird dann komplett ignoriert...

Nein validiert noch nicht...zum Schluss :eek:

----

Ich müsste ja auch kein <a href>-Element benutzen wenn ich nicht aus jedem Post-Titel ein Link zu dem kompletten post machen wollte...
 

NLS

Boskop
Registriert
11.02.07
Beiträge
212
Nicht super elegant, aber sollte wirken:

Code:
h2 a {
  color:inherit; /* ODER: color:#999999; (wenn inherit nicht funktioniert) */
  font-family:Times;
  font-weight:normal[FONT=monospace];
  [/FONT]font-size:26px;
  text-decoration:none;
}

h2 a:hover {
  border:0;
  background-color:transparent;
}
2 Anmerkungen:

1. JA, die <a>-Tags gehören IN den <h2>-Bereich, wie dahui schon geschrieben hat. h2 ist ein Block-Element, a ein Inline-Element. Inline-Elemente dürfen niemals Block-Elemente beinhalten laut W3C-Standard. Mein CSS ist auch entsprechend aufgebaut.

2. Ich schrieb oben nicht super elegant, weil man jetzt die Farbe 999999 doppelt pflegen müsste (und auch die Schriftgrösse etc.): einerseits für die h2, andererseits für die klick-sensitiven h2 (mit dem a-Tag drin). Eleganter wäre natürlich, wenn man die Farbe an nur einer Stelle festlegen könnte. Dazu müsste man alle NICHT in h2-Elementen vorkommenden Links definieren, evtl. unter Zuhilfenahme von <a class="...">. Das ist bei vielen "normalen" Links auf der Seite aber ebenfalls recht unschön.
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
thanks...werde es gleich mal ausprobieren! Das mit dem <H2> und <A> ist klar...aber ich wusste nicht wie ich es anders hinbekommen sollte...wäre mir spätestens beim validieren aufgefallen. Alos nochmals Danke...sollte es klappen /oder auch nicht schreibe ich nochmal.
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
So ich habe das jetzt so stehen in meinem PHP-Script:
Code:
<h2><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h2>

und in meinem CSS-Style steht:
Code:
h2 {
	display:inline;
	margin-top:5px;
	margin-bottom:5px;
	color:#999999;
	font-family:Times;
	font-weight:normal;
	font-size:26px;
	border-bottom:none important!;
}

h2 a, h2 a:hover, h2 a:visited {
	color:inherit;
	text-decoration:none;
}

Leider ist es unschön (wie schon NLS) gesagt hat. Jetzt kann ich für a:link, a:hover u. a:visited nichts mehr definieren. Gibt es keine elegantere Lösung?

Was denkt ihr?
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Es gibt es noch eine andere Möglichkeit ein Link zu definieren? Ausser <a href? Also zum Beispiel <h2 href oder <div href oder <span href? Ich denke wenn muss es sich auch um ein Inline-Element handeln (also h2 und div schon mal nicht). Was gibt es denn sonst noch so?
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
Leider ist es unschön (wie schon NLS) gesagt hat. Jetzt kann ich für a:link, a:hover u. a:visited nichts mehr definieren. Gibt es keine elegantere Lösung?

Was denkt ihr?

hähh? wie

Code:
 h2 a  {
    color:red;
}

h2 a:hover {
     color:green;
}

und fertig ist die laube

weisst du am einfachsten bei solchen dingen um von aussen hilfe zu bekommen ist ein kleines statisches beispiel online zu verlinken, und genau zu beschreiben was wie aussehe soll und was bisher wie erreicht wurde, oder habe nur ich es noch nicht begriffen.

btw wenn der visited link sich nicht unterscheiden soll, z.b. farblich von einem normalen link, dann lass ihn einfach weg ;)

dahui
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Ja das ist schon klar...aber ich meinte jetzt die ganz normalen Links!...Die sehen dann auch so aus wie der H2!
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
Ja das ist schon klar...aber ich meinte jetzt die ganz normalen Links!...Die sehen dann auch so aus wie der H2!

sicher nicht ;)

weil h2 a eben nur die anchor im h2 styled, wie sieht dein ganzes css aus?

ansonsten definiere mal darüber nur a und a:hover und gib denen andere farben

dahui
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Ich werde es mal ausprobieren. Arbeite momentan aber an einer anderen Baustelle meines Blogs :)...