Geek asks and answers

CSS + HTML header with login form

the header

I can’t imagine the best way to make this website header with the login form on the right. A light gray template is just a background for the header (a container with a height of 85 pixels), a white background of the body.

I made a dark line with

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

I centered the container like this

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

Logo size 197x45 and send button size 79x28

Form elements must be attached to the right side of the container.

How would you align the submit button from the bottom of the white text box

I would also like to see how you place the HTML form element so that I don't add my own error code

------- HTML

<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>
+4
source share
3 answers

to align this, I would separate the tags formand h1, leaving h1 to the left and the form to the right.

form, user password ( div), inline-blocks, , , , , , label, .

, names , ID name .

div, , , divs , , divs, div, inline blocks

HTML , , :

<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>

CSS, , , :

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;
}

:

submit vertical-align:bottom, , label inline-blocks, " " , - , , .

+3

, , - :

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

. . , /id ! , !

0

( 100%)

:

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

float margin, :

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;
}
0

More articles:


All Articles