Rahul Gupta Rahul Gupta - 5 months ago 11
CSS Question

Spacing in the header

my css code is-

<style>
header {
background-color:teal;
color:white;
padding:5px;
}
</style>


this is my header in body of jsp-

<header>
<h1 style="text-align:center">File Tracking System</h1>
<img style="text-align:left" src="images.png" width="200" height="100" alt="NSIC-logo1"/>
<a href="department.jsp">Create</a>
<form style="float:right;" action=" LogoutServlet" method="post">
<input type="submit" value="Logout" >
</form>
<br>
</header>


Can you see the space above the image and space below logout button. I don't want this space i want the image to fit at left-side and heading at the center but it is coming like this.If someone could correct it?

enter image description here

Answer

Try this, Edited html codes as they were not arranged properly.

<header>     
        <img style="text-align:left" src="images.png" width="200" height="100" alt="NSIC-logo1"/> 
               <a href="department.jsp">Create</a>
                       <h1 style="text-align:center">File Tracking System</h1>

        <form style="float:right;" action=" LogoutServlet" method="post">
            <input type="submit" value="Logout" >
        </form>
        <br>
      </header>  

CSS

  header {
    background-color:teal;
    color:white;                
    padding:5px;
    width:100%;
    height:200px;
    }
    img{float:left;}
    a{float:left;}
    h1{
    float:left;
    margin-left:50px;
}
Comments