Tabelle mit Links

[augustq]

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++