Правильный HTML и CSS для горизонтальной формы входа? - PullRequest
Новая
       2

Правильный HTML и CSS для горизонтальной формы входа?

0 голосов
/ 17 августа 2011

[Горизонтальная форма входа в систему] ... они не позволили бы мне опубликовать фотографию: (

<!--
{Header}  {Email Input field} {Password Input field}  {Login Button}
                              {Forgot Password?} (..link is below Password field)
-->

Кто-нибудь знает, как сделать эту форму, чтобы она выглядела прилично во всех браузерах, используя html, соответствующий стандартами css? Мне нужны элементы span с классом «Label» для наложения элементов ввода, и мне нужно, чтобы забытый пароль был расположен под полем ввода пароля и выровнен по его левому краю. У меня ощущение, что есть пуленепробиваемыйспособ написать разметку и CSS, но я просто не вижу этого. Вот что у меня есть:

[HTML] 

<div id="login" class="section">
    <div class="header">
        <h1 class="non-display">APPROVED MEMBERS</h1>
    </div>
    <form class = "Fields">
        <fieldset class = "UserName">
            <label>
                <span class = "Label"></span>
                <input class = "Value" type = "text" />
            </label>
        </fieldset>
        <fieldset class = "Password">
            <label>
                <span class = "Label"></span>
                <input class = "Value" type = "password" />
            </label>
        </fieldset>
        <input class="Login" type="button" value="LOG IN"/>
        <a class="ForgotPassword" href="#">Forgot Password?</a>
    </form>
</div>

[CSS] с использованием Less.js 

.header {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1; /* inline-block hack for IE7 */
    *display: inline; /* inline-block hack for IE7 */

    h1 {
        padding: 1em 0;
        width: 400px;
        text-align: center;
    }
}

.Fields {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;

    .Label {
        display: inline;
        margin-left: 5px;
        padding-left: 5px;
    }

    .Value {
        display: inline;
        margin-left: 5px;
        padding-left: 5px;
    }

    .Login {
        position: relative;
        padding: 2px 7px;
        .input-button(#fff);
    }

    .ForgotPassword {
        position: absolute;
        top: 35px;
        right: 150px;
        text-decoration: none;
    }
}

Близко, но «Забыл пароль?» оказалось крайне сложно выровнять по левому краю поля «Пароль». Я использую Less.js, чтобы написать более сжатый CSS и использоватьпеременных и mixins, но не стесняйтесь писать любое решение, которое у вас есть в прямой CSS.

Спасибо за помощь!

ОБНОВЛЕНИЕ:

Спасибо вам двум людям, которыепредставил решение. Но я решилУ меня есть разметка, и я использую новую технику, которая обещает много обещать: адаптивный веб-дизайн.Я думаю, что идея была впервые предложена Итаном Маркотом.Это позволяет для точных, пропорциональных макетов, используя проценты на основе фиксированных отношений ширины.Это имеет большой смысл с точки зрения дизайна.Вы в долгу перед вами и вашими клиентами, чтобы убедиться в этом, блестяще.

Ответы [ 2 ]

1 голос
/ 17 августа 2011

Я не уверен, насколько жестко вы должны придерживаться своей HTML-структуры, но главная проблема заключается в том, что «Забыли пароль?»ссылка не семантически связана с полем пароля в вашем HTML.Это сделает невероятно трудным позиционирование, а еще хуже - когда вы будете вносить изменения в форму.

Я внес несколько небольших (: P) изменений в ваш HTML и CSS;Вы можете посмотреть на мой jsfiddle здесь .

. Вы заметите, что я заменил все ваши теги fieldset на теги ul и li, и переместил вашссылка на тот же li, что и поле пароля.

РЕДАКТИРОВАТЬ: На самом деле это тот же макет, который вы описали в начале вашего вопроса: http://jsfiddle.net/Larry/5m5Sf/5/

1 голос
/ 17 августа 2011

Вот базовый пример, который будет работать кросс-браузерно. Вам нужно будет установить некоторые значения ширины и тому подобное, чтобы сделать так, как вы хотите, но общее выравнивание установлено.

ДЕМО: http://wecodesign.com/demos/stackoverflow-7088612.htm

<style type="text/css">
h1, div#loginForm * {
    margin: 0;
    padding: 0;
    list-style: none;
}
h1 {
    float: left;
}
div#loginForm {
    float: left;
}
div#loginForm ul li {
    display: inline;
}
</style>

<h1>Header</h1>
<div id="loginForm">
    <ul>
        <li><input type="text" /></li>
        <li><input type="password" /></li>
        <li><input type="submit" /></li>
    </ul>
    <p><a href="#">Forgot Password?</a></p>
</div>
...