Нужна помощь в верстке. Как выровнять элементы.

[illmano]

Приветствую всех.
Моих познаний в верстке не хватает, решил просить помощи у знающих людей.
Мне нужно выровнять элементы формы оплаты:
(сейчас так)

(надо так)

Я меняю код так:

<table style="border-collapse:collapse;">
    <tbody><tr><td width="60"><p style="text-align:center; color:#006699; padding:20px 0px; background:url(https://ishop.qiwi.ru/img/button/logo_31x50.jpg) no-repeat 10px 50%;">&nbsp;</p></td>
        <td style="padding:10px 0px;">Мобильный телефон (пример: 9057772233)</td>
</tr><tr>
        <td style="padding: 10px;" colspan="2">
            <div class="form-field">
            <input type="text" name="to" id="idto" style="width: 130px; border: 1px inset rgb(85, 85, 85); display: none;">
            <input type="hidden" name="payment_info[phone]" id="payment_phone" style="width:130px; border: 1px inset #555;">           
            </div>
            <span id="div_idto"><span class="Field">(<input type="text" size="3" maxlength="3" id="idto0" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">)<input type="text" size="3" maxlength="3" id="idto1" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">-<input type="text" size="2" maxlength="2" id="idto2" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">-<input type="text" size="2" maxlength="2" id="idto3" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value=""></span></span>
           
            <script type="text/javascript">
                inputMasks["idto"] = new Mask(document.getElementById("idto"));
                function checkSubmit() {
                    if (inputMasks["idto"].getValue().match(/^\d{10}$/)) {
                        document.getElementById("idto").setAttribute("disabled", "disabled");
                        inputMasks["idto"].makeHInput();
                        return true;
                    } else {
                        alert("Please enter the number without the country code, e.g. 555-123-45-67");
                        return false;
                    }
                }
            </script>
           
        </td>
    </tr>
</tbody></table>

Дальше не знаю что делать. Кто может помочь? Если надо через инспектора пробовать, то Для просмотра ссылки Войди или Зарегистрируйся адрес сайта. Нужно начать оформление заказа и дойти до пункта оплата.

 

[Горбушка]

<span id="div_idto">

Заменить на:

<span id="div_idto" style="padding-left: 100px;">

100 заменить на нужное значение (экспериментально)

Но по уму, это надо править CSS и добавлять в стиль div_idto, но для начинающего и так сойдёт.

 

[Denis_Pi]

Приветствую всех.
Моих познаний в верстке не хватает, решил просить помощи у знающих людей.
Мне нужно выровнять элементы формы оплаты:
(сейчас так)





Я меняю код так:

Спойлер

<table style="border-collapse:collapse;">
    <tbody><tr><td width="60"><p style="text-align:center; color:#006699; padding:20px 0px; background:url(https://ishop.qiwi.ru/img/button/logo_31x50.jpg) no-repeat 10px 50%;">&nbsp;</p></td>
        <td style="padding:10px 0px;">Мобильный телефон (пример: 9057772233)</td>
</tr><tr>
        <td style="padding: 10px;" colspan="2">
            <div class="form-field">
            <input type="text" name="to" id="idto" style="width: 130px; border: 1px inset rgb(85, 85, 85); display: none;">
            <input type="hidden" name="payment_info[phone]" id="payment_phone" style="width:130px; border: 1px inset #555;">         
            </div>
            <span id="div_idto"><span class="Field">(<input type="text" size="3" maxlength="3" id="idto0" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">)<input type="text" size="3" maxlength="3" id="idto1" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">-<input type="text" size="2" maxlength="2" id="idto2" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">-<input type="text" size="2" maxlength="2" id="idto3" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value=""></span></span>
         
            <script type="text/javascript">
                inputMasks["idto"] = new Mask(document.getElementById("idto"));
                function checkSubmit() {
                    if (inputMasks["idto"].getValue().match(/^\d{10}$/)) {
                        document.getElementById("idto").setAttribute("disabled", "disabled");
                        inputMasks["idto"].makeHInput();
                        return true;
                    } else {
                        alert("Please enter the number without the country code, e.g. 555-123-45-67");
                        return false;
                    }
                }
            </script>
         
        </td>
    </tr>
</tbody></table>

Дальше не знаю что делать. Кто может помочь? Если надо через инспектора пробовать, то Для просмотра ссылки Войди или Зарегистрируйся адрес сайта. Нужно начать оформление заказа и дойти до пункта оплата.

 <table style="border-collapse:collapse;">
    <tbody><tr><td width="60"><p style="text-align:center; color:#006699; padding:20px 0px; background:url(https://ishop.qiwi.ru/img/button/logo_31x50.jpg) no-repeat 10px 50%;">&nbsp;</p></td>
        <td style="vertical-align: top;">Мобильный телефон (пример: 9057772233)</td>
</tr><tr>
        <td style="height: 100px;" colspan="2">
            <div class="form-field">
            <input type="text" name="to" id="idto" style="width: 130px; border: 1px inset rgb(85, 85, 85); display: none;">
            <input type="hidden" name="payment_info[phone]" id="payment_phone" style="width:130px; border: 1px inset #555;">           
            </div>
            <span id="div_idto" style=" margin-left: 60px; "><span class="Field">(<input type="text" size="3" maxlength="3" id="idto0" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">)<input type="text" size="3" maxlength="3" id="idto1" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">-<input type="text" size="2" maxlength="2" id="idto2" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value="">-<input type="text" size="2" maxlength="2" id="idto3" onkeydown="kdown(this, event)" onkeyup="kup(this, event.keyCode)" class="cm-qiwi-phone" value=""></span></span>
           
            <script type="text/javascript">
                inputMasks["idto"] = new Mask(document.getElementById("idto"));
                function checkSubmit() {
                    if (inputMasks["idto"].getValue().match(/^\d{10}$/)) {
                        document.getElementById("idto").setAttribute("disabled", "disabled");
                        inputMasks["idto"].makeHInput();
                        return true;
                    } else {
                        alert("Please enter the number without the country code, e.g. 555-123-45-67");
                        return false;
                    }
                }
            </script>
           
        </td>
    </tr>
</tbody></table>

На коленке, как то так

 

[Denis_Pi]

<span id="div_idto">

Заменить на:

<span id="div_idto" style="padding-left: 100px;">

100 заменить на нужное значение (экспериментально)

Но по уму, это надо править CSS и добавлять в стиль div_idto, но для начинающего и так сойдёт.

Ты забыл надпись на верх поднять "Мобильный телефон (пример: 9057772233)"

Приветствую всех.
Моих познаний в верстке не хватает, решил просить помощи у знающих людей.

По уму здесь не только стили в css нужно вынести, а сам код переписать, т.к. ты используешь табличную верстку будто блочную, т.е. тебе или убрать таблицу нужно и переверстать div -ами, или поправить таблицу, так код поменьше станет и логичней, и красивей, и правильней + при правильном оформлении на все уйдет меньше стилей...
З.ы. для начинающего тем более, нужно этот момент сразу для себя прояснить, дальше легче будет!

 

[illmano]

Спасибо всем! Все получилось. Знаю, что верстка таблицами - это прошлый век, но с дивами я так и не радобрался. Если дадите ссылку на хороший мануал по дивам - буду благодарен. Код вижу что тупой, но это уже написанный шаблон модуля и я его просто подгоняю под себя.

 

[Denis_Pi]

Спасибо всем! Все получилось. Знаю, что верстка таблицами - это прошлый век, но с дивами я так и не радобрался. Если дадите ссылку на хороший мануал по дивам - буду благодарен. Код вижу что тупой, но это уже написанный шаблон модуля и я его просто подгоняю под себя.

Для просмотра ссылки Войди или Зарегистрируйся - ну и на этом же сайте найдешь все что нужно