CODEWITHSUNDEEP
css
Sushant Baweja
Sushant Baweja

Reputation: 212

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

Upvotes: 0

Views: 52

Answers (2)

Sankar
Sankar

Reputation: 7107

How about this...

you can use display: flex property, which specifies the length of the item, relative to the rest of the flexible items inside the same container.

header {
            background-color:teal;
            color:white;                
            padding:5px;
            display: flex;
        }
      <header>     
        <img style="float: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>

Upvotes: 1

frnt
frnt

Reputation: 8795

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

Upvotes: 0

Related Questions