Как можно избежать того, чтобы картинки отображались за боковой панелью навигации?

#html #css

#HTML #css

Вопрос:

я пытаюсь создать свой первый веб-сайт. Я создал боковую панель навигации, и когда я помещаю картинки в тело, они отображаются за панелью навигации. Как я могу предотвратить такое поведение и правильно распределить их, не перекрывая панель навигации?

 body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #555855;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {
    float: left;
  }
  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

 <!-- The sidebar -->
<div class="sidebar">
  <a href="#news">Mylogo</a>
  <a class="active" href="#home">Home</a>
  <a href="#Portfolio">Portfolio</a>
  <a href="#contact">Projects</a>
  <a href="#about">About</a>
</div>



<img src="https://picsum.photos/id/1011/367/267">

<img src="https://picsum.photos/id/1015/367/267">
<br>

<img src="https://picsum.photos/id/1032/367/267" alt=""> </div>

<img src="https://picsum.photos/id/1036/367/267" alt=""></div>
</div>
</div>

Ответ №1:

Вам нужно будет содержать изображения в div, а панель навигации — в другом div. Затем вам нужно будет изменить ширину каждого div в главном контейнере, чтобы они не могли перекрываться.

Например:

 #maincontainer{
width: 100%;
}

#sidenav{
width: 20%;
}

#images{
width: 80%;
}

Ответ №2:

Я немного отредактировал ваш код.

Завернул изображения в div и оформил его.

Надеюсь, это то, что вы ищете:

  body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
  display: inline-block;
  vertical-align: middle;
}
.rightbar {
  width: calc(100% - 200px);
  display: inline-block;
  vertical-align: middle;
  float: right;
}
.rightbar img {
    width: 48%;
    display: inline-block;
}
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #555855;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {
    float: left;
  }
  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/styles/styles.css" />
    
    <title> Portraits</title>
  </head>
  <body>

    <!-- The sidebar -->
<div class="sidebar">
  <a href="#news">Mylogo</a>
  <a class="active" href="#home">Home</a>
  <a href="#Portfolio">Portfolio</a>
  <a href="#contact">Projects</a>
  <a href="#about">About</a>
</div>

<!-- Page content -->
 

         <div class="rightbar">
            <img src="https://picsum.photos/id/1011/367/267" >

          <img src="https://picsum.photos/id/1015/367/267">
     <br>

        <img src="https://picsum.photos/id/1032/367/267" alt="">
        
      <img src="https://picsum.photos/id/1036/367/267" alt="">
         </div>