CSS + HTML Header with login form

Question

the header

I can't figure myself best way to do this header of site with login form on right Light grey pattern is only background for header (85px tall container), body background white

I did the dark line with

html {
border-top:7px solid #505559;
}

i centered the container like this

#header_container {
    margin:0 auto;
    width:970px;
}

Size of the logopic 197x45 and size of submit button 79x28

The form elements should be attached to right side of container

How would you align the submit button with bottom of white textfield

I would also want to see how you would place the html form element so i didn't add my own fail code

------- html code

<header>
<div id="header_holder">
<h1>logopic</h1>
<div id="login">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
 <div id="username">
  <label for="username">Username</label>
  <input type="text" name="username" maxlength="60">
 </div>

<div id="password">
 <label for="pass">Password</label>
 <input type="password" name="pass" maxlength="10">
 <input type="image" src="img/kirjaudu.png" alt="Submit button">
</div>

</form>
</div>
</div>
</header>

I'm confused... isn't the submit button already aligned at the bottom of the textfield? You need to provide a bit more information as to how you want it to look, because to my eye, it looks exactly how you describe wanting it. — Alastair Pitts
– Alastair Pitts, Commented May 24, 2011 at 6:10
I think you should give us your own "fail code" or at least the HTML structure - I know you might like to see variations of how other might approach it - but at the minute it's a bit like a "give me the code" question ;) — clairesuzy
– clairesuzy, Commented May 24, 2011 at 6:37
I suggest that you should add a css class name to each form item. That way you will be able to control them easier. — zekia
– zekia, Commented May 24, 2011 at 7:31

clairesuzy · Accepted Answer · 2011-05-24 08:17:02Z

to align this I would separate the form and the h1, floating the h1 left, and the form right.

then inside the form, wrap the user and password inputs inside their labels (instead of an extra div) then these labels can be made into inline-blocks so they sit side by side with the submit button. Also once they are inline-blocks the inputs themselves can be made into blocks which put them below the actual label text though being inside the label element they auto associate with the label.

Then give each input it's own class, or ID is better as form element names should have the same ID too the ID and the name attributes sort of serve the same purpose in functional forms.

The submit button should really come outside the password div too, anyway in my case shown the labels take the place of your divs for the purpose of grouping the fields it doesn't really matter if you want to use divs, but if you do it's those wrapper divs that would need to be inline blocks

the HTML for how I would approach this lands up looking something like this:

<div id="header">
  <h1>Logo</h1>
  <form id="search">
    <label>Email <input type="text" name="s-user" id="s-user"></label>
    <label>Password<input type="text" name="s-pass" id="s-pass"></label>
    <input type="submit" class="submit" value="Submit">
  </form>
</div>

and some CSS which hopefully reflects what I said above:

html, body {margin: 0; padding: 0;}

#header {
    border-top:7px solid #505559;
    margin:0 auto;
    width:970px;
    background: #eee;
    height: 45px;
    padding: 20px 0;
    font: 12px arial, sans-serif;
}

#header h1 {
    margin-left: 30px; 
    float: left;
    width: 197px;
    height: 45px;
    background: url(http://dummyimage.com/197x45/fe63a5/000&text=LOGOPIC) no-repeat 0 0;
    text-indent: -9999px;
}

#header form {
    float: right; 
    margin-right: 30px; 
    height: 40px; 
    padding-top: 8px;
}

#header form label {
    display: inline-block; 
    margin: 0 2px;
}

#header form input {}

#header form #s-user, 
#header form #s-pass {
    display: block;
    width: 250px;
    border: 1px solid #eee;
    padding: 3px 0 3px 0;
    margin-bottom: -1px;
}

#header form .submit {
    height: 23px;
    vertical-align: bottom;
    background: #d743ae; 
    color: #fff;
    border: 1px solid #ddd;
    -moz-border-radius: 5px;    
    border-radius: 5px;
}

Example : fiddle using above code

the submit button can use vertical-align:bottom becasue it's being aligned to the same line as the label inline-blocks, however the biggest problem is the "pixel perfect" alignment of the submit button as different browsers render input buttons differently so it's fairly difficult to get it to be the exact same size, however I'm one of those that don't mind a pixel difference here or there

briankulp · Accepted Answer · 2011-05-24 06:35:00Z

0

I would align your form items to the right, such as doing something like this:

input.yourinputclass { float: right; margin-right: 25px; }

and then just do the same with the submit button. That should do the trick. Remember that you can assign a class/id to pretty much anything! Let me know if you need further help!

answered May 24, 2011 at 6:35

briankulp

1862 silver badges11 bronze badges

1 Comment

joukoo Over a year ago

To clarify picture is from photoshop. I wanted to see how people would approach slicing this. I know i'm asking lot.

zekia · Accepted Answer · 2011-05-24 07:29:44Z

0

(I don't understand your question 100%)

I would align the form to the right side of the header:

form.formclass{
     float:right;
     margin:10px 0 0 0; 
}

And then use float and margin to align the form items:

form.formclass input.inputclass{
     width:100px; height:20px;     
     float:left;
     margin:0 10px 0 0;
}
form.formclass input.buttonclass{
     width:80px; height:20px;     
     float:left;
}

answered May 24, 2011 at 7:29

zekia

4,8876 gold badges40 silver badges47 bronze badges

Collectives™ on Stack Overflow

CSS + HTML Header with login form

3 Answers 3

Example : fiddle using above code

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example : fiddle using above code

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related