zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Hilfe!! HTML Tabelle. Anfängerin braucht Hilfe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.04.2015, 15:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.04.2015
Ort: Berlin
Beiträge: 4
ea_sy befindet sich auf einem aufstrebenden Ast
Standard 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


Kann mir evtl jemand schnell helfen
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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.04.2015, 15:55
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.04.2015, 16:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.04.2015
Ort: Berlin
Beiträge: 4
ea_sy befindet sich auf einem aufstrebenden Ast
Standard jaaaaaa....

ja das mache ich gerade, lernen ...mich einarbeiten. im studium und in meinem werkstudentenjob ^^

Ganz schön viel auf einmal ...
Mit Zitat antworten
  #4 (permalink)  
Alt 17.04.2015, 16:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.04.2015
Ort: Berlin
Beiträge: 4
ea_sy befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.04.2015, 16:17
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von ea_sy Beitrag anzeigen
"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.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #6 (permalink)  
Alt 17.04.2015, 16:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.04.2015
Ort: Berlin
Beiträge: 4
ea_sy befindet sich auf einem aufstrebenden Ast
Reden hmmm...

war ja wieder klar. alle können zaubern. nur ich nicht !!!!
Mit Zitat antworten
  #7 (permalink)  
Alt 17.04.2015, 23:13
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von ea_sy Beitrag anzeigen
... 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.

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (17.04.2015 um 23:17 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 18.04.2015, 10:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
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
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV immer ganze Breite - normal?!?!? csski CSS 3 02.07.2008 13:20
Tabelle mit Hilfe von CSS Sven4972 CSS 2 16.10.2005 11:08
html tabelle in div steht im firefox rechts neben div Holger (HMR) CSS 2 08.01.2005 19:45
html tabelle dan CSS 3 10.03.2004 19:05
Tabelle platzieren mit CSS / HTML ? Bastus (X)HTML 0 09.03.2004 14:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:27 Uhr.