www.webdeveloper.com
Results 1 to 5 of 5

Thread: how to eliminate the space above the navigation bar?

Hybrid View

  1. #1
    Join Date
    Dec 2013
    Posts
    15

    how to eliminate the space above the navigation bar?

    a simple little css trick is needed.
    login.png
    as you can see in the image there is a space top of the black bar(containing the leave management system text).

    how do i remove it.

    this is my login page code below:

    login.html:

    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <title>Create a nice login form using CSS3 and HTML5</title>
    <style>
    
    html, body
    {
        height: 100%;
    }
    
    body
    {
        font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;    
        margin: 0;
        background-color: #e3e3e3;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));
        background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);
        background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);
        background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);
        background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);
        background-image: linear-gradient(top, #ebeef2, #d9dee2);    
    }
    
    /*--------------------*/
    
    #login
    {
        background-color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
        background-image: -webkit-linear-gradient(top, #fff, #eee);
        background-image: -moz-linear-gradient(top, #fff, #eee);
        background-image: -ms-linear-gradient(top, #fff, #eee);
        background-image: -o-linear-gradient(top, #fff, #eee);
        background-image: linear-gradient(top, #fff, #eee);  
        height: 240px;
        width: 300px;
        margin: -150px 0 0 -150px;
        padding: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 0;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;  
        -webkit-box-shadow:
              0 0 2px rgba(0, 0, 0, 0.2),
              0 1px 1px rgba(0, 0, 0, .2),
              0 3px 0 #fff,
              0 4px 0 rgba(0, 0, 0, .2),
              0 6px 0 #fff,  
              0 7px 0 rgba(0, 0, 0, .2);
        -moz-box-shadow:
              0 0 2px rgba(0, 0, 0, 0.2),  
              1px 1px   0 rgba(0,   0,   0,   .1),
              3px 3px   0 rgba(255, 255, 255, 1),
              4px 4px   0 rgba(0,   0,   0,   .1),
              6px 6px   0 rgba(255, 255, 255, 1),  
              7px 7px   0 rgba(0,   0,   0,   .1);
        box-shadow:
              0 0 2px rgba(0, 0, 0, 0.2),  
              0 1px 1px rgba(0, 0, 0, .2),
              0 3px 0 #fff,
              0 4px 0 rgba(0, 0, 0, .2),
              0 6px 0 #fff,  
              0 7px 0 rgba(0, 0, 0, .2);
    }
    
    #login:before
    {
        content: '';
        position: absolute;
        z-index: -1;
        border: 1px dashed #ccc;
        top: 5px;
        bottom: 5px;
        left: 5px;
        right: 5px;
        -moz-box-shadow: 0 0 0 1px #fff;
        -webkit-box-shadow: 0 0 0 1px #fff;
        box-shadow: 0 0 0 1px #fff;
    }
    
    /*--------------------*/
    
    h1
    {
        text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
        text-transform: uppercase;
        text-align: center;
        color: #666;
        margin: 0 0 30px 0;
        letter-spacing: 4px;
        font: normal 26px/1 Verdana, Helvetica;
        position: relative;
    }
    
    h1:after, h1:before
    {
        background-color: #777;
        content: "";
        height: 1px;
        position: absolute;
        top: 15px;
        width: 120px;   
    }
    
    h1:after
    { 
        background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
        background-image: -webkit-linear-gradient(left, #777, #fff);
        background-image: -moz-linear-gradient(left, #777, #fff);
        background-image: -ms-linear-gradient(left, #777, #fff);
        background-image: -o-linear-gradient(left, #777, #fff);
        background-image: linear-gradient(left, #777, #fff);      
        right: 0;
    }
    
    h1:before
    {
        background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
        background-image: -webkit-linear-gradient(right, #777, #fff);
        background-image: -moz-linear-gradient(right, #777, #fff);
        background-image: -ms-linear-gradient(right, #777, #fff);
        background-image: -o-linear-gradient(right, #777, #fff);
        background-image: linear-gradient(right, #777, #fff);
        left: 0;
    }
    
    /*--------------------*/
    
    fieldset
    {
        border: 0;
        padding: 0;
        margin: 0;
    }
    
    /*--------------------*/
    
    #inputs input
    {
        background: #f1f1f1 url(login-sprite.png) no-repeat;
        padding: 15px 15px 15px 30px;
        margin: 0 0 10px 0;
        width: 253px; /* 353 + 2 + 45 = 400 */
        border: 1px solid #ccc;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
        -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
        box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    }
    
    #username
    {
        background-position: 5px -2px !important;
    }
    
    #password
    {
        background-position: 5px -52px !important;
    }
    
    #inputs input:focus
    {
        background-color: #fff;
        border-color: #e8c291;
        outline: none;
        -moz-box-shadow: 0 0 0 1px #e8c291 inset;
        -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
        box-shadow: 0 0 0 1px #e8c291 inset;
    }
    
    /*--------------------*/
    #actions
    {
        margin: 25px 0 0 0;
    }
    
    #submit
    {		
        background-color: #ffb94b;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
        background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
        background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
        background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
        background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
        background-image: linear-gradient(top, #fddb6f, #ffb94b);
        
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        
         -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
        
        border-width: 1px;
        border-style: solid;
        border-color: #d69e31 #e3a037 #d5982d #e3a037;
    
        float: left;
        height: 35px;
        padding: 0;
        width: 120px;
        cursor: pointer;
        font: bold 15px Arial, Helvetica;
        color: #8f5a0a;
    }
    
    #submit:hover,#submit:focus
    {		
        background-color: #fddb6f;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
        background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
        background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
        background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
        background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
        background-image: linear-gradient(top, #ffb94b, #fddb6f);
    }	
    
    #submit:active
    {		
        outline: none;
       
         -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
    }
    
    #submit::-moz-focus-inner
    {
      border: none;
    }
    
    #actions a
    {
        color: #3151A2;    
        float: right;
        line-height: 35px;
        margin-left: 10px;
    }
    
    /*--------------------*/
    
    #back
    {
        display: block;
        text-align: center;
        position: relative;
        top: 60px;
        color: #999;
    }
    
    .header{
        /*text-decoration:none;
        border:0;
        width : 165px;
        height : 60px;
        margin : 0;
        padding : 0;
        background : url(../images/company_logo.png) no-repeat 0 0;*/
        font-family:'Arial Narrow', Arial, sans-serif;
        line-height: 75px;
        font-size: 30px;
        background: #000;
        opacity: 0.9;
        color: white;
        text-transform: uppercase;
        z-index: 9999;
        position: relative;
        text-align: center;
        padding-right: 120px;
        -moz-box-shadow: 1px 0px 2px #000;
        -webkit-box-shadow: 1px 0px 2px #000;
        box-shadow: 1px 0px 2px #000;
    }
    
    img.logo{
        text-decoration:none;
        border:0;
        width : 248px;
        height : 90px;
        margin-left: 20px;
        padding : 0;
        float: left;
        /*background : url(../images/company_logo.png) no-repeat 0 0;*/
    }
    </style>
    </head>
    
    <body>
    <div class="header">
                    <img class="logo" src="../images/company_logo1.png">
                    <p>Leave Management System</p>
                    <!-- <div class="clr"></div> --> 
                </div>
    <form id="login" method="Post" action="">
        <h1>Login</h1>
        <fieldset id="inputs">
            <input id="username" type="text" placeholder="Username" autofocus required>   
            <input id="password" type="password" placeholder="Password" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" id="submit" value="Login">
            <a href="forgot_password.html">Forgot your password?</a>
        </fieldset>
    </form>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2013
    Posts
    63
    Code:
    .header p {
        margin: 0;
    }
    It should help.

  3. #3
    Join Date
    Dec 2013
    Posts
    15
    Quote Originally Posted by blasphemy View Post
    Code:
    .header p {
        margin: 0;
    }
    It should help.

    works! Great job. thanks

  4. #4
    Join Date
    Dec 2013
    Posts
    63
    Try 'css reset' on google and read about reseting default css settings. These settings can be different for each browser, so sometimes you may be surprised to see such 'strange' margins, paddings etc. You should 'reset' them. There are some popular ready to copy and paste css snippets on the web.

  5. #5
    Join Date
    Dec 2013
    Posts
    15
    Quote Originally Posted by blasphemy View Post
    Try 'css reset' on google and read about reseting default css settings. These settings can be different for each browser, so sometimes you may be surprised to see such 'strange' margins, paddings etc. You should 'reset' them. There are some popular ready to copy and paste css snippets on the web.
    yes. you are right. will go through it. thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles