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

Тема в разделе "Opencart", создана пользователем grebovich, 4 сен 2013.

Информация :
Внимание форумчане! При создании тем, или выкладывании какой-либо информации проверьте в какой ветке форума вы находитесь! Не путайте Opencart и Opencart2. При несоблюдении данного условия выносится соответствующее наказание! И потом не говорите что вас НЕ ПРЕДУПРЕЖДАЛИ! По возможности используйте обменники mail, yandex, google, dropbox, rghost Дабы избежать просьб перезалить и проблем с рекламой!
Модераторы: ZiX
  1. grebovich

    grebovich

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

    [​IMG]

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

    [​IMG]
    Пробовал по всякому и где то туплю?!
    Заранее спасибо за помощь.
    Перейти по ссылке
    Вот мой код 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;
        }
     
  2. D'Jack

    D'Jack

    Регистр.:
    22 сен 2012
    Сообщения:
    347
    Симпатии:
    123
    у тебя она кажется как то криво структурирован css, посмотри побольше про Перейти по ссылке, и выбери верный для твоей вёрстки способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
     
  3. grebovich

    grebovich

    Регистр.:
    19 мар 2012
    Сообщения:
    318
    Симпатии:
    56
    Смотрел вертел и ни как Может есть еще какие идеи???? Просто я в CSS Ни бум бум...
     
  4. Constantine_K

    Constantine_K Создатель

    Регистр.:
    19 авг 2013
    Сообщения:
    34
    Симпатии:
    42
    Можно для 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%").
     
  5. grebovich

    grebovich

    Регистр.:
    19 мар 2012
    Сообщения:
    318
    Симпатии:
    56
    Не хочет все равно слазит, Проверяю Перейти по ссылкеЯ думаю А может тут дело не в CSS а как то крыво просто форму установил?
     
  6. D'Jack

    D'Jack

    Регистр.:
    22 сен 2012
    Сообщения:
    347
    Симпатии:
    123
    обрати внимание у тебя правила css не только во внешнем файле лежат, а ещё и в самом коде прописаны, про них тоже не забывай

    вот у меня в Яндекс браузере [​IMG]
     
  7. grebovich

    grebovich

    Регистр.:
    19 мар 2012
    Сообщения:
    318
    Симпатии:
    56
    1024x600 и 1024x768 а про планшет и мобильный вообще молчу!
     
  8. grebovich

    grebovich

    Регистр.:
    19 мар 2012
    Сообщения:
    318
    Симпатии:
    56
    Чуть подробней, вы имеете ввиду именно в форме?
    Код:
    <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>
     
  9. Constantine_K

    Constantine_K Создатель

    Регистр.:
    19 авг 2013
    Сообщения:
    34
    Симпатии:
    42
    Тебе не нравится, что "Регистрация" и кнопка "РУБ" слезает вниз?
    [​IMG]
     
  10. grebovich

    grebovich

    Регистр.:
    19 мар 2012
    Сообщения:
    318
    Симпатии:
    56
    да влюс меню тоже уползает вниз!