Matthias Apsel: Unverständliche Höhe

Beitrag lesen

Hallo einsiedler,

Ich hab mal noch eine andere Semantikvariante. Folgendes Minimal-CSS liefert die gewünschte Gestaltung. Fonts und Farben kannst du selbst hinzufügen.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Waldfrieden -- Tassilo Sturm</title>
    
  <style>
  
body {
  width: 83vw;
  margin: 0 auto;
}
ul, li {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
header {
  max-width: 42em;
  margin-bottom: 1em;
}
header ul, h1 {
  display: flex;
  justify-content: space-between;
}
main {
  display: flex;
}
aside {
  flex-grow: 1;
  margin-right: 1em;
}
article {
  flex-grow: 4;
}
h3 {
  margin-top: 0;
}

.stationen {
  display: flex;
  flex-wrap: wrap;
}
dt {
  flex: 1 1 12%
}
dd {
  flex: 8 1 88%;
  margin: 0;
}

h1, header nav, aside, article {
  background: red;
} 

  </style>
  
  
</head>


<body>

  <header>
    <h1>Tassilo Sturm <span>//</span>Rauminstallationen</h1>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="work.php"> Arbeiten </a></li>
        <li><span class="MainNavifont"> CV </span></li>
        <li><a href="text_de.html"> Text </a></li>
        <li><a href="imprint_contact.html"> Kontakt & Impressum </a></li>
      </ul>
    </nav>
  </header>
  
  <main>
  
    <aside>
    
      <nav>
        <ul id="SubNavi">
          <li><span class="SubNavifont"> Curriculum&nbsp;Vitae </span></li>
          <li><a href="cv_single_shows.html"> Einzelausstellungen </a></li>
          <li><a href="cv_group_shows.html"> Gruppenausstellungen </a></li>                
        </ul>
      </nav>
      
    </aside>
    
    <article>
    
          <h3> Tassilo Sturm </h3>
        
          <ul class="textbox">
            <li>Geboren in Unna / NRW</li>
            <li>Lebt und arbeitet in Münster / Westf.</li>
            <li>Examen und "Meisterschüler" bei Prof. Ulrich Erben</li>
            <li>Studium an der Hochschule für Bildende Künste / Münster</li>
            <li>Studium der Kunstgeschichte, klass. Archäologie und Ägyptologie</li>  
            <li>an der "Westfälischen Wilhelms Universität" Münster</li>
          </ul>
          
          <h4>Preise / Stipendien</h4>
          
          <dl class="stationen">
            <dt>2008</dt>
            <dd>Artist in Residence , "Stiftung Künstlerdorf Schöppingen", Schöppingen</dd>
            <dt>2005</dt>
            <dd>Artist in Residence , "Cité Internationale des Arts", Paris</dd>
          </dl>

    </article>
  
  </main>

</body>

</html>

Auch das HTML lässt sich noch verbessern. Zum Beispiel ist an der "Westfälischen Wilhelms Universität" Münster kein eigenständiger Listenpunkt.

Bis demnächst
Matthias

--
Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
0 47

IE 11 : bei STRG++ kollabiert irgendwann meine Seite

einsiedler
  • html
  • sonstiges
  1. 4
    MrMurphy1
  2. 0
    einsiedler
  3. 0
    einsiedler
    1. 0
      MrMurphy1
      1. 2
        einsiedler
      2. 0
        einsiedler
        1. 0
          Matthias Apsel
          1. 0
            einsiedler
            1. 1
              Matthias Apsel
              1. 0
                einsiedler
                1. 0
                  Matthias Apsel
                2. 0
                  Matthias Apsel
                  1. 0
                    einsiedler
                    1. 0
                      Matthias Apsel
                      1. 0
                        einsiedler
                        1. 0
                          Matthias Apsel
                3. 0
                  marctrix
                  • menschelei
              2. 0
                einsiedler
      3. 0
        marctrix
  4. 0
    einsiedler
  5. 0

    Wie entsteht diese (eingezeichnete) HÖHE???

    einsiedler
    1. 0
      Matthias Apsel
    2. 0
      MudGuard
  6. 0

    Unverständliche Höhe

    einsiedler
    1. 0
      Matthias Apsel
      1. 0
        einsiedler
        1. 0
          Matthias Apsel
          1. 0
            einsiedler
            1. 0
              Matthias Apsel
              1. 0
                einsiedler
              2. 0
                einsiedler
                1. 0
                  Matthias Apsel
                  1. 0
                    Matthias Apsel
                2. 0
                  Matthias Apsel
                  1. 0
                    einsiedler
                3. 0
                  Matthias Apsel
                  1. 0
                    einsiedler
                    1. 0
                      Matthias Apsel
                    2. 0
                      MrMurphy1
                    3. 0

                      listen - dl - dd usw.

                      einsiedler
                      1. 0
                        Matthias Apsel
                        1. 0
                          einsiedler
                          1. 0
                            Matthias Apsel
                    4. 1
                      MrMurphy1
                      1. 0

                        Privat - PN

                        einsiedler
                        1. 0
                          Tabellenkalk