Diskuze: Stylování tabulek v kontaktním formuláři vol.2

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

tbartolen

Člen

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel: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í
+2,50 Kč

Nahoru Odpovědět

31.7.2015 19:44

Neaktivní uživatelský účet

tbartolen

Člen

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.

Nejčastěji vyhledáváné

Diskuze: Stylování tabulek v kontaktním formuláři vol.2