Уведомления

Группа в Telegram: @pythonsu
  • Начало
  • » Django
  • » [Вёрстка] элементы input выходят за пределы table [RSS Feed]

#1 Март 15, 2014 20:15:44

Viktor1703
Зарегистрирован: 2013-04-10
Сообщения: 48
Репутация: +  0  -
Профиль   Отправить e-mail  

[Вёрстка] элементы input выходят за пределы table

Что - то не пойму, почему стилизованные элементы выходят за пределы table

{% block content %}
    <div class="wrapper">
        <div class="content">
            <form action="." method="POST">
                <table align="center">
                    <tr>
                        <td colspan="3">
                            <input type="text" name="username" placeholder="Логин" class="fill" autocomplete="off" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="password" name="password" placeholder="Пароль" class="fill"  />
                        </td>
                        <td align="right">
                            <a href="#" class="fill">Забыли пароль?</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <input type="checkbox">Запомнить меня</input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="submit" value="Войти" class="fill">
                        </td>
                        <td align="center">
                            или
                        </td>
                        <td>
                            <a href="signup" class="fill-space">Зарегистрироваться</a>
                        </td>
                    </tr>
                    {% if error %}
                    <tr>
                        <td colspan="3" align="center">
                            <table cols="2">
                                <tr>
                                    <td align="center">
                                        {% load staticfiles %}
                                        <img src="{% static 'error.png' %}" />
                                    </td>
                                    <td>
                                        <a class="error">Неверный логин или пароль</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    {% endif %}
                </table>
            </form>
        </div>
    </div>
{% endblock %}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
body {
    margin:0;
    padding:0;
    background: #ECECEC;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
}
div.wrapper {
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display:table;
}
div.content {
    display:table-cell;
    vertical-align: middle;
}
input.fill {
    width: 100%;
}
input[name=username], input[name=password] {
    border: 1px solid #606060;
    border-radius: 24px;
    height: 24px;
    color: #353535;
    vertical-align: middle;
    padding-left: 28px;
    padding-right: 5px;
}
input[name=username] {
    background: url('user.png') 8px 5px no-repeat, #FFFFFF;
}
input[name=password] {
    background: url('lock.png') 8px 5px no-repeat, #FFFFFF;
}
input[name=username]:focus {
    outline: none;
    background: url('user.png') 8px 5px no-repeat, #FFFFFF;
}
input[name=password]:focus {
    outline: none;
    background: url('lock.png') 8px 5px no-repeat, #FFFFFF;
}
a.error {
    width: 100%;
    color: #505050;
}

и получается вот такая вот фигня

Офлайн

#2 Март 15, 2014 20:33:45

Viktor1703
Зарегистрирован: 2013-04-10
Сообщения: 48
Репутация: +  0  -
Профиль   Отправить e-mail  

[Вёрстка] элементы input выходят за пределы table

Всё из-за

input.fill {
    width: 100%;
}

Но как тогда сделать чтобы input растянулся на 3 колонки?

Офлайн

#3 Март 15, 2014 20:44:05

Singularity
Зарегистрирован: 2011-07-28
Сообщения: 1387
Репутация: +  75  -
Профиль   Отправить e-mail  

[Вёрстка] элементы input выходят за пределы table

Офлайн

  • Начало
  • » Django
  • » [Вёрстка] элементы input выходят за пределы table[RSS Feed]

Board footer

Модераторировать

Powered by DjangoBB

Lo-Fi Version