XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Hilfe!! HTML Tabelle. Anfängerin braucht Hilfe (http://xhtmlforum.de/showthread.php?t=71924)

ea_sy 17.04.2015 14:51
Hilfe!! HTML Tabelle. Anfängerin braucht Hilfe
 
Hi Leute,

seit Wochen frage ich mich schon wie ich eine Tabelle fixen kann.
Ich will nicht, dass sich bei einem mouse-hover die Zeile der veränderten Fontgröße anpassen :roll:


Kann mir evtl jemand schnell helfen :oops::(
Mein Code:

HTML-Code:
<!DOCTYPE html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <title>Sind das Ihre alten Mitsch&uuml;ler?</title>
   
    <style>       
        #container { margin:0; max-width:800px; max-height:600px;}
        body {font-size: 100%;}
        a {text-decoration:none; color:#000000;}
    a.sf_button        {text-decoration:none; color:#ffffff; display:block;}
        table {border:1px solid #000000;}
        #tableFixed {table-layout:fixed;}
        #tdID_0 {padding:20px 30px 30px 30px; font-family: 'Oswald', sans-serif; font-weight:700; font-size:2.5em; text-align:center;}
        #tdID_1 {padding:0px 30px 30px 0px; font-family: 'Oswald', sans-serif; font-weight:700;  font-size:1.9em; text-align:center;}
        #tdID_2 {padding:20px 30px 0px 30px;}
        #tdID_3 {padding:10px 10px 20px 30px;}

        img {padding-top:51px;}
       
    #zeile1_1:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_2:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_3:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_4:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_5:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_6:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_7:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_8:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_9:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile1_10:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}

    #zeile2_1:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_2:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_3:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_4:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_5:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_6:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_7:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_8:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_9:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile2_10:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}

    #zeile3_1:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_2:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_3:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_4:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_5:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_6:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_7:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_8:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_9:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile3_10:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}

    #zeile4_1:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_2:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_3:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_4:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_5:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_6:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_7:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_8:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_9:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile4_10:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}

    #zeile5_1:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_2:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_3:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_4:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_5:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_6:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_7:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_8:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_9:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile5_10:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}

    #zeile6_1:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_2:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_3:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_4:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_5:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_6:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_7:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_8:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_9:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}
    #zeile6_10:hover {color: #f4c100; font-size:130%; font-weight: bold; text-shadow: 0 0 5px white;}

    #button {
        font-family: 'Pacifico', cursive;
        font-size: 1.458em;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow:    0 8px 0 #e1ad08, 0 15px 20px rgba(0, 0, 0, .35);
        -moz-box-shadow: 0 8px 0 #e1ad08, 0 15px 20px rgba(0, 0, 0, .35);
        box-shadow: 0 8px 0 #e1ad08, 0 15px 20px rgba(0, 0, 0, .35);
        -webkit-transition: -webkit-box-shadow .1s ease-in-out;
        -moz-transition: -moz-box-shadow .1s ease-in-out;
        -o-transition: -o-box-shadow .1s ease-in-out;
        transition: box-shadow .1s ease-in-out;
        color: #fff;
    }

    #button span {
        text-shadow: 0 -1px 1px rgb(207, 155, 8);
        display: inline-block;
        padding: 20px 30px;
        background-color: #f4c100;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(49, 78%, 79%, 0.80)), to(hsla(47, 100%, 47%, 0.28)));
        background-image: -webkit-linear-gradient(hsla(49, 78%, 79%, 0.80), hsla(47, 100%, 47%, 0.20));
        background-image: -moz-linear-gradient(hsla(49, 78%, 79%, 0.80), hsla(47, 100%, 47%, 0.20));
        background-image: -o-linear-gradient(hsla(49, 78%, 79%, 0.80), hsla(47, 100%, 47%, 0.20));
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
        -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
        box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
        font-family: 'Pacifico', Arial, sans-serif;
        line-height: 1;
        -webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-out;
        -moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
        -o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
        transition: background-color .2s ease-in-out, transform .1s ease-in-out;
    }

    #button:hover span {
        background-color: #f4c100;
        text-shadow: 0 -1px 1px rgba(210, 84, 244, 0.90), 0 0 5px rgba(255, 255, 255, .8);
    }

    #button:active, #button:focus {
        -webkit-box-shadow:    0 8px 0 #f4c100, 0 12px 10px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 8px 0 #f4c100, 0 12px 10px rgba(0, 0, 0, .3);
        box-shadow:    0 8px 0 #e1ad08, 0 12px 10px rgba(0, 0, 0, .3);
    }

    #button:active span {
        -webkit-transform: translate(0, 4px);
        -moz-transform: translate(0, 4px);
        -o-transform: translate(0, 4px);
        transform: translate(0, 4px);
    }
       
        #padding_button {padding: 40px 20px 20px 0;}


