1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

CSS Style

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von mschoening, 25.05.07.

  1. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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?
     
  2. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    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
     
  3. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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...
     
  4. NLS

    NLS Querina

    Dabei seit:
    11.02.07
    Beiträge:
    181
    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.
     
  5. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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.
     
  6. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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?
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Es muss ja nicht unbedingt H2 sein...
     
  8. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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?
     
  9. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    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
     
  10. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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!
     
  11. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    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
     
  12. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Ich werde es mal ausprobieren. Arbeite momentan aber an einer anderen Baustelle meines Blogs :)...
     

Diese Seite empfehlen