HTML Course | Building Header of the Website

Course Navigation

So far, we have created the navigation bar for the header of our website. The next thing to complete the header is to include the image and text above the image as shown in below screenshot:

Let’s again look at the part of code for the header in our index.html file. The highlighted part of the code shows the image menu of the header:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Header Menu of the Page -->
<header>
           
    <!-- Top header menu containing
         logo and Navigation bar -->
    <div id="top-header">
               
        <!-- Logo -->
        <div id="logo">
            <img src="images/logo.png" />
        </div>    
                   
        <!-- Navigation Menu -->
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </div>    
   
    <!-- Image menu in Header to contain an Image and 
         a sample text over that image -->
    <div id="header-image-menu">
   
    </div>
</header>

chevron_right


To complete the image menu, we first need to add the image and text inside the div tag with id “header-image-menu” as shown in the above code.

Adding Image:



  • Click Here to download the given image.
  • Add it to the images folder of your project.
  • Include it inside the div with id = “header-image-menu”.

Adding Text:

  • Add the text inside an <h2> tag and give the tag an id = “image-text” which will be used for adding styles.

Below is the final HTML code for the header menu after adding the images and text:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Header Menu of the Page -->
<header>
           
    <!-- Top header menu containing
         logo and Navigation bar -->
    <div id="top-header">
               
        <!-- Logo -->
        <div id="logo">
            <img src="images/logo.png" />
        </div>    
                   
        <!-- Navigation Menu -->
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </div>    
   
    <!-- Image menu in Header to contain an Image and 
         a sample text over that image -->
    <div id="header-image-menu">
        <img src="images/slider.jpg">
        <h2 id = "image-text">
            A Basic Web Design course by GeeksforGeeks
        </h2>
    </div>
</header>

chevron_right


Our webpage will now look like as in the below screenshot:

Can you point out what is wrong with the above image? The answer is that the text is below the image and not at it’s correct position as shown in the template.

We will have to use CSS to add styles to the text and image inorder to place the text over the image. Let’s begin with adding CSS.

  • Styling the main image menu(#header-image-menu): Give the image menu parent a margin of top as 10px and set it position to relative.
    Add the below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #header-image-menu{
        top: 10px;
        position: relative;
    }

    chevron_right

    
    

  • Styling the image inside the image menu: Set the width of the image to 100% of the parent and remove the margins and padding.
    Add the below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #header-image-menu img{
        width: 100%;
        margin: none;
        padding: none;
    }

    chevron_right

    
    

  • Positioning the text(#image-text): Set the position of the text to absolute first and give appropriate margins from left and top. Set the color and translate the text by 30% using the translate() function.

    Add the below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #image-text{
        position: absolute;
        top: 60%;
        left: 60%;
        font-family: 'Roboto';
        color: #000;
        transform: translate(-30%, -30%);
        text-align: center;
    }

    chevron_right

    
    

The complete CSS code for the image menu will look something as below:

filter_none

edit
close

play_arrow

link
brightness_4
code

/*****************************/
/* Styling Header Image Menu */
/*****************************/
#header-image-menu{
    top: 10px;
    position: relative;
}
  
#header-image-menu img{
    width: 100%;
    margin: none;
    padding: none;
}
  
#image-text{
    position: absolute;
    top: 60%;
    left: 60%;
    font-family: 'Roboto';
    color: #000;
    transform: translate(-30%, -30%);
    text-align: center;
}

chevron_right


On opening the index.html in browser now, you will see the exact same header as shown in the sample video at the start of the course.

We have completed building the header of our website.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.