</style>

</head>
<BODY>

        <div id="container">

        <a href="<mpvc/>http://<mpck/>&mpro=http://www.stayfriends.de/sfvc/inboundlinks/ADB1Z?ABBZ=8730&AFBZ=f18c2fb07d33bd15bf3cc09f664272b0d6b22556_" target="_blank" class="">

        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td id="tdID_0">Wie alt sind Sie?</td>
            </tr>
            <tr>
                <td id="tdID_1" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
                        <tr bgcolor="#e8eef5">
                            <td id= "zeile1_1" style="color:#0077b3;" valign="middle" align="center" width="10%"><b>30</b></td>
                            <td id= "zeile1_2" style="" valign="middle" align="center" width="10%">31</td>
                            <td id= "zeile1_3" style="" valign="middle" align="center" width="10%">32</td>
                            <td id= "zeile1_4" style="" valign="middle" align="center" width="10%">33</td>
                            <td id= "zeile1_5" style="" valign="middle" align="center" width="10%">34</td>
                            <td id= "zeile1_6" style="" valign="middle" align="center" width="10%">35</td>
                            <td id= "zeile1_7" style="" valign="middle" align="center" width="10%">36</td>
                            <td id= "zeile1_8" style="" valign="middle" align="center" width="10%">37</td>
                            <td id= "zeile1_9" style="" valign="middle" align="center" width="10%">38</td>
                            <td id= "zeile1_10" style="" valign="middle" align="center" width="10%">39</td>
                        </tr>
                        <tr>
                            <td colspan="10"><img src="http://creative.stayfriends.de/DE/500x600_howold-text-classphoto-fries_DE_0242_a/pixt.gif" width="5" height="10" border="0" alt="" title=""></td>
                        </tr>
                        <tr bgcolor="#f3f6fa">
                            <td id= "zeile2_1" style="color:#0077b3;" valign="middle" align="center" width="10%"><b>40</b></td>
                            <td id= "zeile2_2" style="" valign="middle" align="center" width="10%">41</td>
                            <td id= "zeile2_3" style="" valign="middle" align="center" width="10%">42</td>
                            <td id= "zeile2_4" style="" valign="middle" align="center" width="10%">43</td>
                            <td id= "zeile2_5" style="" valign="middle" align="center" width="10%">44</td>
                            <td id= "zeile2_6" style="" valign="middle" align="center" width="10%">45</td>
                            <td id= "zeile2_7" style="" valign="middle" align="center" width="10%">46</td>
                            <td id= "zeile2_8" style="" valign="middle" align="center" width="10%">47</td>
                            <td id= "zeile2_9" style="" valign="middle" align="center" width="10%">48</td>
                            <td id= "zeile2_10" style="" valign="middle" align="center" width="10%">49</td>
                        </tr>
                        <tr>
                            <td colspan="10"><img src="http://creative.stayfriends.de/DE/500x600_howold-text-classphoto-fries_DE_0242_a/pixt.gif" width="33,3%" height="10" border="0" alt="" title=""></td>
                        </tr>
                        <tr bgcolor="#e8eef5">
                            <td id= "zeile3_1" style="color:#0077b3;" valign="middle" align="center" width="10%"><b>50</b></td>
                            <td id= "zeile3_2" style="" valign="middle" align="center" width="10%">51</td>
                            <td id= "zeile3_3" style="" valign="middle" align="center" width="10%">52</td>
                            <td id= "zeile3_4" style="" valign="middle" align="center" width="10%">53</td>
                            <td id= "zeile3_5" style="" valign="middle" align="center" width="10%">54</td>
                            <td id= "zeile3_6" style="" valign="middle" align="center" width="10%">55</td>
                            <td id= "zeile3_7" style="" valign="middle" align="center" width="10%">56</td>
                            <td id= "zeile3_8" style="" valign="middle" align="center" width="10%">57</td>
                            <td id= "zeile3_9" style="" valign="middle" align="center" width="10%">58</td>
                            <td id= "zeile3_10" style="" valign="middle" align="center" width="10%">59</td>
                        </tr>
                        <tr>
                            <td colspan="10"><img src="http://creative.stayfriends.de/DE/500x600_howold-text-classphoto-fries_DE_0242_a/pixt.gif" width="33,3%" height="10" border="0" alt="" title=""></td>
                        </tr>
                        <tr bgcolor="#f3f6fa">
                            <td id= "zeile4_1" style="color:#0077b3;" valign="middle" align="center" width="10%"><b>60</b></td>
                            <td id= "zeile4_2" style="" valign="middle" align="center" width="10%">61</td>
                            <td id= "zeile4_3" style="" valign="middle" align="center" width="10%">62</td>
                            <td id= "zeile4_4" style="" valign="middle" align="center" width="10%">63</td>
                            <td id= "zeile4_5" style="" valign="middle" align="center" width="10%">64</td>
                            <td id= "zeile4_6" style="" valign="middle" align="center" width="10%">65</td>
                            <td id= "zeile4_7" style="" valign="middle" align="center" width="10%">66</td>
                            <td id= "zeile4_8" style="" valign="middle" align="center" width="10%">67</td>
                            <td id= "zeile4_9" style="" valign="middle" align="center" width="10%">68</td>
                            <td id= "zeile4_10" style="" valign="middle" align="center" width="10%">69</td>
                        </tr>
                        <tr>
                            <td colspan="10"><img src="http://creative.stayfriends.de/DE/500x600_howold-text-classphoto-fries_DE_0242_a/pixt.gif" width="33,3%" height="10" border="0" alt="" title=""></td>
                        </tr>
                        <tr bgcolor="#e8eef5">
                            <td id= "zeile5_1" style="color:#0077b3;" valign="middle" align="center" width="10%"><b>70</b></td>
                            <td id= "zeile5_2" style="" valign="middle" align="center" width="10%">71</td>
                            <td id= "zeile5_3" style="" valign="middle" align="center" width="10%">72</td>
                            <td id= "zeile5_4" style="" valign="middle" align="center" width="10%">73</td>
                            <td id= "zeile5_5" style="" valign="middle" align="center" width="10%">74</td>
                            <td id= "zeile5_6" style="" valign="middle" align="center" width="10%">75</td>
                            <td id= "zeile5_7" style="" valign="middle" align="center" width="10%">76</td>
                            <td id= "zeile5_8" style="" valign="middle" align="center" width="10%">77</td>
                            <td id= "zeile5_9" style="" valign="middle" align="center" width="10%">78</td>
                            <td id= "zeile5_10" style="" valign="middle" align="center" width="10%">79</td>
                        </tr>
                        <tr>
                            <td colspan="10"><img src="http://creative.stayfriends.de/DE/500x600_howold-text-classphoto-fries_DE_0242_a/pixt.gif" width="5" height="10" border="0" alt="" title=""></td>
                        </tr>
                        <tr bgcolor="#f3f6fa">
                            <td id= "zeile6_1" style="color:#0077b3;" valign="middle" align="center" width="10%"><b>80</b></td>
                            <td id= "zeile6_2" style="" valign="middle" align="center" width="10%">81</td>
                            <td id= "zeile6_3" style="" valign="middle" align="center" width="10%">82</td>
                            <td id= "zeile6_4" style="" valign="middle" align="center" width="10%">83</td>
                            <td id= "zeile6_5" style="" valign="middle" align="center" width="10%">84</td>
                            <td id= "zeile6_6" style="" valign="middle" align="center" width="10%">85</td>
                            <td id= "zeile6_7" style="" valign="middle" align="center" width="10%">86</td>
                            <td id= "zeile6_8" style="" valign="middle" align="center" width="10%">87</td>
                            <td id= "zeile6_9" style="" valign="middle" align="center" width="10%">88</td>
                            <td id= "zeile6_10" style="" valign="middle" align="center" width="10%">89</td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td id="tdID_2">

                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td border-top="5px solid" align="left"><img src="http://creative.stayfriends.de/DE/500x600_howold-text-classphoto-fries_DE_0242_a/classphoto01.jpg" width="100%" border="0" alt="" title=""></td>
                            <td align="center"><img src="http://creative.stayfriends.de/DE/500x600_howold-text-classphoto-fries_DE_0242_a/classphoto03.jpg" width="100%"  border="0" alt="" title=""></td>
                            <td align="right"><img src="http://creative.stayfriends.de/DE/500x600_howold-text-classphoto-fries_DE_0242_a/classphoto02.jpg" width="100%"  border="0" alt="" title=""></td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td id="tdID_3" class= "td_tags">
                    <table id="padding_button" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td width="24%" align="left" ><img src="" width="137" height="23" border="0" ></td>
                            <td width="43%" align="right">
                                <a href="<mpvc/>http://<mpck/>&mpro=http://www.stayfriends.de/sfvc/inboundlinks/ADB1Z?ABBZ=8730&AFBZ=f18c2fb07d33bd15bf3cc09f664272b0d6b22556_" id="button"><span>Schulfreunde wiederfinden!</span></a></td>
                        </tr>
                    </table>

                </td>
            </tr>
        </table>

    </a>

