Jnnbo: Link fett darstellen

Guten Morgen,

ich baue meine Taps wie folgt zusammen

<ul class="rtabs">
	<li><span>1</span><a href="#wk1" style="margin-left:10px;">Übersicht</a></li>
	<li><span>2</span><a href="#wk2" style="margin-left:10px;">Kundendaten</a></li>
	<li><span>3</span><a href="#wk3" style="margin-left:10px;">Übersicht</a></li>
</ul>        

Alternativ-Text

Die einzelnen Bereich werden so aufgerufen

/warenkorb#wk1
/warenkorb#wk2
/warenkorb#wk3

<div id="wk1">
  <h3>Artikel</h3> 
</div>

<div id="wk2"> 
  <h3>Kundendaten</h3> 
</div>

<div id="wk3"> 
  <h3>Übersicht</h3> 
</div>

Jetzt möchte ich gerne, wie im Titel schon geschrieben das aktive Tab Fett (<strong></strong>) darstellen. Allein mit CSS komme ich hier wohl nicht weiter? Müsste ich also mit PHP prüfen was oben in der URL steht?

PS: Das Inline CSS oben in den Links wird später wieder entfernt nur ich möchte in der Entwicklung nicht ständig von Datei zu Datei wechseln.

akzeptierte Antworten

  1. Hallo,

    /warenkorb#wk1
    /warenkorb#wk2
    /warenkorb#wk3
    
    <div id="wk1">
      <h3>Artikel</h3> 
    </div>
    
    <div id="wk2"> 
      <h3>Kundendaten</h3> 
    </div>
    
    <div id="wk3"> 
      <h3>Übersicht</h3> 
    </div>
    

    Jetzt möchte ich gerne, wie im Titel schon geschrieben das aktive Tab Fett (<strong></strong>) darstellen. Allein mit CSS komme ich hier wohl nicht weiter?

    doch, das ist ein Fall für die Pseudoklasse :target. Damit kannst du das Element selektieren, das durch den Fragment Identifier (Anker) adressiert wird. Und dann brauchst du auch das HTML-Element strong nicht mehr, sondern kannst das ausschließlich mit CSS abfrühstücken.

    So long,
     Martin

    1. Hallo Martin,

      doch, das ist ein Fall für die Pseudoklasse :target. Damit kannst du das Element selektieren, das durch den Fragment Identifier (Anker) adressiert wird. Und dann brauchst du auch das HTML-Element strong nicht mehr, sondern kannst das ausschließlich mit CSS abfrühstücken.

      danke für den Vorschlag, hab mir diese Seite angesehen. Leider verstehe ich :target nicht richtig, wollt es so umsetzten:

      <ul class="rtabs">
      	<li><span>1</span><a href="#wk1" style="margin-left:10px;">Übersicht</a></li>
      	<li><span>2</span><a href="#wk2" style="margin-left:10px;">Kundendaten</a></li>
      	<li><span>3</span><a href="#wk3" style="margin-left:10px;">Übersicht</a></li>
       </ul>        
      
      .rtabs u li a:target {
      	font-weight:bold;
      }
      

      leider ohne Erfolg.

      1. Hallo,

        .rtabs u li a:target {
        	font-weight:bold;
        }
        

        leider ohne Erfolg.

        Wieviele u-Elemente hast du denn zwischen .rtabs und li?

        Gruß
        Kalk

        1. Hallo Tabellenkalk,

          Wieviele u-Elemente hast du denn zwischen .rtabs und li?

          <ul class="rtabs">
          	<li><span>1</span><a href="#wk1" style="margin-left:10px;">Übersicht</a></li>
          	<li><span>2</span><a href="#wk2" style="margin-left:10px;">Kundendaten</a></li>
          	<li><span>3</span><a href="#wk3" style="margin-left:10px;">Übersicht</a></li>
           </ul>     
          

          gar keines? Da ich ja mein ul mit .rtabs anspreche.

          1. Hallo

            Wieviele u-Elemente hast du denn zwischen .rtabs und li?

            gar keines? Da ich ja mein ul mit .rtabs anspreche.

            .rtabs u li a:target {
            	font-weight:bold;
            }
            

            Soso (dein Code).

            Sei's drum. Die SelfHTML-Seite zu :target macht es natürlich einfach und spricht in seinem Beispiel nur :target an. Mit .rtabs li a:target solltest du an deine Elemente herankommen, :target sollte es aber auch tun, denn angesprochen wird es nur dann, wenn das Fragment der URL mit dem Inhalt einer der IDs übereinstimmt.

            Tschö, Auge

            --
            Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
            Terry Pratchett, „Gevatter Tod“
            1. Hallo Auge,

              Soso (dein Code).

              was willst du mir mit dieser Bemerkung sagen? Das ist mein Code, wie er derzeit auf meiner Seite vorhanden ist.

              1. Hallo

                Das ist jetzt nicht dein Ernst!?

                Soso (dein Code).

                was willst du mir mit dieser Bemerkung sagen? Das ist mein Code, wie er derzeit auf meiner Seite vorhanden ist.

                Lesen musst du schon selbst.

                Du gibst Code an, …

                .rtabs u li a:target
                

                … der wegen eines Fehlers zu Fragen …

                Wieviele u-Elemente hast du denn zwischen .rtabs und li?

                … führt und schreibst als Antwort etwas …

                gar keines? Da ich ja mein ul mit .rtabs anspreche.

                … , das total an der Frage vorbei geht.

                Was will ich dir nun wohl mit dem Zeigen deines Codes und der Verlinkung deines Postings, um dies zu beweisen, sagen?

                1. Die Nachfrage seitens Tabellenkalk ist berechtigt, weil zwischen der ul mit der Klasse „rtabs“ und deren li keine u sind und im Übrigen auch nicht sein dürfen.
                2. Mir ist nach Jux und Dallerei, weil der Freitag naht.

                Tschö, Auge

                --
                Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                Terry Pratchett, „Gevatter Tod“
                1. Hallo Auge,

                  .rtabs u li a:target
                  
                  1. Die Nachfrage seitens Tabellenkalk ist berechtigt, weil zwischen der ul mit der Klasse „rtabs“ und deren li keine u sind und im Übrigen auch nicht sein dürfen.

                  Aus dem Selektor geht nicht hervor, dass die genannten li deren li sind ;-p

                  Bis demnächst
                  Matthias

                  --
                  Signaturen sind bloed (Steel) und Markdown ist mächtig.
                  1. Hallo

                    .rtabs u li a:target
                    
                    1. Die Nachfrage seitens Tabellenkalk ist berechtigt, weil zwischen der ul mit der Klasse „rtabs“ und deren li keine u sind und im Übrigen auch nicht sein dürfen.

                    Aus dem Selektor geht nicht hervor, dass die genannten li deren li sind ;-p

                    <ningel /> Jaja, hast ja recht. Zumindest war gewünscht, die li der nämlichen ul zu selektieren.

                    Tschö, Auge

                    --
                    Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                    Terry Pratchett, „Gevatter Tod“
          2. @@Jnnbo

            Wieviele u-Elemente hast du denn zwischen .rtabs und li?
            gar keines?

            Eben. Was also soll .rtabs u li a:target selektieren?

            Und li gehört da ebenfalls nicht in den Selektor rein.

            LLAP

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

              Eben. Was also soll .rtabs u li a:target selektieren? Und li gehört da ebenfalls nicht in den Selektor rein.

              aber auch dieses funktioniert nicht

              .rtabs a:target {
              	font-weight:bold;
              }
              
              1. @@Jnnbo

                aber auch dieses funktioniert nicht

                .rtabs a:target {
                	font-weight:bold;
                }
                

                Selektorspezifität? Wird die Angabe überschrieben? Was sagt denn das Entwicklerwerkzeug deines Browsers?

                Was ist das eigentlich für eine Schriftart? Webfont? Hast du vielleicht dafür gesorgt, dass normale und fette Schrift dieselbe Schriftdatei verwenden?

                </Glaskugel>

                LLAP

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

                  Hast du vielleicht dafür gesorgt, dass normale und fette Schrift dieselbe Schriftdatei verwenden?

                  Nö, er hat dafür gesorgt, dass die Schrift sowieso schon fett ist.

                  Gruß
                  Kalk

                  1. Hallo Tabellenkalk,

                    Nö, er hat dafür gesorgt, dass die Schrift sowieso schon fett ist.

                    die Schrift ist nicht fett, rede doch bitte kein scheiß.

                    1. Hallo,

                      die Schrift ist nicht fett, rede doch bitte kein scheiß.

                      H3 wird normalerweise fett formatiert.

                      Gruß
                      Kalk

                      1. Hallo Tabellenkalk,

                        H3 wird normalerweise fett formartiert.

                        sorry, ich verstehe jetzt nicht den Zusammenhang zu H3? H3 kommt in meinem Text vor aber NICHT in den ul li

                        <ul class="rtabs">
                        	<li><span>1</span><a href="warenkorb#wk1" style="margin-left:10px;">Übersicht</a></li>
                        	<li><span>2</span><a href="warenkorb#wk2" style="margin-left:10px;">Kundendaten</a></li>
                        	<li><span>3</span><a href="warenkorb#wk3" style="margin-left:10px;">Übersicht</a></li>
                        </ul>
                        
                        1. Hallo,

                          sorry, ich verstehe jetzt nicht den Zusammenhang zu H3? H3 kommt in meinem Text vor aber NICHT in den ul li

                          <ul class="rtabs">
                          	<li><span>1</span><a href="warenkorb#wk1" style="margin-left:10px;">Übersicht</a></li>
                          	<li><span>2</span><a href="warenkorb#wk2" style="margin-left:10px;">Kundendaten</a></li>
                          	<li><span>3</span><a href="warenkorb#wk3" style="margin-left:10px;">Übersicht</a></li>
                          </ul>
                          

                          Mit dem css-Target-Attribut kannst du Elemente stylen, auf die dein Link zielt. d.h. du hast hier drei Links, die auf deine drei divs mit den IDs wk1-3 zielen. In diesen hast du H3-elemente die du stylen kannst. Da sie bereits fett sind, durch Browser-Vorgaben, kann ein font-weight:bold natürlich nix mehr ausrichten.

                          Du willst aber eigentlich die Links selber stylen. Dann müsstest du das Konstrukt so umbauen, dass sie selber zum target werden.

                          Gruß
                          Kalk

                          1. Hallo Tabellenkalk,

                            Du willst aber eigentlich die Links selber stylen. Dann müsstest du das Konstrukt so umbauen, dass sie selber zum target werden.

                            so jetzt habe ich es auch verstanden, danke für die Erklärung. Das heißt also, ich müsste den Links selber eine ID mitgeben?

                            1. Hallo,

                              Das heißt also, ich müsste den Links selber eine ID mitgeben?

                              Genau, nur dass du sie ja nicht mehrfach vergeben kannst. Jedoch könntest du mit dem Nachbarselektor arbeiten, nachdem die divs in die Linkliste gewandert und standardmäßig ausgeblendet sind.

                              Gruß
                              Kalk

                            2. @@Jnnbo

                              Das heißt also, ich müsste den Links selber eine ID mitgeben?

                              Nein, ich glaube eher, du müsstest das lesen und dir das anschauen.

                              LLAP

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

            gar keines?

            Falls das eine Antwort sein soll: richtig. Warum behauptest du in deinem css dann etwas anderes?

            Gruß
            Kalk

      2. Hallo,

        danke für den Vorschlag, hab mir diese Seite angesehen. Leider verstehe ich :target nicht richtig, wollt es so umsetzten:

        Schau doch auch mal ins Wiki!

        Gruß
        Kalk

        1. Hallo Tabellenkalk,

          Schau doch auch mal ins Wiki!

          ich setzt das einfach mit PHP um wie ich es eigentlich machen wollte.

  2. @@Jnnbo

    Warum bleibst du eigentlich nicht in deinem Thread, wo es schon um dieses Ding geht? Auch um Styling.

    LLAP

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

      Warum bleibst du eigentlich nicht in deinem Thread, wo es schon um dieses Ding geht? Auch um Styling.

      weil ich dachte, das eine hat mit dem anderen nichts mehr zu tun. Ich merke aber auch, dass ich mit den Tabs einfach nicht weiter komme. Die bereiten mir viel zu viel Probleme, die ich mit einzelnen Seiten nicht habe.