August: Tabelle mit Links

Hi,

als Blogger (aber Anfänger) habe ich eine Frage: Wikipedia hat ein Inhaltsverzeichnis zu Beginn eines Artikels. So etwas wollte ich auch machen. Also habe ich mit <ul> meine Liste kreiert, inkl. der Links. Das klappte. Jetzt möchte ich aber die Sache schöner formatiert haben, also bin ich auf <table> gewechselt. Und da klappt dies alles nicht.

So sieht mein Quellcode jetzt aus:

<table> <colgroup> <col width="40"> <col width="400"> <col width="20"> </colgroup>
<tr onclick="window.document.location='#cdu';"><td>Nr. 1</td><td>Christlich Demokratische Union Deutschlands</td><td>CDU</td></tr>
<tr onclick="window.document.location='#spd';"><td>Nr. 2</td><td>Sozialdemokratische Partei Deutschlands</td><td>SPD</td></tr>  
</table>
<ul  style="list-style-type: none">
<li><a href="#gruen">Nr. 3    BÜNDNIS 90/DIE GRÜNEN                          GRÜNE</a></li>
<li><a href="#linke">Nr. 4    DIE LINKE                                      DIE LINKE</a></li>
<li><a href="#fdp">Nr. 5    Freie Demokratische Partei                     FDP</a></li>
usw.  

In den ersten beiden Zeilen stimmt die Formatierung, aber nicht der "Link-Effekt", in den unteren 3 Zeilen wird der Link angezeigt, sofern man mit der Maus drüber fährt, aber dafür stimmt die Formatierung nicht.

