Einzelnen Beitrag anzeigen
  #8 (permalink)  
Alt 18.04.2015, 10:54
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

das Grundproblem ist mal wieder, das es sich um keine Tabellendaten handelt und eine Tabelle als Gerüst damit semantisch schon mal falsch ist.

Es handelt sich um eine einfache Liste mit Zahlen als Inhalt. Also sind ul- und li-Elemente angesagt. Dadurch wird der HTML-Quelltext gleichzeitig deutlich übersichtlicher und auch spätere Anpassungen an schmalere Fenster sind kein Problem.

Die Tabellenansicht ist sinnvoll und kann beibehalten werden. Das wird mit einer Prise CSS erledigt. Dabei können die nth-child-Selektoren ansatzweise ihre Möglichkeiten ausspielen. "Zeilen" können gelöscht oder hinzugefügt werden, ohne das das CSS angepasst werden muss.

Dafür habe ich mal folgendes Beispiel erstellt:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Alter-Auswahl</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      body {
         width: 98%;
         padding: 0;
         margin: 1rem auto;
      }
      main {
         padding: 0;
         margin: 0;
      }
      section {
         max-width: 50rem;
      }
      section h1 {
         font-family: 'Oswald';
         font-size: 2rem;
         letter-spacing: 0.3rem;
         text-align: center;
      }
      ol,
      ul {
         background-color: white;
         padding: 0;
         border: 1px solid black;
         margin: 0;
         display: flex;
         flex-wrap: wrap;
      }
      li {
         background-color: #e8eef5;
         list-style-type: none;
         width: 10%;
         height: 2.5rem;
         border: 1px solid silver none;
         margin: 1rem 0;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      li:nth-of-type(-1n+10) {
         margin-top: 0;
      }
      li:nth-last-of-type(-1n+10) {
         margin-bottom: 0;
      }
      li:nth-child(10n+1) a{
         color: #0077b3;
      }
      a {
         font-family: 'Oswald';
         display: block;
         color: black;
         font-size: 1.9rem;
         font-weight: bold;
         text-decoration: none;
      }
      a:hover {
         font-size: 2.3rem;
      }
   </style>
</head>
<body>
   <main>
      <section>
         <h1>Wie alt sind Sie?</h1>      
         <ul>
            <li><a href="#">30</a></li>
            <li><a href="#">31</a></li>
            <li><a href="#">32</a></li>
            <li><a href="#">33</a></li>
            <li><a href="#">34</a></li>
            <li><a href="#">35</a></li>
            <li><a href="#">36</a></li>
            <li><a href="#">37</a></li>
            <li><a href="#">38</a></li>
            <li><a href="#">39</a></li>
            <li><a href="#">40</a></li>
            <li><a href="#">41</a></li>
            <li><a href="#">42</a></li>
            <li><a href="#">43</a></li>
            <li><a href="#">44</a></li>
            <li><a href="#">45</a></li>
            <li><a href="#">46</a></li>
            <li><a href="#">47</a></li>
            <li><a href="#">48</a></li>
            <li><a href="#">49</a></li>
            <li><a href="#">50</a></li>
            <li><a href="#">51</a></li>
            <li><a href="#">52</a></li>
            <li><a href="#">53</a></li>
            <li><a href="#">54</a></li>
            <li><a href="#">55</a></li>
            <li><a href="#">56</a></li>
            <li><a href="#">57</a></li>
            <li><a href="#">58</a></li>
            <li><a href="#">59</a></li>
            <li><a href="#">60</a></li>
            <li><a href="#">61</a></li>
            <li><a href="#">62</a></li>
            <li><a href="#">63</a></li>
            <li><a href="#">64</a></li>
            <li><a href="#">65</a></li>
            <li><a href="#">66</a></li>
            <li><a href="#">67</a></li>
            <li><a href="#">68</a></li>
            <li><a href="#">69</a></li>
            <li><a href="#">70</a></li>
            <li><a href="#">71</a></li>
            <li><a href="#">72</a></li>
            <li><a href="#">73</a></li>
            <li><a href="#">74</a></li>
            <li><a href="#">75</a></li>
            <li><a href="#">76</a></li>
            <li><a href="#">77</a></li>
            <li><a href="#">78</a></li>
            <li><a href="#">79</a></li>
            <li><a href="#">80</a></li>
            <li><a href="#">81</a></li>
            <li><a href="#">82</a></li>
            <li><a href="#">83</a></li>
            <li><a href="#">84</a></li>
            <li><a href="#">85</a></li>
            <li><a href="#">86</a></li>
            <li><a href="#">87</a></li>
            <li><a href="#">88</a></li>
            <li><a href="#">89</a></li>
         </ul>
      </section>
   </main>
</body>
</html>
Gruss

MrMurphy

Geändert von MrMurphy (18.04.2015 um 10:57 Uhr)
Mit Zitat antworten