0

I am trying to get three href links in the class nav-link-wrapper and class logo which is also a logo image over the class mainImage here is my CSS code , all the links and logo is below the image instead of on it at the top of the image , links on the to top left and logo on the top right

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 30px;
}

.left-side {
  display: flex;
}

.mainImage {
  position: relative;
  width: 100%;
  height: 60%;
}

.logo {
  position: absolute;
  top: 10px;
  right: 10px;
  position: relative;
}

.container>.nav-wrapper>.left-side>.nav-link-wrapper {
  margin-right: 20px;
  font-size: 0.9em;
  justify-content: space-around;
}
<div class="container">
  <img class="mainImage" src="https://via.placeholder.com/800" alt="Auckland, New Zealand" style="width:100%;height:60%;">

  <div class="nav-wrapper">
    <div class="left-side">
      <div class="nav-link-wrapper">
        <a href="index.html">Hlavní Stránka</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="projects.html">Naše Projekty</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="contact.html">Náš Kontakt</a>
      </div>
    </div>

    <div class="right-side">
      <div class="logo">
        <img src="https://via.placeholder.com/150" alt="investice do zahraničí" style="width: 150px;height: 150px;">
      </div>
    </div>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Jani
  • 21
  • 2
  • You're apparently trying to implement a background image, but you haven't employed any of the standard methods of doing so. Please research this and try one of the established techniques. – isherwood Sep 07 '21 at 14:31
  • Hey buddy well noted on my question, however I obviously tried to research this for last for days and this place was my only option , the background picture is loaded on the page nicely I just need to start placing elements on it , logo , href buttons etc. so to make it clear ,I dont have an issue implementing a background image , the issue is placing elements on the image all my elements are below the image – Jani Sep 08 '21 at 10:27
  • 1
    @Jani - I think you perhaps have misunderstood isherwood's point. While it is true that you _are_ loading an _image_ in an `` fine, you appear to be trying to use it as a background-- for this, there is an established and built-in [`background-image` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) that would be an easier, more idiomatic approach than what you are trying to do here. – Alexander Nied Sep 08 '21 at 13:17
  • Please take the [tour] to learn how to respond to answers. "Thanks" comments are discouraged. – isherwood Sep 08 '21 at 15:13
  • If you do need to use an image element as a background (not an ideal approach), see https://stackoverflow.com/questions/31267425/use-the-html-img-tag-as-a-background-image-instead-of-the-css-background-image. – isherwood Sep 08 '21 at 15:16
  • Otherwise, this topic is well covered, as I mentioned: [1](https://stackoverflow.com/questions/40508355/background-image-and-elements-on-it), [2](https://stackoverflow.com/questions/20064596/adding-background-image-to-div-using-css), [3](https://stackoverflow.com/questions/66554154/background-image-in-html-and-css).... – isherwood Sep 08 '21 at 15:17

1 Answers1

0

.container {
  position: relative;
}

.nav-wrapper {
 position: absolute;
 top: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%
}

.left-side {
  display: flex 
 }

 .nav-link-wrapper {
  padding: 10px
 }

 .right-side {
  border: 1px solid black
 }
<div class="container">
  <img class="mainImage" src="https://via.placeholder.com/800" alt="Auckland, New Zealand" style="width:100%;height:60%;">

  <div class="nav-wrapper">
    <div class="left-side">
      <div class="nav-link-wrapper">
        <a href="index.html">Hlavní Stránka</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="projects.html">Naše Projekty</a>
      </div>

      <div class="nav-link-wrapper">
        <a href="contact.html">Náš Kontakt</a>
      </div>
    </div>

    <div class="right-side">
      <div class="logo">
        <img src="https://via.placeholder.com/150" alt="investice do zahraničí" style="width: 150px;height: 150px;">
      </div>
    </div>
  </div>
</div>
skmak
  • 447
  • 4
  • 12