css form-input / textarea стилизация и позиционирование .. код и изображение включены - PullRequest
Новая
       17

css form-input / textarea стилизация и позиционирование .. код и изображение включены

0 голосов
/ 19 марта 2012

Я новичок в веб-дизайне, поэтому, пожалуйста, простите, если это очень просто - я перепробовал все, что знаю, и, похоже, не совсем понимаю, как это правильно.

Я собрал контактную форму, используя html & css. В идеале, я хотел бы иметь линию в 1 пиксель, идущую от каждой метки, чтобы использовать ее в качестве руководства для ввода. Эта линия должна быть на уровне нижней части этикетки. Мне также хотелось бы, чтобы ряд строк продолжался вертикально в текстовой области, чтобы обеспечить дополнительное пространство для письма.

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

Вот код, с которым я работаю: 

    <div id="contact-form">
        <div id="invite">
            <h1>Let's Talk.</h1>
            <div class="postinfo">
                <h2>Have you got a project needing an eye for detail and a creative touch? I'd love to hear from you.</h2>
            </div><!-- end postinfo -->
        </div><!-- end invite -->
        <form>

            <label for="user">Name:</label>
            <input type="text" name="user" value="" /><br />

            <label for="emailaddress">Email:</label>
            <input type="text" name="emailaddress" value="" /><br />

            <label for="comments">Message:</label>
            <textarea name="comments"></textarea><br />

            <input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
        </form>
    </div><!-- end contact -->

#contact-form {
    float: left;
    margin-left: 300px;
    margin-top: 310px;
}

#invite .postinfo {
    list-style-type: none;
    width: 150px;
}

label {
    float: left;
    font-family: dalle;
    font-size: 160%;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 200px;
    margin-top: -105px;
    width: 120px;
}

input, textarea {
    border-style: none;
    border-bottom: 1px solid #202020;
    margin-bottom: 5px;
    margin-left: 300px;
    margin-top: -105px;
    width: 245px;
}

textarea {
    width: 250px;
    height: 150px;
}

#submitbutton {
    background: none;
    border-style: none;
    font-family: Georgia, 
                 Constantia,
                 "Lucida Bright",
                 "Bitstream Vera Serif",
                 "Liberation Serif",
                 serif;
    margin-left: 173px;
    margin-top: 5px;
    width: 90px;
}

br {
    clear: left;
}

Идеальный результат:

ideal outcome

Ответы [ 2 ]

1 голос
/ 19 марта 2012

На основе вашего кода я создаю скрипку, см. Ниже.Если какие-либо изменения или другие требования, пожалуйста, уточните.

Fiddle: http://jsfiddle.net/EaKmZ/

Демо: http://jsfiddle.net/EaKmZ/embedded/result/

Примечание: я не слишком много редактировал ваш коднеобходимые css присутствуют и не требуются.

0 голосов
/ 19 марта 2012

В ваших кодах были некоторые ненужные правила CSS. Попробуйте это demo , чтобы увидеть, что оно до некоторой степени исправлено, но строки в текстовой области не могут быть достигнуты с помощью CSS.

Вам нужно использовать изображение для этого. Смотрите демо

...