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

Тема в разделе "Верстка", создана пользователем illmano, 4 авг 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Приветствую всех.
    Моих познаний в верстке не хватает, решил просить помощи у знающих людей.
    Мне нужно выровнять элементы формы оплаты:
    (сейчас так)
    [​IMG]

    (надо так)
    [​IMG]

    Я меняю код так:
    HTML:
    <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>
    Дальше не знаю что делать. Кто может помочь? Если надо через инспектора пробовать, то вот адрес сайта. Нужно начать оформление заказа и дойти до пункта оплата.
     
  2. Горбушка

    Горбушка Ищу её...

    Регистр.:
    2 май 2008
    Сообщения:
    3.115
    Симпатии:
    2.130
    HTML:
    <span id="div_idto">
    Заменить на:
    HTML:
    <span id="div_idto" style="padding-left: 100px;">
    100 заменить на нужное значение (экспериментально)

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

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214


    HTML:
    
     <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>
     
     
     
     
    


    На коленке, как то так
     
    illmano и Горбушка нравится это.
  4. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214

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

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

    illmano

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

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    http://htmlbook.ru/samlayout/blochnaya-verstka - ну и на этом же сайте найдешь все что нужно
     
    Горбушка нравится это.