Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
BF summer
Avatar
tbartolen
Člen
Avatar
tbartolen:31.7.2015 16:53

Tak jsem narazil hned na další problém....=) pořád jsem u stylování toho formuláře...Dal jsem pod sebe dvě tabulky, protože pokud bych to nechal v jedné, tak se mi v zavislosti na manualním zvětšování textarea bude rozjíždět celá tabulka. Problém ted je, že element <td> samozřejmě není stejný jako u tabulky nad tím...Dá se nějak nastavit závislost, aby ta druhá tabulka dědila velikosti té první? Inherit? jak s tím pracovat? Když napíšu pouze podruhé

td {width: inherit }

tak to nepujde, to je podle mě blbost. A další věc, pokud bych nastavil velikost napevno, jako to mám u input a textarea, tak by to mělo být v pořádku, ale co potom s media queries?

<form method="POST">
            <table>
                <tr>
                    <td>Vaše jméno</td>
                    <td><input name="jmeno" type="text" value="<?= htmlspecialchars($jmeno) ?>"/></td>
                </tr>
                <tr>
                    <td>Váš email</td>
                    <td><input name="email" type="email" value="<?= htmlspecialchars($email) ?>"/></td>
                </tr>
                <tr>
                    <td>Aktuální rok</td>
                    <td><input name="rok" type="number" /></td>
                </tr>
                <tr>
                    <td>Telefonní číslo</td>
                    <td><input name="cislo" type="number" /></td>
                </tr>

            </table>
            <!--<div class="zprava">-->
            <table>
                <tr>
                    <td>Vaše Zpráva</td>
                    <td><textarea name="zprava"><?= htmlspecialchars($zprava) ?></textarea></td>
                </tr>
            </table>

            <br />

            <input type="submit" value="Odeslat" />
             </div>
        </form>

CSS

/*stylování tabullky v emailu*/
form {
    width: 100%;
    }
    form p {
        text-align: center;
    }
table {
   /* float: left;´*/
    padding-left: 50px;
}
table, td  {
    border: 1px solid #000000;
    width: auto;
}
table td   {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    width: auto;

}
table input {
    width: 400px;
    height: 50px;
    border-radius: 2px;
    font-size: 25px;
}
Odpovědět
31.7.2015 16:53
Navštiv www.fb.com/skkelticz
Avatar
Aaron
Redaktor
Avatar
Odpovídá na tbartolen
Aaron:31.7.2015 19:44

Ahoj, vyzkoušej dát vše do jedné tabulky (ne do dvou) a textareře nastavit tuto vlastnost. Způsobí to, že bude roztažená naplno stejně jako ostatní inputy a budeš jí moct roztahovat jen vertikálně.

textarea {
    width: 100%;
    resize: vertical; /* Pouze vertikální změna rozměrů */
    /* Šířka elementu se bude brát podle celého elementu, ne podle obsahu. Jinak by to mírně vyčnívalo.  */
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    box-sizing: border-box;
}
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět
31.7.2015 19:44
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
tbartolen
Člen
Avatar
Odpovídá na Aaron
tbartolen:31.7.2015 22:36

Paráda, děkuji moc, responzivitu jsem vyřešil pomocí posuvníku

.posuvniktabulky {
    max-width: 100%;
    overflow: auto;
}
Nahoru Odpovědět
31.7.2015 22:36
Navštiv www.fb.com/skkelticz
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.