Помощь Резиновая форма входа

grebovich

Гуру форума
Регистрация
19 Мар 2012
Сообщения
367
Реакции
84
Всем привет!
Помогите установить резиновую форму входа,установил в шапку форму входа такого вида:

xorona_1378283760__111.png


Но при просмотре с розширением 1024х600 форма смещается и все плывет!

xorona_1378283960__222.png

Пробовал по всякому и где то туплю?!
Заранее спасибо за помощь.
Для просмотра ссылки Войди или Зарегистрируйся
Вот мой код CSS:

HTML:
/******************************
INPUTS
*******************************/

input[type='text'],
input[type='email'],
input[type='password'],
textarea {
    background: #fafafa;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #dbdbdb;
    padding: 6px 3px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    padding: 5px;
    margin: 5px 0 0;
    min-height: 28px;
    min-width: 155px;
    max-width: 155px;
    }

textarea {
    max-width: 100%;
    width: 100%;
    resize: none;
    height: 150px;
    }

input[type='text']:hover,
input[type='email'],
input[type='password']:hover,
textarea:hover {
    background-color: #f7f7f7;
    }

input[type='radio'],
input[type='checkbox'] {
    margin: 5px;
    }

select {
    background: #f4f4f4;
    border: 1px solid #dbdbdb;
    padding: 5px;
    margin: 5px;
    }

label {
    cursor: pointer;
    padding-right: 20px;
    font-weight: bold;
    }

span.error {
    display: inline-block;
    background-color: #ea2e49;
    color: white !important;
    padding: 3px 4px 2px 4px;
    font-size: 12px;
    margin-top: 5px;
    }
 
у тебя она кажется как то криво структурирован css, посмотри побольше про Для просмотра ссылки Войди или Зарегистрируйся, и выбери верный для твоей вёрстки способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
 
у тебя она кажется как то криво структурирован css, посмотри побольше про Для просмотра ссылки Войди или Зарегистрируйся, и выбери верный для твоей вёрстки способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
Смотрел вертел и ни как Может есть еще какие идеи???? Просто я в CSS Ни бум бум...
 
Можно для input задать ширину в процентном соотношении:
Код:
input[type='text'], input[type='email'], input[type='password'], textarea {
background: #fafafa;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #dbdbdb;
padding: 6px 3px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
padding: 5px;
margin: 5px 0 0;
min-height: 28px;
min-width: 155px;
max-width: 155px;
2 последние строки удали и добавь:
Код:
width: 28%;
На хроме с такой шириной смотрится отлично, на других браузерах не смотрел, возможно нужно будет поиграться с шириной (можно не только целые числа использовать, к примеру "28.33%").
 
Можно для input задать ширину в процентном соотношении:
Код:
input[type='text'], input[type='email'], input[type='password'], textarea {
background: #fafafa;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #dbdbdb;
padding: 6px 3px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
padding: 5px;
margin: 5px 0 0;
min-height: 28px;
min-width: 155px;
max-width: 155px;
2 последние строки удали и добавь:
Код:
width: 28%;
На хроме с такой шириной смотрится отлично, на других браузерах не смотрел, возможно нужно будет поиграться с шириной (можно не только целые числа использовать, к примеру "28.33%").
Не хочет все равно слазит, Проверяю Для просмотра ссылки Войди или ЗарегистрируйсяЯ думаю А может тут дело не в CSS а как то крыво просто форму установил?
 
Не хочет все равно слазит, Проверяю Для просмотра ссылки Войди или ЗарегистрируйсяЯ думаю А может тут дело не в CSS а как то крыво просто форму установил?
обрати внимание у тебя правила css не только во внешнем файле лежат, а ещё и в самом коде прописаны, про них тоже не забывай

вот у меня в Яндекс браузере
674ccc9524fbe8f457c8337af290dca1.png
 
1024x600 и 1024x768 а про планшет и мобильный вообще молчу!
 
обрати внимание у тебя правила css не только во внешнем файле лежат, а ещё и в самом коде прописаны, про них тоже не забывай

Чуть подробней, вы имеете ввиду именно в форме?
Код:
<form action="index.php?route=account/login" method="post" enctype="multipart/form-data">
<div class="content">
<b>E-Mail: </b><input type="text" name="email">
<b>Пароль: </b><input type="password" name="password">
<b> </b><input type="submit" value="Войти" class="button1" />
<b> </b><a href="index.php?route=account/simpleregister" title="Регистрация">Регистрация</a></div>
</form>
 
Тебе не нравится, что "Регистрация" и кнопка "РУБ" слезает вниз?
snimok1.PNG
 
Назад
Сверху