</div>


</body>
</html>

Thielo 17.04.2015 14:55
Dann muss die Zeile mindestens immer so hoch sein, wie die Schrift im fetten Zustand, vllt mit line-height, oder mit padding und dieses dann entfernen.

ea_sy 17.04.2015 15:05
jaaaaaa....
 
ja das mache ich gerade, lernen ...mich einarbeiten. im studium und in meinem werkstudentenjob ^^

Ganz schön viel auf einmal ... :roll:

ea_sy 17.04.2015 15:10
achso und ...
 
"line-height" kann es nicht sein

(line-height beschreibt den Abstand zwischen aufeinander folgenden Zeilen. Der Abstand hängt von der Schriftgröße ab)

d.h. es hat keinerlei Bezug zu meinen Problem: den sich vergrößernden Zeilen bei einem Hover.

Thielo 17.04.2015 15:17
Zitat:
Zitat von ea_sy (Beitrag 544182)
"line-height" kann es nicht sein

(line-height beschreibt den Abstand zwischen aufeinander folgenden Zeilen. Der Abstand hängt von der Schriftgröße ab)

d.h. es hat keinerlei Bezug zu meinen Problem: den sich vergrößernden Zeilen bei einem Hover.
Aha, und das hast du jetzt wie getestet?
Also in meinem Test A Pen by Captain Anonymous funktioniert das. Ich bin aber auch ein grausamer Magier.

ea_sy 17.04.2015 15:24
hmmm...
 
:D war ja wieder klar. alle können zaubern. nur ich nicht !!!! :D

etux 17.04.2015 22:13
Zitat:
Zitat von ea_sy (Beitrag 544175)
... bei einem mouse-hover die Zeile der veränderten Fontgröße anpassen ...
... ist so, da die Zellenhöhe die Höhe der Zeile bestimmt.
Daher würde es reichen, der Zeile eine etwas größere feste Höhe zu geben – beispielsweise 2em.
Das macht allerdings auch den Hintergrund höher.

Nur so am Rande: eine feste Höhe (height) wird bei Tabellen als min-height interpretiert.

P.S.:
Oh! Ich habe die weitere Beiträge gar nicht wahr genommen – Scrollen will auch gelernt sein. :lol:

.

MrMurphy 18.04.2015 09:54
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:07 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023