Горизонтальная организация с использованием CSS / HTML5 - PullRequest
Новая
       2

Горизонтальная организация с использованием CSS / HTML5

0 голосов
/ 15 ноября 2011

the goal

Выше я пытаюсь создать форму для входа (хотя после правой фигурной скобки должно быть зеркало «логин»).У меня возникают проблемы с выравниванием объектов по горизонтали, как я хочу.Второе изображение (ниже) показывает, что у меня есть.Yikes.

hmmm, we've got work to do

Я, очевидно, не хочу, чтобы вокруг него был набор полей, но я стараюсь сгруппировать поля имени пользователя и пароля.Вот мой код до сих пор.HTML: 

<head>
  <meta content="en-us" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Login</title>
  <script type="text/javascript" src="{{ STATIC_URL }}jquery1-6.4.min.js"></script>
  <link rel="stylesheet" href="{{ STATIC_URL }}login.css" type="text/css"/>
</head>
<script>
  function login(){
      if($('username').text === '') alert('Please enter your username');
      else if($('password') === '') alert('Please enter your password');
      $('loginForm').submit();
  }
</script>

<body>
<img src="{{ STATIC_URL}}logo.png" class='center'>
<br/>
<span class='login_signup_button'>
    <a title='click to login' onClick='login()'>
    login
    </a>
</span>
<form method = 'POST' action='login' id='loginForm'>
    <fieldset>
    <label for="username">username</label>
    <input type="text" id="username" face="helvetica"/>
    </br>
    <label for="password">password</label>
    <input type="password" id="password" face="AmericanTypewriter"/>
    </fieldset>
</form>
<span class='login_signup_button' value='submit'>
    <a title='signup for omnicloud' href='signup' class='login_signup_button'>
    signup
    </a>
</span>
</body>

и CSS (который импортируется в HTML): 

@font-face{
  font-family:AmericanTypewriter;
  src:url('AmericanTypewriter.TTF');
}

body{
    background-color:rgb(48,94,255);
}

image.center{
    /*display: block; */
    margin-left: auto;
    margin-right: auto;
    width:500px;
}

/* Used for braces */
h1{ 
    font-family:AmericanTypewriter;
    font-size:234pt;    
    color:rgb(249,255,41);
}

/* Used for login, signup, username, password */
p{
    font-family:AmericanTypewriter;
    font-size:42pt
    color:rgb(255,255,255);
}

fieldset{
  border: 10px solid rgb(255,255,255);
  width: 500px;
  margin: auto;
}

a{
    background-color:rgb(48,94,255);
    font-family:AmericanTypewriter;
    font-size:42pt
    color:rgb(255,255,255);
}

.login_signup_button button{
    background-color:rgb(48,94,255);
    font-family:AmericanTypewriter;
    font-size:42pt
    color:rgb(255,255,255)
    border-bottom:0;
  border-right:0;
  border-top:0;
  border-left:0;
  display:block;
}
.login_signup_button a:hover{
    background-color:rgb(249,255,41);
    color:rgb(48,94,255);
}

EDIT : обновленный код для исправления действия входа в систему,добавлена ​​функция js, отформатированные метки для s

Ответы [ 3 ]

1 голос
/ 15 ноября 2011

Я считаю, что вы пытаетесь сделать так, чтобы поле ввода показывалось рядом с вашей текстовой меткой.

Вот как бы я написал HTML: 

<body>
<img src="logo.png" class="center"/>

<div id="signin">
    <form action="path-to-submit" method="post">
        <label for="username-field">Username</label>
        <input id="username-field" type="text" name="username"/><br/>

        <label for="password-field">Password</label>
        <input id="password-field" type="password" name="password"/><br/>

        <input type="submit" value="Login"/>

        <a href="path-to-signup.html">Signup for Omnicloud</a>
    </form>
</div>
</body>

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

1 голос
/ 15 ноября 2011

Что-то вроде этого .(Просто грубое начало).

Обратите внимание, что я использую изображение для скобок (здесь не видно).Я не знаю, какую версию American Typewriter вы используете, но сомневаюсь, что при таком размере она будет выглядеть слишком тонкой, и, вероятно, не стоит загружать весь вес шрифта только для этих двух символов.Иногда изображение просто лучше, хотя оно может показаться не таким элегантным.

Обратите внимание, что я являюсь обычной техникой замены изображения для логотипа.Это лучше для SEO, если просто использовать <img> с альтернативным текстом.(Который вы должны всегда включать, если вместо этого выбираете этот маршрут.)

Редактировать: И если вы действительно хотите использовать шрифт для скобок, вы можете попробовать использовать CSS: before и: after псевдо-классы для добавления содержимого вокруг набора полей или того, что вы используете в качестве контейнера для этих элементов формы.

1 голос
/ 15 ноября 2011

Похоже, вы хотите сохранить группировку полей, которые предоставляет fieldset, но недовольны линиями вокруг этих полей.Если это так, то вы можете пометить границу набора файлов как none. 

fieldset {
border: none;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...