Форум сайта python.su
Что - то не пойму, почему стилизованные элементы выходят за пределы 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; }
Офлайн
Всё из-за
input.fill { width: 100%; }
Офлайн
Офлайн