Html - CSS Responsive Page Place image on top of another image and include logo in header

Michael
July 10, 2023
115 views
1 vote
2 Answers

I am new to CSS and I am looking to build a responsive web page. I am having trouble with placing my logo on top of another and also in my header in the top left corner.

What is currently looks like:

What is should look like (my drawing is not very good but I hope you get the idea):

Links to my images:

https://drive.google.com/file/d/1odm-d7eGyuAwQ2z9bm3XLRQAcIzK8HHu/view
https://drive.google.com/file/d/1KA-JUuaQcRj0vEL0Ez72k89DXTgqit9u/view

My HTML code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/main.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <title>My Title</title>
    
   <!-- Header -->
   <header class = "single-navs">
    <div class = "single-navs">
        <div class="dropdown">
            <button class="dropbtn"><a href = "#Services">SERVICES</a></button>
                <div class="dropdown-content">
                    <a href="#">Service1</a>
                    <a href="#">Service2</a>
                    <a href="#">Service3</a>
                </div>
        </div>
    
        <img class="logo" src="images/logo.png">
        <a href = "#About Me">ABOUT ME</a>
        <a href = "#Portfolio">PORTFOLIO</a>
        <a href = "#Contact">CONTACT</a>        
    </div>    
    </header>

   <body>

    <div class = "parent">
        <img class="image1" src="images/header2b.jpg" />
        <img class="image2" src="images/logo.png"/>
        <p id="text">Name<br>Title</br></p>
    </div>


<div class = "section">
    <section>
        <h2 id = "Services">SERVICES</h2>
        <p>The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>

    <section>
        <h2 id = "About Me">ABOUT ME</h2>
        <p>The About Me section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>
    
    <section>
        <h2 id = "GetInTouch">WONDERING...</h2>
        <p>The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>
    
    <section>
        <h2 id = "Portfolio">PORTFOLIO</h2>
        <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>

    <section>
        <h2 id = "Contact">CONTACT</h2>
        <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>

    <section>
        <h2 id = "Social">SOCIAL</h2>
        <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>

    <section>
        <h2 id = "Footer">FOOTER</h2>
        <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>
        
</div>
    
        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.scrollex.min.js"></script>
            <script src="assets/js/jquery.scrolly.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

            <script>

                var A;
                var B = 0;
                var C = 5;
                var heightArea = $('header').outerHeight();
                
                $(window).scroll(function(event) {
                    A = true;
                });

                setInterval(function() {
                    if (A) {
                        hasScrolled();
                        A = false;
                    }
                }, 250);

                function hasScrolled() {
                    var D = $(this).scrollTop();
                    if(Math.abs(B - D) <= C)
                    return;

                    if (D > B && D > heightArea){
                        $('header').removeClass('upAni').addClass('cusNav');                        
                    
                    }else{
                        
                        if (D < B && D < heightArea){
                        $('header').removeClass('cusNav').addClass('upAni');                    
                        }
                    }

                    B = D;
                }

                </script>

    </body>
</html>

My CSS code:

@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900");

/* All desktop styles attached only after 1025px */

@media (min-width: 1024px) {

.parent {
    position: relative;
    top: 0;
    left: 0;
}

.image1 {   
    position: relative;
    max-width: 100%;
    height: auto;   
}

.image2 { 
    position: absolute;
    top: 10%;
    left: 2%;
}     

/* Centered text */
#text {
    z-index: 1;
    position: absolute;
    color: black;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px;
    font-weight:bold ;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 46%; /* Adjust this value to move the positioned div up and down */
    text-align: center;
    width: 80%; /* Set the width of the positioned div */
}

body {
    padding-top: 50px;
} 

header {
    background: rgb(205, 193, 193);
    height: 50px;
    position: fixed;
    top: 0;
    z-index: 104;
    transition: top 0.3s ease-in-out;
    width: 100%;
}

.logo {
    float: left;
    vertical-align: top;
    width: 200px;
    height: 200px;    
    margin-top: -75px;    /* if you want it vertically middle of the navbar. */
}

.single-navs {
    text-align: center; 
}

.single-navs a{
    color: #372f2f;
    text-decoration: none;
    text-align: center;
    font-family: montserrat;
    margin: 0px;    
    line-height: 3.5;
    font-weight: 700;
    font-size: 15px;
    margin-right: 150px;
    float: none;
}

.upAni {
    top: -50px;
}

main {
    height: 100vh;
    display: grid;
    place-items: center;
}

 /* Dropdown Button */
 .dropbtn {
    background: rgb(205, 193, 193); 
    border: none;   
    text-decoration: none;
    text-align: center;
    font-family: montserrat;
    line-height: 3.5;
    margin: 0px;        
    height: 10px;
    font-weight: 700;
    font-size: 15px;
    margin-right: 10px; /* Distance between other menu buttons */
  }
 
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;  
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 1;
    max-width: 205px;
    text-align: left;           
  }
  
/* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 1px 5px;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
    line-height: 2.5;
}

/* Change the color of the dropdown button when the dropdown content is shown */
.dropdown .dropbtn a:hover {
    color:rgb(24, 24, 139);
    font-weight: bolder;
} 

/* Change the color of the dropdown button when the dropdown content is shown */
.single-navs a:hover {
    color:rgb(24, 24, 139);
    font-weight: bolder;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {color: rgb(24, 24, 139)}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

section{
    display: block;
    margin: 50px 155px;
}

section h2 {
    font-family: sans-serif; 
    color: #555;
    text-decoration: underline;
    padding-top: 60px; /* to ensure when navigate to section that menu bar remains on top */
    font-size: 24px;
}

section p {
    font-family: sans-serif; 
    color: #555;
    margin-top: 10px;   
}
  
}