Wie mache ich das?
Danke.
AugustQ

  1. Hallo

    Wie mache ich das?

    Auf jeden Fall nicht mit table.

    Jetzt möchte ich aber die Sache schöner formatiert haben

    Damit kann außer dir niemand etwas anfangen. Beschreib' das mal für uns Unwissende.

    Gruss

    MrMurphy

    1. Moin!

      Auf jeden Fall nicht mit table.

      Nr. | Abk.    | Name der Partei
      ---------------------------------------------------------
      1   | CDU     | "Christlich demokratische" Union
      2   | SPD     | "Sozialdemokratische" Partei Deutschlands
      …
      

      Soso … Ich werde mich hüten hier eine Vorschrift zu machen.

      Zur Frage:

      Links über eine Tabellen-Zeile sind so

      <a href="#foo"><tr><td>…</td>…</tr></a>
      

      oder so

      <tr><a href="#foo"><td>…</td>…</a></tr>
      

      nicht zulässig. Deshalb habe ich das nicht als HTML markiert.

      Aber das Problem ist lösbar.

      1. Ansatz: Lösung als Tabelle

      <table id='Foobars'>
        <thead></thead>
        <tr>
          <td><a href="#foo">1</a></td>
          <td><a href="#foo">FOO</a></td>
          <td><a href="#foo">FOO ist nicht BAR</a></td>
        </tr>
      </table>
      

      ist erlaubt.

      Jetzt kann man mit CSS hingehen und das Aussehen bestimmen:

      #Foobars {
         // Tabelle insgesamt
      }
      
      #Foobars tr {
      
      }
      
      #Foobars tr:hover {
         // wie soll die Zeile aussehen, wenn die Maus darüber ist?
      }
      
      #Foobars tr td:nth-child(1) {
        width:3em;
        // weitere für erste Spalte (erstes Element des Elternelements, hier tr, also das mit der Nr.
      }
      #Foobars tr td:nth-child(2) {
        width:6em;
        // weitere für zweite Spalte
      }
      #Foobars tr td:nth-child(3) {
        width:20em;
        // weitere für dritte Spalte
      }
      
      #Foobars tr td {
         // Abstände, Innenabstände und Rahmen weg:
         margin:0;
         padding:0;
         border:0   
      }
      
      #Foobars tr td a {
        // Anzeige als Blockelement:
        display: block;
        height:100%;
        width: 100%;
        // ... padding, ...
      }
      

      Nachteil: Man muss sich mit Javascript um jene kümmern, die mit der Tastatur navigieren, das CSS das Elternelement nicht adressieren kann, also nicht die Zeile adressieren kann, welche ein Element enthält, welches den Focus bekommt bzw, verliert.

      Deshalb 2. Ansatz mit Liste:

      <ol id="foobars">
       <li>
         <a href="#foo">
           <span class="abk">FOO</span>
           <span class="vollname">FOO ist nicht BAR</span>
         </a>
       </li>
      </ol>
      

      Mit ein wenig CSS, z.B.

      #foobars li a span {
         display:inline-block;
      }
      
      #foobars li a span:nth-child(1) {
      // oder #foobars li a span.abk
         // Abkürzung
         width: 6em;
      }
      #foobars li a span:nth-child(2) {
      // oder oder #foobars li a span.vollname
         // Name
         width: 20em;
      }
      

      kann man das dann so formatieren, dass alles hübsch tabelliert ausssieht. Die Nummmer liefert die Liste und die Hover-Effekte kann man klassisch für den Link festlegen. Vorteil ist, dass die Navigation mit der Tastatur schlüssiger bleibt.

      Jörg Reinholz

  2. Hallo

    Wikipedia hat ein Inhaltsverzeichnis zu Beginn eines Artikels. So etwas wollte ich auch machen. Also habe ich mit <ul> meine Liste kreiert, inkl. der Links. Das klappte. Jetzt möchte ich aber die Sache schöner formatiert haben, also bin ich auf <table> gewechselt. Und da klappt dies alles nicht.

    Schöner formatieren kannst du auch eine Liste. Was du genau erreichen willst, solltest du uns, wie MrMurphy schon sagte, aber schon konkreter mitteilen, wenn du dabei Hilfe haben möchtest.

    So sieht mein Quellcode jetzt aus:

    <table> <colgroup> <col width="40"> <col width="400"> <col width="20"> </colgroup>
    <tr onclick="window.document.location='#cdu';"><td>Nr. 1</td><td>Christlich Demokratische Union Deutschlands</td><td>CDU</td></tr>
    <tr onclick="window.document.location='#spd';"><td>Nr. 2</td><td>Sozialdemokratische Partei Deutschlands</td><td>SPD</td></tr>  
    </table>
    <ul  style="list-style-type: none">
    <li><a href="#gruen">Nr. 3    BÜNDNIS 90/DIE GRÜNEN                          GRÜNE</a></li>
    <li><a href="#linke">Nr. 4    DIE LINKE                                      DIE LINKE</a></li>
    <li><a href="#fdp">Nr. 5    Freie Demokratische Partei                     FDP</a></li>
    usw.  
    

    In den ersten beiden Zeilen stimmt die Formatierung, aber nicht der "Link-Effekt", …

    Einen Linkelement (<a>) mit JavaScript nachbauen, obwohl es das schon gibt, ist müßig.

    … in den unteren 3 Zeilen wird der Link angezeigt, sofern man mit der Maus drüber fährt, aber dafür stimmt die Formatierung nicht.

    Mehr Input!

    Tschö, Auge

    --
    Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
    Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
    1. Hallo,

      und Danke für die schnellen Antworten.

      Was ich will: ich will ein Inhaltsverzeichnis, inkl. des Links für den direkten Sprung zur entsprechenden Stelle auf der gleichen Seite. Allerdings besteht mein Text aus 12 Zeilen mit jeweils 3 Spalten.

      Wie kann ich diesen Text so darstellen, daß die gesamte Zeile als Link behandelt wird, obwohl sie so aussieht:
      "Nr. 3 BÜNDNIS 90/DIE GRÜNEN GRÜNE"
      und schon nimmt mir der Browser die Leerzeichen weg, denn so sollte sie aussehen:

      <li><a href="#gruen">Nr. 3    BÜNDNIS 90/DIE GRÜNEN                          GRÜNE</a></li>
      

      Also bin ich auf die Idee der table-Anweisung gekommen, aber jetzt funktioniert das nicht mehr mit der Link-Anweisung (zumindest hatte ich mir das anders vorgestellt).

      Also, zusammengefasst: eine Art Tabelle mit 3 Spalten, aber präsentiert sich als Link.

      Ich hoffe, es ist etwas klarer geworden.

      Schönen Gruß
      August

      1. Hallo

        Eine Möglichkeit wäre

           <div class="ilinks">
              <a href="#cdu">
                 <p>Nr. 1</p>
                 <p>Christlich Demokratische Union Deutschlands</p>
                 <p>CDU</p>
              </a>
              <a href="#spd">
                 <p>Nr. 2</p>
                 <p>Sozialdemokratische Partei Deutschlands</p>
                 <p>SPD</p>
              </a>
              <a href="#gruen">
                 <p>Nr. 3</p>
                 <p>BÜNDNIS 90/DIE GRÜNEN</p>
                 <p>GRÜNE</p>
              </a>
              <a href="#linke">
                 <p>Nr. 4</p>
                 <p>Die Linke</p>
                 <p>Die Linke</p>
              </a>
              <a href="#fdp">
                 <p>Nr. 5</p>
                 <p>Freie Demokratische Partei</p>
                 <p>FDP</p>
              </a>
           </div>
        

        mit folgendem CSS

              .ilinks {
                 width: 90%;
                 margin: 1rem auto;
              }
              .ilinks a {
                 display: flex;
              }
              .ilinks a:hover {
                 background-color: hsla(37,100%,92%,1);;
              }
              .ilinks a>* {
                 margin: 0.3rem 0;
              }
              .ilinks a :nth-child(1) {
                 flex: 0 0 4rem;
              }
              .ilinks a :nth-child(2) {
              }
              .ilinks a :nth-child(3) {
                 margin-left: auto;
              }
        

        Insgesamt also zum Beispiel

        <!DOCTYPE html>
        <html lang="de">
        <head>
           <meta charset="utf-8">
           <title>Navigation 01</title>
           <meta name="description" content="HTML5, CSS3">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <!--[if lt IE 9]>
              <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
           <![endif]-->
           <style>
        
           /*Meine persönlichen Grundeinstellungen für alle Seiten*/
           @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
           @media all {
              header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
                 display: block;
              }
              * {
                 box-sizing: border-box;
              }
              html {
                 font-family: Sans-Serif;
                 font-size: 120%;
              }
              body {
                 margin: 0;
              }
           }
        
           /* ==================================================== */
           /* ***Ab hier beginnen die Angaben zur Problemlösung*** */
        
           /*Spezielle Einstellungen*/
           @media all {
              .ilinks {
                 width: 90%;
                 margin: 1rem auto;
              }
              .ilinks a {
                 display: flex;
              }
              .ilinks a:hover {
                 background-color: hsla(37,100%,92%,1);;
              }
              .ilinks a>* {
                 margin: 0.3rem 0;
              }
              .ilinks a :nth-child(1) {
                 flex: 0 0 4rem;
              }
              .ilinks a :nth-child(2) {
              }
              .ilinks a :nth-child(3) {
                 margin-left: auto;
              }
           }
        
           /* ***       Ende der Angaben zur Problemlösung***       */
           /* ===================================================== */
        
           /* Vorlage zum Kopieren für Media Queries */
           @media only screen and (max-width: 0px) {
           }
           </style>
        </head>
        <body>
           <div class="ilinks">
              <a href="#cdu">
                 <p>Nr. 1</p>
                 <p>Christlich Demokratische Union Deutschlands</p>
                 <p>CDU</p>
              </a>
              <a href="#spd">
                 <p>Nr. 2</p>
                 <p>Sozialdemokratische Partei Deutschlands</p>
                 <p>SPD</p>
              </a>
              <a href="#gruen">
                 <p>Nr. 3</p>
                 <p>BÜNDNIS 90/DIE GRÜNEN</p>
                 <p>GRÜNE</p>
              </a>
              <a href="#linke">
                 <p>Nr. 4</p>
                 <p>Die Linke</p>
                 <p>Die Linke</p>
              </a>
              <a href="#fdp">
                 <p>Nr. 5</p>
                 <p>Freie Demokratische Partei</p>
                 <p>FDP</p>
              </a>
           </div>
        </body>
        </html>
        

        JavaScript ist nicht notwendig und sollte deshalb nicht verwendet werden.

        Gruss

        MrMurphy

        1. Hallo MrMurphy,

          und Danke für die Beispiele. Das bewegt sich in die von mir gewünchte Richtung.

          Allerdings bin ich Anfänger in HTML und verstehe das alles nicht.

          mit folgendem CSS

                .ilinks {
                   width: 90%;
                   margin: 1rem auto;
                }
                .ilinks a {
                   display: flex;
                }
                .ilinks a:hover {
                   background-color: hsla(37,100%,92%,1);;
                }
                .ilinks a>* {
                   margin: 0.3rem 0;
                }
                .ilinks a :nth-child(1) {
                   flex: 0 0 4rem;
                }
                .ilinks a :nth-child(2) {
                }
                .ilinks a :nth-child(3) {
                   margin-left: auto;
                }
          

          Wo kann ich das nachlesen?

          Als erstes fiel mir auf, daß der Text in der dritten Spalte rechtsbündig war. Also habe ich mal ein bissel gespielt und folgendes geändert:

          <style type="text/css">
             /*Spezielle Einstellungen*/
             @media all {
          /*       .ilinks { */
          /*         width: 50%; */
          /*         margin: 1rem auto;*/
                .ilinks a {
                   display: flex;
                } 
                .ilinks a:hover {
                   background-color: hsla(37,100%,92%,1);;
                }
                .ilinks a>* {
                   margin: 0.1rem 0;
                } 
                .ilinks a :nth-child(1) {
          /*         flex: 0 0 4rem; */
          width: 40px;
                }
                .ilinks a :nth-child(2) {
          width: 300px;
                }
                .ilinks a :nth-child(3) {
          /*          margin-left: auto; */
          width: 60px;
                }
            } 
          </style>
          

          Die Zeile mit a>* ist wohl der Zeilenabstand, und bei den folgenden Ausdrücken habe ich eine Breite vorgegeben. Und die Eingaben habe ich dann begonnen mit:

          <div class="ilinks" style="margin-left: 2em; margin-right: 10em;">
          

          So, das sieht jetzt so aus, wie ich mir das vorgestellt habe.

          Jetzt will ich nur noch ein bissel von dem verstehen, was ich da gemacht habe. Ein Link reicht mir.

          Danke.
          August

          PS: normalerweise sind meine Sprachen Java, C, C++

          1. Hallo

            Ein Link reicht mir.

            Ein Link wird nicht ausreichen. Zumal wenn du selbst schreibst

            verstehe das alles nicht

            HTML im Zusammenspiel mit CSS ist inzwischen sehr komplex geworden, da die Arten der Ausgabegeräte immer vielfältiger geworden ist.

            Die Zeiten von "Ich kann eine oder zwei Programmiersprachen, dann mache ich Webseiten mal so nebenbei." sind schon seit Jahren vorbei.

            Du kannst mal nach folgenden Begriffen suchen:

            • HtML5
            • CSS3
            • Flexbox
            • CSS3 Selektoren

            Als erstes fiel mir auf, daß der Text in der dritten Spalte rechtsbündig war.

            Das war gewollt, da so der Platz am besten ausgenutzt wird.

            folgendes geändert

            Das ist nicht sinnvoll, da durch die width-Angaben Flexbox größtenteils außer Betrieb gesetzt wird.

            Ich habe mal eine Lösung mit linksbündigen "Spalten" erstellt:

            <!DOCTYPE html>
            <html lang="de">
            <head>
               <meta charset="utf-8">
               <title>Navigation 02</title>
               <meta name="description" content="HTML5, CSS3">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <!--[if lt IE 9]>
                  <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
               <![endif]-->
               <style>
            
               /*Meine persönlichen Grundeinstellungen für alle Seiten*/
               @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
               @media all {
                  header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
                     display: block;
                  }
                  * {
                     box-sizing: border-box;
                  }
                  html {
                     font-family: Sans-Serif;
                     font-size: 120%;
                  }
                  body {
                     margin: 0;
                  }
               }
            
               /* ==================================================== */
               /* ***Ab hier beginnen die Angaben zur Problemlösung*** */
            
               /*Spezielle Einstellungen*/
               @media all {
                  .ilinks {
                     width: 90%;
                     margin: 1rem auto;
                  }
                  .ilinks a {
                     color: blue;
                     display: flex;
                  }
                  .ilinks a:hover {
                     background-color: hsla(37, 100%, 92%, 1);
                  }
                  .ilinks a>* {
                     margin: 0.3rem 0;
                  }
                  .ilinks a :nth-child(1) {
                     flex-grow: 0;
                     flex-shrink: 0;
                     flex-basis: 4rem;
                  }
                  .ilinks a :nth-child(2) {
                     flex-grow: 1;
                     flex-shrink: 1;
                     flex-basis: 1px;
                  }
                  .ilinks a :nth-child(3) {
                     flex-grow: 0;
                     flex-shrink: 0;
                     flex-basis: 10rem;
                  }
               }
            
               /* ***       Ende der Angaben zur Problemlösung***       */
               /* ===================================================== */
            
               /* Vorlage zum Kopieren für Media Queries */
               @media only screen and (max-width: 0px) {
               }
            
               </style>
            </head>
            <body>
               <div class="ilinks">
                  <a href="#cdu">
                     <span>Nr. 1</span>
                     <span>Christlich Demokratische Union Deutschlands</span>
                     <span>CDU</span>
                  </a>
                  <a href="#spd">
                     <span>Nr. 2</span>
                     <span>Sozialdemokratische Partei Deutschlands</span>
                     <span>SPD</span>
                  </a>
                  <a href="#gruen">
                     <span>Nr. 3</span>
                     <span>Bündnis 90 / Die Grünen</span>
                     <span>Grüne</span>
                  </a>
                  <a href="#linke">
                     <span>Nr. 4</span>
                     <span>Die Linke</span>
                     <span>Die Linke</span>
                  </a>
                  <a href="#fdp">
                     <span>Nr. 5</span>
                     <span>Freie Demokratische Partei</span>
                     <span>FDP</span>
                  </a>
               </div>
            </body>
            </html>
            

            Statt der p-Elemente habe ich diesmal span-Elemente verwendet. Das CSS ist so ausgelegt, dass es egal ist ob p- oder span-Elemente verwendet werden.

            Gruss

            MrMurphy

        2. Moin!

            <div class="ilinks">
               <a href="#cdu">
                  <p>Nr. 1</p>
                  <p>Christlich Demokratische Union Deutschlands</p>
                  <p>CDU</p>
               </a>
          

          Ersetze jedes Vorkommen von '<p' durch '<span' und ich schließe mich dem an.

          Jörg Reinholz

          1. Hallo

            Ersetze jedes Vorkommen von '<p' durch '<span' und ich schließe mich dem an.

            Das kannst du doch einfach machen. Ich habe das CSS extra so flexibel gestaltet dass die Elemente je nach gewollter Semantik problemlos ausgetauscht werden können.

            Gruss

            MrMurphy

            1. Moin!

              Ich habe das CSS extra so flexibel gestaltet dass die Elemente je nach gewollter Semantik problemlos ausgetauscht werden können.

              Gutes Argument dafür, <p> für alles zu nehmen und dann mit Klassen (und diese mit einem Haufen CSS) zu versehen um es zu gestalten. <p> ist so schön kurz.

              Im Ernst: ich wollte eigentlich zum Ausdruck bringen, dass vom Lösungsansatz her bei Dir bin. Aber wie das Leben so spielt: Kaum hat man eine gute Idee kommt schon jemand, der kleinlich meckert.

              Jörg Reinholz

          2. Lieber Jörg,

              <div class="ilinks">
                 <a href="#cdu">
                    <p>Nr. 1</p>
                    <p>Christlich Demokratische Union Deutschlands</p>
                    <p>CDU</p>
                 </a>
            

            Ersetze jedes Vorkommen von '<p' durch '<span' und ich schließe mich dem an.

            wenn schon, dann das <div> noch durch <p> ersetzen, wenn die <p> durch <span> ersetzt wurden:

            <p class="links">
                <a href="#partei_xyz">
                    <span>Nr. 1</span>
                    <span>Partei XYZ</span>
                    <span>auch ohne Programm und Inhalte</span>
                </a>
            </p>
            

            Da stellt sich mir aber die Frage, warum man die Liste nicht wieder zu einer Liste macht:

            <ol class="links">
                <li>
                    <a href="#partei_xyz">
                        <span>Partei XYZ</span>
                        <span>auch ohne Programm und Inhalte</span>
                   </a>
               </li>
                <li>
                    <a href="#partei_abc">
                        <span>Partei ABC</span>
                        <span>aller beste cybersicherheit</span>
                   </a>
               </li>
            </ul>
            

            Im Grunde ist es schon eine Tabelle... aber jedem Tierchen sein Plaisierchen - und mir einen erholsamen Schlaf.

            Gute Nacht und liebe Grüße,

            Felix Riesterer.

            1. Moin Felix!

              Im Grunde ist es schon eine Tabelle... aber jedem Tierchen sein Plaisierchen

              Deswegen war ja meine allgemein unbeachtet gebliebene Antwort so lang.

              Jörg Reinholz

              1. Hallo Jörg Reinholz,

                Im Grunde ist es schon eine Tabelle... aber jedem Tierchen sein Plaisierchen

                Deswegen war ja meine allgemein unbeachtet gebliebene Antwort so lang.

                Woraus schließt du, dass sie unbeachtet blieb?

                Nicht gemeckert ist genug gelobt ;-)

                Bis demnächst
                Matthias

                --
                Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                1. Moin!

                  Deswegen war ja meine allgemein unbeachtet gebliebene Antwort so lang.

                  Woraus schließt du, dass sie unbeachtet blieb?

                  Nun ja. Zwei Gründe:

                  Nicht gemeckert ist genug gelobt ;-)

                  Ah! So läuft das hier! Ich kenne das Prinzip, ist wie "meine" Linux-Shell. Keine Ausgabe bedeutet "Alles i.O. Dödl!" ;-)

                  Jörg Reinholz

                2. Moin,

                  Nicht gemeckert ist genug gelobt ;-)

                  nanu? Ich dachte bisher immer, das wäre die schwäbische Methode!
                  Wie kommst du zu dieser Lebenseinstellung?

                  So long,
                   Martin

                  1. Hallo Der Martin,

                    Nicht gemeckert ist genug gelobt ;-)

                    nanu? Ich dachte bisher immer, das wäre die schwäbische Methode!

                    Ich glaub, das gibt es deutschlandweit.

                    Wie kommst du zu dieser Lebenseinstellung?

                    Das ist nicht meine Lebenseinstellung, schon gar nicht in meinem beruflichen Leben - im Gegenteil. Lernende brauchen positiv formulierte Rückmeldungen, je jünger desto mehr. Wir übersehen viel zu häufig auch die vermeintlich kleinen Fortschritte und vermeiden es, diese zu würdigen.

                    Bis demnächst
                    Matthias

                    --
                    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                    1. Hallo,

                      Nicht gemeckert ist genug gelobt ;-)

                      nanu? Ich dachte bisher immer, das wäre die schwäbische Methode!

                      Ich glaub, das gibt es deutschlandweit.

                      sieht fast so aus, aber ich kannte das bisher nur hier aus'm Ländle, weil die Schwaben generell dafür berüchtigt sind, sehr sparsam zu sein. Auch mit Lob. Vor allem indirektes Lob durch Verneinung des Gegenteils begegnet mir hier öfters:

                      "Und wie hat's d'r g'schmeckt?"
                      "Hajaa, gar net so übel."
                      "Und d'r Nachtisch?"
                      "Ha woisch, 's geht so."

                      Diese beiden Aussagen sind für schwäbische Verhältnisse schon fast ein Ausdruck von Enthusiasmus. :-)

                      Wie kommst du zu dieser Lebenseinstellung?

                      Das ist nicht meine Lebenseinstellung, schon gar nicht in meinem beruflichen Leben

                      Schon klar, war auch nicht ernst gemeint. Mich wunderte nur, dass dir diese (vermeintlich) typisch schwäbische Eigenheit auch in MeckPomm geläufig ist.

                      im Gegenteil. Lernende brauchen positiv formulierte Rückmeldungen, je jünger desto mehr. Wir übersehen viel zu häufig auch die vermeintlich kleinen Fortschritte und vermeiden es, diese zu würdigen.

                      Das ist wohl wahr. Das richtige Maß an Lob zu treffen (und die richtige Art, es zu äußern), ist aber auch nicht einfach. Lobt man zu überschwenglich, dann kommt das nur allzu leicht als unglaubwürdig oder gar lächerlich rüber. Aber die Schwelle empfindet auch jeder anders, das macht es so schwierig.

                      Schönes Wochenende,
                       Martin

                      1. Mahlzeit,

                        ich habe gerade den Eindruck, da ist ein neuer Forums-Bug aufgetaucht:

                        Bei jedem Aufruf der Vorschau zu meinem vorangegangenen Posting wurde die Grußfloskel am Schluss erneut wieder eingefügt, so dass ich sie am Schluss drei- oder viermal untereinander stehen hatte. Bei diesem hier auch wieder.
                        Ich hab's vor dem endgültigen Absenden bemerkt und war ziemlich verblüfft.

                        Geht es noch jemandem so? Woher kommt das auf einmal?

                        So long,
                         Martin

                        1. Hi,

                          Bei jedem Aufruf der Vorschau

                          wer macht denn schon sowas, wo die Vorschau doch direkt verfügbar ist ...

                          Geht es noch jemandem so? Woher kommt das auf einmal?

                          vermutlich eher wenigen, weil die meisten die direkte Vorschau nutzen.

                          cu,
                          Andreas a/k/a MudGuard

                          1. Hallo,

                            Bei jedem Aufruf der Vorschau

                            wer macht denn schon sowas, wo die Vorschau doch direkt verfügbar ist ...

                            vermutlich jeder, der es ebenso wie ich als Irritation und Ablenkung empfindet, wenn irgendwo am Bildschirm wieder etwas zappelt und zuckt.

                            Geht es noch jemandem so? Woher kommt das auf einmal?

                            vermutlich eher wenigen, weil die meisten die direkte Vorschau nutzen.

                            Das wird die Mehrheit sein, denke ich auch. Aber wahrscheinlich nicht alle.

                            So long,
                             Martin

                        2. Hallo,

                          Woher kommt das auf einmal?

                          Möglicherweise durch den erneuten Austausch des Hochlichters durch @Christian Kruse?

                          Gruß
                          Kalk

                          1. Hallo Tabellenkalk,

                            Möglicherweise durch den erneuten Austausch des Hochlichters durch @Christian Kruse?

                            Nö, eher durch ein Refactoring.

                            LG,
                            CK

                            1. Hallo Christian,

                              Nö, eher durch ein Refactoring.

                              [x] fixed.

                              LG,
                              CK

                              1. Hallo Christian,

                                Nö, eher durch ein Refactoring.

                                [x] fixed.

                                das ging ja richtig fix mit dem Fix. Der ist aber noch nicht in selfhtml.org eingespielt, oder? Denn beim Aufruf der Vorschau wird meine Verabschiedungs-Floskel hier immer noch ein zweites Mal eingetragen.

                                Thank you anyway und auch dir ein angenehmes Wochenende!

                                Ciao,
                                 Martin

                                1. Hallo Martin,

                                  das ging ja richtig fix mit dem Fix.

                                  Offensichtlich zu fix ;-)

                                  Der ist aber noch nicht in selfhtml.org eingespielt, oder? Denn beim Aufruf der Vorschau wird meine Verabschiedungs-Floskel hier immer noch ein zweites Mal eingetragen.

                                  ja, hab nur die hälfte gefixed. Hier ist die zweite Hälfte ;-)

                                  Thank you anyway und auch dir ein angenehmes Wochenende!

                                  Gleichfalls!

                                  LG,
                                  CK

                                  1. Hi,

                                    das ging ja richtig fix mit dem Fix.

                                    Offensichtlich zu fix ;-)

                                    erinnert mich an Anfang letzter Woche, als ich über eine Stunde nach einem Fehler gesucht habe, der gar nicht da war.

                                    Ein Kunde, für den ich vor Jahren mal eine Spezialsoftware geschrieben habe (Win32 GUI-Anwendung, modular als eine exe-Datei mit mehreren DLLs), hat mich mit einer Erweiterung des Funktionsumfangs beauftragt. Mit der Zeit kommen eben neue Anforderungen dazu.

                                    War auch technisch gar nicht so wild, außer dass ich mit Windows inzwischen nicht mehr so intim bin wie vielleicht noch vor fünf, sechs Jahren. Aber dann habe ich beim Testen einen kleinen, eher nebensächlichen Fehler entdeckt, sofort im Quellcode korrigiert, neu compiliert - und potzblitz, beim nächsten Testlauf war der Fehler immer noch da! Im Debugger sah alles korrekt aus, aber beim Standalone-Aufruf ... Bis mir dann wieder bewusst wurde, dass ich vergessen hatte, die neu generierte DLL auch ins Programmverzeichnis zu schieben. ;-)

                                    ja, hab nur die hälfte gefixed. Hier ist die zweite Hälfte ;-)

                                    Macht nix, kommt vor.

                                    So long,
                                     Martin

                      2. Moin!

                        "Und wie hat's d'r g'schmeckt?"
                        "Hajaa, gar net so übel."
                        "Und d'r Nachtisch?"
                        "Ha woisch, 's geht so."

                        Werde mir diese Formulierung merken, weil:

                        Ich: "Hm. Lecker!"
                        Sie: "Hör auf damit Dich einzuschleimen: DIR schmeckt doch sowieso ALLES."

                        Jörg Reinholz

                    2. Aloha ;)

                      Nicht gemeckert ist genug gelobt ;-)

                      nanu? Ich dachte bisher immer, das wäre die schwäbische Methode!

                      Ich glaub, das gibt es deutschlandweit.

                      Typisches Beispiel für schwäbischen Kulturexport ;)

                      Urschwäbisch: it gschompfa isch globt gnuag

                      Oder schon eingehochdeutscht: Net gschimpft isch globt gnug

                      Und wenn jemand von nördlich des Weißwurstäquators kommt, dann eben mit meckern statt schimpfen :D

                      Grüße,

                      RIDER

                      --
                      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                      # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                      1. Hallo,

                        Typisches Beispiel für schwäbischen Kulturexport ;)

                        hehe, das ist gut!

                        Urschwäbisch: it gschompfa isch globt gnuag

                        Apropos Urschwäbisch: Strenggenommen bin ich ja auch ein Reig'schmeckter. Ich habe zwar den größten Teil meiner bewussten Kindheit im Schwobaländle verbracht, bin aber in Dortmund geboren. Als ich etwa vier war, sind wir zunächst nach Stuttgart-Hedelfingen gezogen, drei Jahre später dann "aufs Dorf". An die ursprüngliche Heimat im Ruhrgebiet habe ich keine klare Erinnerung mehr, "Heimat" ist für mich die Region Stuttgart.
                        Da meine Eltern den schwäbischen Dialekt nie wirklich angenommen haben (nur ansatzweise), bin ich quasi zweisprachig aufgewachsen und kann auch heute noch zwischen Fast-Hochdeutsch und gemäßigtem Schwäbisch in Nullkommanix umschalten, oft sogar innerhalb derselben Gesprächsrunde - abhängig davon, wen ich gerade direkt anspreche.

                        Aber wenn ich damals in Schnait im Remstal (heute ein Ortsteil von Weinstadt) mitbekommen habe, wie sich Schnaiter Aborigines untereinander unterhalten, habe ich manchmal nicht ein einziges Wort verstanden.

                        Und wenn jemand von nördlich des Weißwurstäquators kommt, dann eben mit meckern statt schimpfen :D

                        Tja, da weicht das urtümliche Lokalkolorit halt etwas auf. ;-)

                        Adeele,
                         Martin

                        1. Aloha ;)

                          Urschwäbisch: it gschompfa isch globt gnuag

                          Apropos Urschwäbisch: Strenggenommen bin ich ja auch ein Reig'schmeckter. Ich habe zwar den größten Teil meiner bewussten Kindheit im Schwobaländle verbracht, bin aber in Dortmund geboren. Als ich etwa vier war, sind wir zunächst nach Stuttgart-Hedelfingen gezogen, drei Jahre später dann "aufs Dorf". An die ursprüngliche Heimat im Ruhrgebiet habe ich keine klare Erinnerung mehr, "Heimat" ist für mich die Region Stuttgart.

                          Ich bin zwar schon quasi reinrassig schwäbisch, bin aber in Schwäbisch Hall, also im Hohenlohischen, geboren (allerdings war ich da nach meiner Geburt nur etwa zwei Stunden, zählt also nicht recht). Aufgewachsen und seither lokalisiert bin ich ja in Ostwürttemberg - und das ist selbst schon eher schwäbischer Randbezirk. Wir sind quasi die letzte Hochburg, bevor es in alle Richtungen ganz andere Dialekte gibt: Im Nordwesten das Hohenlohische, im Norden und Osten das Ur-Fränkische, und im Südosten Bayerisch Schwaben. Bedingt dadurch...

                          Da meine Eltern den schwäbischen Dialekt nie wirklich angenommen haben (nur ansatzweise), bin ich quasi zweisprachig aufgewachsen und kann auch heute noch zwischen Fast-Hochdeutsch und gemäßigtem Schwäbisch in Nullkommanix umschalten, oft sogar innerhalb derselben Gesprächsrunde - abhängig davon, wen ich gerade direkt anspreche.

                          ...ist mein Schwäbisch, mit dem ich aufgewachsen bin, auch eher gemäßigt und von anderen sprachlichen Einflüssen mitgeprägt. Das Umschalten kann ich zwar auch - ist mir aber persönlich zu lästig. Meistens schwätz i wie mier d Gosch gwachsa isch, wobei das, wie gesagt, auch für "Hochdeutsche" größtenteils ganz gut verständlich ist.

                          Aber wenn ich damals in Schnait im Remstal (heute ein Ortsteil von Weinstadt) mitbekommen habe, wie sich Schnaiter Aborigines untereinander unterhalten, habe ich manchmal nicht ein einziges Wort verstanden.

                          Oh ja, das Remstal ist tatsächlich berühmt-berüchtigt ;)

                          Grüße,

                          RIDER

                          --
                          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                          # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                          1. Hallo Camping_RIDER, @Der Martin,

                            ihr solltet beide nach Erfurt kommen.

                            Bis demnächst
                            Matthias

                            --
                            Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                            1. Hi,

                              ihr solltet beide nach Erfurt kommen.

                              ähm, Erfurt? Wie, wieso?
                              Was gibt's da Besonderes? Außer dass es die Landeshauptstadt von Thüringen ist?

                              So long,
                               Martin

                              1. Aloha ;)

                                ihr solltet beide nach Erfurt kommen.

                                ähm, Erfurt? Wie, wieso?
                                Was gibt's da Besonderes? Außer dass es die Landeshauptstadt von Thüringen ist?

                                Ich denke @Matthias Apsel will darauf raus, dass wir beide uns mal real gegenüber treten sollten ;) Erfurt ist Anspielung auf das kommende Self-Treffen, wenn ich das richtig deute.

                                Wegen mir übrigens gerne - ich hätte dich auch in Münster gern getroffen und werde aller Voraussicht nach auch in Erfurt dabei sein. Wenn es auch nicht einer gewissen Ironie entbehrt, dass wir unter 100km nah aneinander wohnen und quer durch Deutschland tingeln um uns zu treffen :D

                                Grüße,

                                RIDER

                                --
                                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                              2. Moin!

                                ähm, Erfurt? Wie, wieso?
                                Was gibt's da Besonderes? Außer dass es die Landeshauptstadt von Thüringen ist?

                                Thüringer Klöße. En gros, en masse et - pour les femmes - en détail.

                                Jörg Reinholz

                                1. Hallo,

                                  Was gibt's da Besonderes? Außer dass es die Landeshauptstadt von Thüringen ist?

                                  Thüringer Klöße. En gros, en masse et - pour les femmes - en détail.

                                  Dass die dort unverständlich babbeln, da geb ich dir recht; dass dort vorallem Französisch gesprochen wird, bezweifel ich mal.

                                  Ansonsten ist wohl die Krämerbrücke ganz sehenswert.

                                  Gruß
                                  Kalk

                          2. n'Abend,

                            ...ist mein Schwäbisch, mit dem ich aufgewachsen bin, auch eher gemäßigt und von anderen sprachlichen Einflüssen mitgeprägt. Das Umschalten kann ich zwar auch - ist mir aber persönlich zu lästig.

                            mir ist es nicht lästig, sondern ich nehme es gar nicht bewusst wahr. Teilweise haben sich schon Freunde und Verwandte darüber amüsiert, aber bei mir ist das keine willentlich gesteuerte Sache, sondern "es passiert einfach so". Wenn jetzt noch ein Amerikaner in der Runde säße, würde ich wohl genauso "on the fly" umschalten und den in Englisch ansprechen - ebenfalls ohne dass mir das bewusst wäre.

                            Meistens schwätz i wie mier d Gosch gwachsa isch, wobei das, wie gesagt, auch für "Hochdeutsche" größtenteils ganz gut verständlich ist.

                            Wenn ich Verwandtschaft in und um Dortmund besuche, bin ich meist sehr schnell wieder im quasi-hochdeutschen, westfälisch angehauchten Trott. Nur wenn ich dann irgendwo reinkomme und ohne Nachdenken spontan "Grüß Gott" sage, bin ich schon aufgefallen. ;-)

                            Aber wenn ich damals in Schnait im Remstal (heute ein Ortsteil von Weinstadt) mitbekommen habe, wie sich Schnaiter Aborigines untereinander unterhalten, habe ich manchmal nicht ein einziges Wort verstanden.

                            Oh ja, das Remstal ist tatsächlich berühmt-berüchtigt ;)

                            Ach ja? Inwiefern? Ich bin da aufgewachsen und zur Schule gegangen. Bin ich jetzt berüchtigt?

                            So long,
                             Martin

                            1. Aloha ;)

                              Aber wenn ich damals in Schnait im Remstal (heute ein Ortsteil von Weinstadt) mitbekommen habe, wie sich Schnaiter Aborigines untereinander unterhalten, habe ich manchmal nicht ein einziges Wort verstanden.

                              Oh ja, das Remstal ist tatsächlich berühmt-berüchtigt ;)

                              Ach ja? Inwiefern? Ich bin da aufgewachsen und zur Schule gegangen. Bin ich jetzt berüchtigt?

                              In Punkto ur-schwäbischem Dialekt ;)

                              Grüße,

                              RIDER

                              --
                              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                              # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
              2. Hallo Jörg,

                sorry, habe ich übersehen.

                August

                Moin Felix!

                Im Grunde ist es schon eine Tabelle... aber jedem Tierchen sein Plaisierchen

                Deswegen war ja meine allgemein unbeachtet gebliebene Antwort so lang.

                Jörg Reinholz

      2. Hallo

        Was ich will: ich will ein Inhaltsverzeichnis, inkl. des Links für den direkten Sprung zur entsprechenden Stelle auf der gleichen Seite. Allerdings besteht mein Text aus 12 Zeilen mit jeweils 3 Spalten.

        Das soll in etwa so aussehen?

        Nr. 1    BÜNDNIS 49/DIE WEISSEN                         WEISSE
        Nr. 2    BÜNDNIS 72%/DIE BLAUEN                         BLAUE
        Nr. 3    BÜNDNIS 90/DIE GRÜNEN                          GRÜNE
        Nr. 4    BÜNDNIS 0/DIE BLASSEN                          BLASSE
        

        Wie kann ich diesen Text so darstellen, daß die gesamte Zeile als Link behandelt wird, obwohl sie so aussieht:
        "Nr. 3 BÜNDNIS 90/DIE GRÜNEN GRÜNE"
        und schon nimmt mir der Browser die Leerzeichen weg,

        Das macht jeder Browser ohne weitere Vorkehrungen immer.

        Womit wir mitten im Text wären. Um eine tabellarische Darstellung der Bestandteile der Links zu erhalten, müssen die Texte entweder in einzelne Elemente (<span> böte sich an) gestückelt werden (getreu dem Wort Bestandteile) die jeweils per display: inline-block; und einer Breitenangabe versehen werden oder du arbeitest für diese Linkliste mit der CSS-Eigenschaft white-space: pre;.

        Methode #1

        <li><a href="#gruen"><span>Nr. 3</span><span>BÜNDNIS 90/DIE GRÜNEN</span><span>GRÜNE</span></a></li>
        
        #inhaltsverzeichnis a span { display: inline-block; }
        #inhaltsverzeichnis a span:first-child { width: 4em; }
        #inhaltsverzeichnis a span:nth-child(2) { width: 20em; }
        #inhaltsverzeichnis a span:last-child { width: 8em; }
        
        • Vorteil: spätere Änderungen an den Breiten und Abständen lassen sich mit der Änderung von ein paar CSS-Regeln erledigen.
        • Nachteil: aufwendiger Entwurf, bei einmaliger Ausführung egal, bei regelmäßigen Änderungen evtl. nervig.

        Methode #2:

        <li><a href="#gruen">Nr. 3    BÜNDNIS 90/DIE GRÜNEN                          GRÜNE</a></li>
        
        #inhaltsverzeichnis a { white-space: pre; }
        
        • Vorteil: Formatierung mit ein paar Tastendrücken auf der Leertaste.
        • Nachteil: Bei der Änderung der Breiten und Abstände muss jeder Link angefasst werden.

        Tschö, Auge

        --
        Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
        Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
        1. Hallo Auge,

          Das soll in etwa so aussehen?

          Nr. 1    BÜNDNIS 49/DIE WEISSEN                         WEISSE
          Nr. 2    BÜNDNIS 72%/DIE BLAUEN                         BLAUE
          Nr. 3    BÜNDNIS 90/DIE GRÜNEN                          GRÜNE
          Nr. 4    BÜNDNIS 0/DIE BLASSEN                          BLASSE
          

          ja, genau so will ich das haben.

          Dein Beispiel mit dem #inhaltsverzeichnis hat bei mir nicht geklappt, dafür aber das andere Beispiel (von MrMurphy), so daß ich Deinen Weg wohl nicht verwenden werde.

          Trotzdem Danke für die Hilfe.
          August

  3. Hello to everyone,

    Danke für die vielen Antworten. Ich will die alle erst mal durchlesen und werde mich danach wieder melden.

    August

    PS: und ausserdem will ich den Text für meinen Blogbeitrag ja auch noch mit Inhalten füllen.