CSS Style

[mschoening]

Hi AT-ler,
ich habe eine Frage zu einem "Theme" was ich gerade schreibe (übrigens mein erstes für Wordpress).

Mein code:

<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>

und hier die dazugehörigen CSS Styles:

a:link, a:visited {
	color:#ff0050;
	font-family:Times;
	font-size:10px;
	text-decoration:none;
	border-bottom:1px #ff0050 dotted;
}

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]

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]

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:

<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

----

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]

Nicht super elegant, aber sollte wirken:

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]

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]

So ich habe das jetzt so stehen in meinem PHP-Script:

<h2><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h2>

und in meinem CSS-Style steht:

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]

Es muss ja nicht unbedingt H2 sein...

 

[mschoening]

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]

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

 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]

Ja das ist schon klar...aber ich meinte jetzt die ganz normalen Links!...Die sehen dann auch so aus wie der H2!

 

[dahui]

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]

Ich werde es mal ausprobieren. Arbeite momentan aber an einer anderen Baustelle meines Blogs ...