/* MOBILE VERSION */
@media only screen and (max-width: 480px){

    /* remove the navs bar */
.single-navs{display: none;}
}

Answers

i saw your html got so many wrong input and wrong tag example like the header you put on head make sure to put it to your body of html use semantic on your css i help you can use this

@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900");

/* All desktop styles attached only after 1025px */

@media (min-width: 1024px) {
  .single-navs {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    background-color: antiquewhite;
    align-items: center;
    padding: 0 1rem;
  }
  main {
    height: 100vh;
    width: 100%;
    background-color: gray;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
  <title>My Title</title>
</head>

<body>
  <!-- Header -->
  <header>
    <div class="single-navs">
      <label>LOGO</label>
      <div class="dropdown">
        <!-- <button class="dropbtn"><a href="#Services">SERVICES</a></button> -->
        <select name="service" id="service">
          <option value="Service1">Service1</option>
          <option value="Service2">Service2</option>
          <option value="Service3">Service3</option>
        </select>
      </div>
      <a href="#About Me">ABOUT ME</a>
      <a href="#Portfolio">PORTFOLIO</a>
      <a href="#Contact">CONTACT</a>
    </div>
  </header>

  <main></main>

  <footer></footer>
</body>

</html>

i hopee this can help you.

The issue with your code is its sequence of html elements! The logo should be in the navbar, and the other text should be alone in their own respective container.

The CSS is a little muddled, and you have styled the wrong elements with the wrong values.

Below is a fixed, semnatic html and css code for what you’re trying to achieve:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css%22%3E%22%3E">
  <title>My Title</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <div class='nav-logo'>
      <img src='Logo_3.png' id='nav-img'>
    </div>
    <ul class='nav-links'>
      <li class="dropdown">
        <button class="dropdown-button">SERVICES</button>    
        <div class="dropdown-content">
          <a href="#">DATA AND ANALYTICS</a>
          <a href="#">DASHBOARD REPORTING</a>
          <a href="#">EXCEL VBA AND AUTOMATION</a>
        </div>
      </li>
      <li><a href="/">ABOUT ME</a></li>
      <li><a href="/">PORTFOLIO</a></li>
      <li><a href="/">CONTACT</a></li>
    </ul>
  </nav>
  <div class='banner'>
    <div class='banner-text'>
      <h1>NAME</h1>
      <h2>TITLE</h2>
      <button class='about-me-button'>ABOUT ME</button>
    </div>
  </div>
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root {
    --main-bg-color: #f7f7f7;
    --banner-bg-color: #1a1b1e;

    --main-font: 'Poppins';
    --main-callback-font: sans-serif;
    --main-font-size: 16px;

    --banner-text-color: white;
    --banner-text-h1-font-size: 3rem;
    --banner-text-h2-font-size: 1.2rem;

    --navbar-text-color: white;
    --navbar-font: 'Poppins';
    --navbar-callback-font: sans-serif;

    --navbar-link-hover-color: gray;
    --navbar-link-active-color: gray;

    --navbar-logo-size: 16vw;

    --button-color: white;
    --button-font-size: 18px;
    --button-font: 'Poppins';
    --button-callback-font: sans-serif;
}

* {
    box-sizing: border-box;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
}

html {
    font-size: --main-font-size;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--main-bg-color);
}

.banner {
    user-select: none;
    display: flex;
    background-color: var(--banner-bg-color);
    height: 100vh;
    background-size: cover;
    align-self: center;
    align-items: center;
    position: relative;
    justify-content: center;
}

.banner-text {
    font-family: var(--main-font), var(--main-callback-font);
    color: var(--banner-text-color);
    text-align: center;
}

.banner-text h1 {
    font-size: var(--banner-text-h1-font-size);
}

.banner-text h2 {
    margin-top: -10px;
    font-weight: 300;
    font-size: var(--banner-text-h2-font-size);
}

a {
    position: relative;
    text-decoration: none;
    color: var(--navbar-text-color);
}

li {
    list-style: none;
}

nav {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    user-select: none;
    display: flex;
    position: fixed;
    background-color: #232428;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    padding-bottom: 5px;
    font-family: var(--navbar-font), var(--navbar-callback-font);
    z-index: 1000000000000000;
}

.nav-links {
    font-weight: 600;
    display: flex;
    gap: 1em;
}

.nav-links a {
    transition: color 0.25s;
}

.nav-links a:hover {
    color: var(--navbar-link-hover-color);
}

.nav-links a:active {
    color: var(--navbar-link-active-color);
}

.nav-logo img {
    width: var(--navbar-logo-size);
}

.about-me-button {
    background-color: var(--button-color);
    border-radius: 4px;
    border: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    color: #36395A;
    cursor: pointer;
    font-family: var(--button-font), var(--button-callback-font);
    font-weight: 300;
    height: 40px;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    transition: box-shadow .15s, transform .15s;
    font-size: var(--button-font-size);
    margin-top: 20px;
}

.about-me-button:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.about-me-button:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
}

.about-me-button:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}

.dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
}

.dropdown-button {
    font-size: var(--main-font-size);

    border: none;
    outline: none;

    color: white;

    background: none;
    font-family: 'Poppins';
    font-weight: 600;
    
    padding-left: 10px;
    padding-right: 10px;
    
    transition: color 0.5s;
    border-radius: 10px;
}

.dropdown-button:hover{
    color: gray;
    cursor: pointer
}

.dropdown:hover .dropdown-content {
    background-color: #232428;
    display: block;
}

.dropdown-content{
    padding-top: 15px;
    transition: opacity 0.5s;
    width: 280px;
    padding-bottom: 15px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    display: none;
}

.dropdown-content a {
    float: none;
    display: block;
    line-height: 2px;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: 300;
    text-align: left;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS Responsive Page Place image on top of another image and include logo in header

Answers