-1

I want to basically create this kind of layout:

Login Panel

What would be the best way to achieve this?

helpermethod
  • 59,493
  • 71
  • 188
  • 276

6 Answers6

5

Your HTML:

<div id="login">
    <div class="float_left">
      Your input here <br/>
       Your remember me checkbox and text
    </div>
    <div class="float_left">
      Your second input here <br/>
      And then your forget password link
    </div>
    <div class="float_left">
      Login button here
    </div>
    <br style="clear:both;"/>
</div>

Your CSS:

#login {}
.float_left {float:left;}
thenengah
  • 42,557
  • 33
  • 113
  • 157
  • I wouldn't consider that the 'best' way. – daryl Mar 21 '11 at 22:51
  • f$#@ this stupid question. I'm never answering noob html/css question again. Everyone got down voted even mine, the checked answer. – thenengah Mar 21 '11 at 22:54
  • @rsplak | I'm guessing a snowball of downvotes after someone lost their temper on a silly q/a website that we all love. – thenengah Mar 21 '11 at 23:01
  • 3
    I don't understand the downvotes, but I do think enclosing the whole form in a div, using brs instead of proper styling and naming a class "float_left" are kind of suboptimal, from a code style standpoint. – Chuck Mar 22 '11 at 02:22
  • well the question is totally noob material but how would you do it? – thenengah Mar 22 '11 at 02:24
  • @Sam: I put an answer here: http://stackoverflow.com/questions/5383653/how-to-achieve-this-layout/5385910#5385910 — The CSS is a little bit longer, but the form itself is shorter and doesn't rely so much on the styling. I don't mean to knock you — I just figured the downvoter might be reacting a little harshly to those things, so it seemed worth explaining. – Chuck Mar 22 '11 at 02:39
3

Here's the semantically clean way to do it:

The HTML:

<form>
  <fieldset>
    <input id="username" placeholder="user name">
    <label><input id="rememberme" type="checkbox"> Remember me</label>
  </fieldset>
  <fieldset>
    <input id="password" type="password" placeholder="password">
    <a href="forgotpassword.html">Forgot your password?</a>
  </fieldset>
  <input type="submit" value="Login">
</form>

The CSS:

fieldset { 
  display: block;
  float: left;
  margin-right: 8px;
}

#username, #password {
  display: block;
  width: 100%;
}

Or something like that. I would use labels instead of placeholders, but there weren't any labels in your mockup, so I didn't want to add extra elements.

Community
  • 1
  • 1
Chuck
  • 234,037
  • 30
  • 302
  • 389
2

The "best way" would be to use either flexible box model (display: box, if you have some specific sizes to give to the blocks so they'll align) or table layout (display: table). Unfortunately, Internet Explorer 6 and 7 have absolutely no support for any of them. So I'd go with either (as this question is GWT-oriented):

  • a plain old <table> in an HTMLPanel (and use role=presentation for best accessibility)
  • FlexTable or Grid widget (which are backed by a table)
Thomas Broyer
  • 64,353
  • 7
  • 91
  • 164
1

Look, I've turned Sam's answer above into UI:Binder template. (Errors are possible, I'm writing XML here by hand.)

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style>
    .float_left {float:left;}
  </ui:style>

  <g:HTMLPanel>
    <g:HTMLPanel class='{style.float_left}'>
      <g:TextBox ui:field='loginTextBox'/>
      <br/>
      <g:CheckBox ui:field='rememberMeCheckBox'>Remember me</g:CheckBox>
    </g:HTMLPanel>
    <g:FlowPanel class='{style.float_left}'>
      <g:PasswordTextBox ui:field='passwordTextBox'/>
      <br/>
      <g:Hyperlink ui:field='passwordRestorationHyperlink'>Forgot your password?</g:Hyperlink>
    </g:FlowPanel>
    <g:FlowPanel class='{style.float_left}'>
      <g:Button ui:field='loginButton' text='Login'>Login</g:Button>
    </g:FlowPanel>
    <br style="clear:both;"/>
  </g:HTMLPanel>
</ui:UiBinder>

And the corresponding Java class. That should go with no surprise - @UiField and uiBinder.createAndBindUi(this) are your friends there.

kirushik
  • 1,296
  • 1
  • 10
  • 20
0

I know it may sound bad, but I think tables is the best way to go in this case:

<table style="border: none;" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <input name="login" />
    </td>
    <td>
      <input name="password" type="password" />
    </td>
    <td>
      <input name="login" type="submit" value="Login" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="keepMeLogged">
      <label for="keepMeLogged">Keep me logged in</label>
    </td>
    <td>
      <a href="forgot.php">Forgot your password?</a>
    </td>
    <td>
      &nbsp;
    </td>
  </tr>
</table>
Sergiy Belozorov
  • 5,856
  • 7
  • 40
  • 73
-1

CSS

input[type=text] { width: 200px; }
span.keep { display: inline-block; width: 200px; }

HTML

<input type="text" /> <input type="text" /> <button>Login</button> <br />
<span class="keep"><input type="checkbox" />Keep me logged in</span>
<a href="#">Forgot your password?</a>

See it live: http://jsfiddle.net/foghina/92E2a/

Felix
  • 88,392
  • 43
  • 149
  • 167