Markuss: Joomla Beitragstitel Link formatieren

Hallo,

ich erstelle gerade ein Template für Joomla und komme bei einem "einfachen" Beitragstitel, welcher verlinkt ist, nicht weiter.

Diesen würde ich gerne in einer anderen Farbe darstellen. Meine bisherigen versuche dies zu machen sind aber leider gescheitert, daher möchte ich Euch um Hilfe bitten.

Mein HTML Code sieht folgendermaßen aus:

  
<div class="page-header">  
    <h2 itemprop="name">  
        <a itemprop="url" href="/index.php/news/3-news-2">  
             News 2  
        </a>  
    </h2>  
</div>  

Nun würde ich gerne "News 2" in Rot anzeigen wollen.

Probiert habe ich es zuletzt mit folgendem CSS Code, welcher allerdings keine Wirkung zeigt.

  
.page-header h2 {font-size: 20px;}  
  
a.page-header a:link {color: red;}  
a.page-header a:active {color: red;}  
a.page-header a:visited {color: red;}  

Könnt Ihr mir vielleich helfen?

lg
Markus

  1. Lieber Markuss,

    ich habe mit der Semantik Deines Markups ein Problem:

    <div class="page-header">

    <h2 itemprop="name">
            <a itemprop="url" href="/index.php/news/3-news-2">
                 News 2
            </a>
        </h2>
    </div>

      
    Warum <div> anstatt [<header>](http://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/header)? Vielleicht könntest Du mit dem <header>-Element Dein <h2>-Element sogar einsparen...?  
      
    
    > Nun würde ich gerne "News 2" in Rot anzeigen wollen.[...]  
    > ~~~css
    
    .page-header h2 {font-size: 20px;}  
    
    >   
    > a.page-header a:link {color: red;}
    
    

    Dein Nachfahrenselektor ist falsch gewählt. Aktuell sagst Du in etwa "das <a>-Element, welches ein Nachfahrenelement eines anderen <a>-Elements mit der Klasse 'page-header' ist", anstatt "das <a>-Element, welches der Nachfahre eines Elements mit der Klasse 'page-header' ist". Wie Du weißt, dürfen <a>-Elemente nicht verschachtelt werden. Daher hat dieser Selektor gemäß der Spezifikation keinen Sinn!

    Kommst Du nun selbst drauf?

    Liebe Grüße,

    Felix Riesterer.

    --
    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
    1. @@Felix Riesterer:

      nuqneH

      Vielleicht könntest Du mit dem <header>-Element Dein <h2>-Element sogar einsparen...?

      Wenn das eine Überschrift ist: nein. Sonst wäre die Überschrift nicht als solche ausgezeichnet.

      Das div- bzw. header-Element ließe sich einsparen.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Hallo,

      danke für die Tipps!

      Ich denke ich hab's.

        
      .page-header a:link,:visited,:hover {color: red; text-transform:uppercase; text-decoration: none;}  
      
      

      Kann man das so lassen oder gibt es eine andere - bessere - Möglichkeit?

      lg.
      Markuss

      1. Lieber Markuss,

        .page-header a:link,:visited,:hover {color: red; text-transform:uppercase; text-decoration: none;}

        Du selektierst entweder Hyperlinks in Elementen der Klasse "page-header", oder alle anderen besuchten oder alle anderen gehoverten Hyperlinks. Ist das so beabsichtigt, oder sollte vor ":visited" und ":hover" ebenfalls der vollständige Selektor mit der Klasse?

        Was war denn eigentlich mit dem Hinweis auf das <header>-Element? Warum äußerst Du Dich dazu nicht?

        Liebe Grüße,

        Felix Riesterer.

        --
        "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
        1. @@Felix Riesterer:

          nuqneH

          oder sollte vor ":visited" und ":hohver" ebenfalls der vollständige Selektor mit der Klassse?

          Nein, sollte nicht.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. Lieber Gunnar Bittersmann,

            oder sollte vor ":visited" und ":hohver" ebenfalls der vollständige Selektor mit der Klassse?

            Nein, sollte nicht.

            Dein Einwand ergibt für mich nur dann einen Sinn, wenn Du das uniforme Verhalten der drei Pseudoklassen als solches ablehnst. Nach den Absichten des OP ist der Selektor ":hover" aber für _alle_ Hyperlinks zu interpretieren (Spezifität einmal außen vor), während ".page-header a:hover" nur den gewünschten Link selektiert.

            Liebe Grüße,

            Felix Riesterer.

            --
            "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
            1. @@Felix Riesterer:

              nuqneH

              Dein Einwand ergibt für mich nur dann einen Sinn, wenn Du das uniforme Verhalten der drei Pseudoklassen als solches ablehnst. Nach den Absichten des OP ist der Selektor ":hover" aber für _alle_ Hyperlinks zu interpretieren (Spezifität einmal außen vor), während ".page-header a:hover" nur den gewünschten Link selektiert.

              Mein Einwand war der, dass man – wenn denn die Links in den verschiedenen Zustände gleich aussehen sollen – einfach schreibt:

              .page-header a { color: red }  
              
              

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              1. Lieber Gunnar Bittersmann,

                Mein Einwand war der, dass man – wenn denn die Links in den verschiedenen Zustände gleich aussehen sollen – einfach schreibt:
                .page-header a { color: red }

                das kann je nach Spezifität unwirksam sein...

                Liebe Grüße,

                Felix Riesterer.

                --
                "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
                1. @@Felix Riesterer:

                  nuqneH

                  .page-header a { color: red }

                  das kann je nach Spezifität unwirksam sein...

                  Das gilt für jeden Selektor.

                  Dann eben .page-header a { color: red !important } *duckundweg*

                  (Liebe Kinder: Nicht machen!)

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  1. Lieber Gunnar Bittersmann,

                    Dann eben .page-header a { color: red !important } *duckundweg*

                    soso, ohne abschließendes Semikolon? Na, ob das vom Parser akzeptiert würde?

                    Es hätte sicherlich genügt, das folgende zu notieren:

                    .page-header a,  
                    .page-header a:link { color: red; }
                    

                    (Liebe Kinder: Nicht machen!)

                    *teppichklopferschwing*

                    Liebe Grüße,

                    Felix Riesterer.

                    --
                    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
                    1. Hi,

                      Dann eben .page-header a { color: red !important } *duckundweg*

                      soso, ohne abschließendes Semikolon? Na, ob das vom Parser akzeptiert würde?

                      Das semikolon schließt nicht ab, es trennt. Ggf. trennt es ein normales property:value-Pärchen von einem leeren Pärchen.

                      Der Parser wäre kaputt, wenn er das nicht akzeptieren würde!

                      cu,
                      Andreas

                      --
                      Warum nennt sich Andreas hier MudGuard?
                      O o ostern ...
                      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                    2. @@Felix Riesterer:

                      nuqneH

                      Dann eben .page-header a { color: red !important } *duckundweg*

                      soso, ohne abschließendes Semikolon?

                      Ja. Wozu denn zwei Deklarationen, wenn es eine auch tut?

                      Es hätte sicherlich genügt, das folgende zu notieren:

                      .page-header a,

                      .page-header a:link { color: red; }

                        
                      Was soll das für unbesuchte Links ändern?  
                        
                      Du meintest  
                      ~~~css
                      .page-header a:any-link { color: red }  
                      
                      

                      Qapla'

                      --
                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                      1. @@Gunnar Bittersmann:

                        nuqneH

                        .page-header a,

                        .page-header a:link { color: red; }

                        
                        >   
                        > Was soll das für unbesuchte Links ändern?  
                        >   
                        > Du meintest  
                          
                        Ich meinte: für besuchte.  
                          
                        [So eine Schande …](http://community.de.selfhtml.org/zitatesammlung/zitat907)  
                          
                        Qapla'
                        
                        -- 
                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                        
                        1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

                          So eine Schande …

                          Warte, warte nur ein Weilchen …

                          Matthias

                          --
                          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rat und Rattenplage.

                          1. @@Matthias Apsel:

                            nuqneH

                            Huch, schon wach? Wer ist denn das um diese Zeit schon? Vermutlich nur Lehrer und Eltern, die ihre Kinder zu Schule bringen.

                            Warte, warte nur ein Weilchen …

                            ’sch weiß. Ich kann’s kaum erwarten.

                            Qapla'

                            --
                            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                            1. Aloha ;)

                              Huch, schon wach? Wer ist denn das um diese Zeit schon? Vermutlich nur Lehrer und Eltern, die ihre Kinder zu Schule bringen.

                              Stimmt wohl... Die Kindergärten haben um diese Uhrzeit leider noch nicht auf - zumindest die bei uns hier im ländlichen Ländle :D

                              Grüße,

                              RIDER

                              --
                              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                              ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        2. Hallo Felix,

          .page-header a:link,:visited,:hover {color: red; text-transform:uppercase; text-decoration: none;}

          Du selektierst entweder Hyperlinks in Elementen der Klasse "page-header", oder alle anderen besuchten oder alle anderen gehoverten Hyperlinks. Ist das so beabsichtigt, oder sollte vor ":visited" und ":hover" ebenfalls der vollständige Selektor mit der Klasse?

          ich habe etwas "herum probiert" da ich mich damit noch nicht so lange beschäftige und mich daher noch nicht so gut auskennen. Und mit "page-header" hat es dann ohne Probleme funktioniert. Wie würdest Du es denn machen? Bin für jeden Rat dankbar!

          Was war denn eigentlich mit dem Hinweis auf das <header>-Element? Warum äußerst Du Dich dazu nicht?

          Sorry, darauf hatte ich ganz vergessen. Ich habe hierbei keine Möglichkeit ein <header>- Element einzubauen, da es sich unter Joomla um ein Fertiges "Modul" handelt welches ich sonst umschreiben müsste. Der Code stammt daher nicht von mir sondern ist selbst generiert durch Joomla. Ich habe lediglich versucht anhand des bestehenden Codes das Design zu erstellen.

          Liebe Grüße,
          Markus

          1. Om nah hoo pez nyeetz, Markuss!

            .page-header a:link,:visited,:hover {color: red; text-transform:uppercase; text-decoration: none;}

            eigentlich sollte reichen

            .page-header a {  
              color: red;  
              text-transform: uppercase;  
              text-decoration: none;  
            }
            

            Ob das tatsächlich zielführend ist, hängt von deinem restlichen CSS ab.

            Zudem weise ich darauf hin, dass du für deine Nutzer kenntlich machen solltest, dass sie dabei sind, einen Link auszuwählen. Deshalb verwende für :hover und :focus andere Angaben, vielleicht eine Unterstreichung.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Alte und Alternative.

            1. @@Matthias Apsel:

              nuqneH

              Zudem weise ich darauf hin, dass du für deine Nutzer kenntlich machen solltest, dass sie dabei sind, einen Link auszuwählen. Deshalb verwende für :hover und :focus andere Angaben, vielleicht eine Unterstreichung.

              Erst bei :hover/:focus? Reichlich spät. Um dahin zu kommen, muss man ja erst mal wissen, dass es was zu hovern gibt. Soll man erst mit der Maus über den Bildschirm fahren um zu suchen, ob es irgendwo einen Hover-Effekt gibt?

              Zumal viele (die meisten) Geräte keine Maus haben und damit auch keinen Hover-Effekt.

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        3. Om nah hoo pez nyeetz, Felix Riesterer!

          Was war denn eigentlich mit dem Hinweis auf das <header>-Element? Warum äußerst Du Dich dazu nicht?

          Gekaufte Template haben sehr oft eine Vielzahl von Elementen, die eigentlich nicht benötigt werden; ein Template umzubauen ist meist sehr zeitaufwändig und überschreitet die Fähigkeiten desjenigen, der hier nach a.page-header a:link fragt.

          Außerdem gehören die spitzen Klammern nicht zum Elementnamen ;-)

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Gel und Gelenk.

          1. Aloha ;)

            Was war denn eigentlich mit dem Hinweis auf das <header>-Element? Warum äußerst Du Dich dazu nicht?

            Gekaufte Template haben sehr oft eine Vielzahl von Elementen, die eigentlich nicht benötigt werden; ein Template umzubauen ist meist sehr zeitaufwändig und überschreitet die Fähigkeiten desjenigen, der hier nach a.page-header a:link fragt.

            Nicht nur das, im Fall von joomla ist es sogar so (wie ich aus eigener Erfahrung weiß), dass das Markup des Seiteninhalts (genauso wie das Markup der Navigation, das Markup der Modulinhalte...) nicht auf der Ebene des Templates bearbeitet werden _kann_.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
  2. @@Markuss:

    nuqneH

    <div class="page-header">

    Warum kein header-Element?

    Probiert habe ich es zuletzt mit folgendem CSS Code, welcher allerdings keine Wirkung zeigt.
    a.page-header a:link {color: red;}
    a.page-header a:active {color: red;}
    a.page-header a:visited {color: red;}

    Kann auch nicht. Bei dir gibt es keine a-Elemente der Klasse "page-header".

    Warum gibst du :link, :active, :visited getrennt an, wenn doch alles gleich gefärbt sein soll?

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)