Shabihul Qadri Ответов: 1

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

вот ссылка на jsfiddle моего кода :https://jsfiddle.net/meemtech/4e5h3mvy/

<pre><pre><!Doctype html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Irish+Grover&display=swap" rel="stylesheet">

    <style>

    </style>
  </head>

  <body>
  <!--side nav starts here-->
    <div class="nav-main">
<div class="row">
Home 
</div>
<div class="row">
FAQ 
</div>
<div class="row">
Best Games 
</div>
<div class="row">
New Games 
</div>
<div class="row">
WebGL 
</div>
<div class="row">
MAtch 3 
</div>
<div class="row">
Racing 
</div>
<div class="row">
Summer Games 
</div>
<div class="row">
Soccer
</div>
<div class="row">
Girls 
</div>
<div class="row">
Sports 
</div>
<div class="row">
Multiplayer 
</div>
<div class="row">
Puzzle 
</div>
<div class="row">
Bubble Shooter 
</div>
<div class="row">
Cards 
</div>
<div class="row">
Bubble Shooter 
</div>
<div class="row">
Cards 
</div>
<div class="row">
Quiz 
</div>
<div class="row">
Skill 
</div>
<div class="row">
Action 
</div>
<div class="row">
Time & Srategy
</div>
<div class="row">
Arcade 
</div>
<div class="row">
Mahjong 
</div>
<div class="row">
Educational 
</div>
<div class="row">
Board Games 
</div>
<div class="row">
Platform 
</div>
<div class="row">
Casino 
</div>
</div>
    <!--side nav ends-->
    
    <!-- central section starts -->
    <div class="relative">
      <button class=pleft>
        Best
      </button>
      <button class=pright>
        More >>
      </button>
      <div class='main container cf-display-container'>

        <div class='s1 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%; position:absolute">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
          <p class="dhover cf-shadowr">Exclusive</p>
        </div>

        <div class='s2 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
          <p class="dhover cf-shadow" style="width: 30px;">New</p>
        </div>

        <div class='s3 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s4 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s5 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s6 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s7 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s8 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

      </div>
    </div>
    <!--central 1 section ends here-->
    
     <!-- central section starts -->
    <div class="relative">
      <button class=pleft>
        Best
      </button>
      <button class=pright>
        More >>
      </button>
      <div class='main cf-display-container'>

        <div class='s1 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%; position:absolute">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
          <p class="dhover cf-shadowr">Exclusive</p>
        </div>

        <div class='s2 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
          <p class="dhover cf-shadow" style="width: 30px;">New</p>
        </div>

        <div class='s3 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s4 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s5 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s6 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s7 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

        <div class='s8 c-shadow'>
          <img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
          <a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play </button></a>
        </div>

      </div>
    </div>
    <!--central 2 section ends here-->
    
  </body>

</html>

/подготовка и GT;

<pre>body {
  background-color: DarkOrchid;
}

* {
  font-family: Irish Grover, Balsamiq Sans, cursive;
}

.relative {
  position: relative;
  display: block;
  max-width: 400px;
  margin: auto;

}

.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}

.pleft {
  display: inline-block;
  margin-left: 10px;
  font-size: 30px;
  background-color: transparent;
  border: none;
  color: white;
}

.pright {
  position: absolute;
  display: inline-block;
  right: 10px;
  font-size: 30px;
  background-color: transparent;
  border: none;
  color: white;
}

.main {
  position: absolute;
  height: 400px;
  width: 98%;
  background-color: white;
  margin: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.cf-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.play {
  position: absolute;

  bottom: 40%;
  padding: 10px 10px;
  border-radius: 15px;
  color: red;
  background-color: white;

  font-size: 20px;
  text-align: center;
  display: none;

}

.play:hover {
  background-color: red;
  color: white;
}

.play:hover .cf-spin {
  animation: cf-spin 2s infinite linear;
}

@keyframes cf-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

.dhover {
  position: absolute;
  display: block;
  bottom: 0px;
  width: 65px;
  color: white;
  background-color: OrangeRed;
  padding: 4px;
  text-align: center;
  border-right: 3px solid white;
}


.s1 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 49%;
  width: 65%;
  margin: 2px;
  overflow: hidden;
}

.s1:hover {
  opacity: 0.6;
}

.s1:hover .play {
  display: block;

}

.s1:hover .dhover {
  display: none;
}


.s2 {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;
}

.s2:hover {
  opacity: 0.6;
}

.s2:hover .play {
  display: block;

}

.s2:hover .dhover {
  display: none;
}


.s3 {
  position: absolute;
  top: 25%;
  right: 0px;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;
}

.s3:hover {
  opacity: 0.6;
}

.s3:hover .play {
  display: block;

}

.s3:hover .dhover {
  display: none;
}


.s4 {
  position: absolute;
  top: 50%;
  right: 0px;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;
}

.s4:hover {
  opacity: 0.6;
}

.s4:hover .play {
  display: block;

}

.s4:hover .dhover {
  display: none;
}


.s5 {
  position: absolute;
  top: 50%;
  left: 33%;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;
}

.s5:hover {
  opacity: 0.6;
}

.s5:hover .play {
  display: block;

}

.s5:hover .dhover {
  display: none;
}


.s6 {
  position: absolute;
  top: 50%;
  left: 0px;
  height: 24%;
  width: 32.5%;
  margin: 2px;
  overflow: hidden;

}

.s6:hover .play {
  display: block;

}

.s6:hover .dhover {
  display: none;
}

.s6:hover {
  opacity: 0.6;
}


.s7 {
  position: absolute;
  bottom: 0px;
  height: 24.3%;
  width: 65%;
  margin: 2px;
  overflow: hidden;
}

.s7:hover {
  opacity: 0.6;
}

.s7:hover .play {
  display: block;

}

.s7:hover .dhover {
  display: none;
}


.s8 {
  position: absolute;
  bottom: 0;
  right: 0px;
  height: 24%;
  width: 32%;
  margin: 2px;
  overflow: hidden;

}

.s8:hover {
  opacity: 0.6;
}

.s8:hover .play {
  display: block;

}

.s8:hover .dhover {
  display: none;
}


img {
  display: block;
  position: absolute;
  margin: 2px;
  border: 2px solid Cyan;
}

/* Side nav style */

.nav-main {
  position: relative;
  display: block;
  max-width: 170px;
  height: 400px;
  background-color: black;
  float: left;
}

.row {
  display: block;
  background-color: DarkOrchid;
  height: 25px;
  width: 170px;
  border: 1px solid gold;
  margin-top: 1px;
  color: white;
  font-family: Irish Grover, Balsamiq Sans, Cursive;

}

.row:hover {
  background-color: gold;
  color: black;
}

i {
  float: right;
}

Что я уже пробовал:

<pre>.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}

В HTML5 CSS Источник

ZurdoDev

Я не понимаю, о чем вы говорите.

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

ZurdoDev

1 Ответов

W∴ Balboos, GHB

Категории

Недавние ответы

Изменение источника данных (базы данных) программно

Проблема при попытке вставить данные: ошибка при преобразовании типа данных nvarchar в числовой.

Может ли кто-нибудь, пожалуйста, сказать мне, как я практичен в жизненном цикле страницы .NET

C# get и set ? любая помощь ценится!

Как получить список ip-адресов пользователей, подключенных к моему Wi-Fi