Все элементы находятся под картинкой

121
14 июля 2021, 18:50

Элементы залезают под картинку,помогите пожалуйста,я новичек и уже час ,если не больше пытаюсь найти ошибку ,но все четно. Мне нужно ,чтобы элементы отображались как на первом скриншоте,но как-только я пытаюсь добавить элементы ко-второй картинке происходит следующее(см.2 скриншот) 

} 
.imgnews ul, 
.imgnews li{ 
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
} 
.imgnews li{ 
	display: inline-block; 
} 
.imgnews img{ 
	display: inline-block; 
} 
.IMG1-Aleksib{ 
	width: 770px; 
	height: 445px; 
	margin-top: 20px; 
	margin-left: 5px; 
} 
.IMG2-Dendi{ 
	margin-left: -4px; 
	position: absolute; 
	bottom: 633px; 
	width: 385px; 
	height: 222px; 
} 
.IMG3-Pasha{ 
	position: absolute; 
	width: 385px; 
	height: 223px; 
	bottom: 410px; 
	margin-left: -9px; 
} 
.IMG4-Timati{ 
	left: 5px; 
	position: absolute; 
	width: 577px; 
	height: 335px; 
} 
.IMG5-Astralis{ 
	position: absolute; 
	width: 578px; 
	height: 335px; 
	left: 582px; 
} 
.AleksibText{ 
	position: absolute; 
	width: 770px; 
	background-color: rgba(0, 0, 0, .4); 
	left: 5px; 
	bottom: 425px; 
	border-radius: 2px; 
	font-size: 20px; 
	color: white; 
	padding: 5px 5px 5px 10px; 
	-webkit-transition: all .5s; 
	-o-transition: all .5s; 
	transition: all .5s; 
	opacity: 1; 
} 
.imgnews li:hover .AleksibText 
{ 
	opacity: 0; 
	color: #FF6F22; 
} 
.descr { 
	position: absolute; 
	display: flex; 
	margin-top: 20px; 
	margin-left: 5px; 
	width: 770px; 
	height: 445px; 
	background-color: rgba(0, 0, 0, .5); 
	color: white; 
	align-items: center; 
	justify-content: center; 
	-webkit-transition: all .5s; 
	-o-transition: all .5s; 
	transition: all .5s; 
	font-size: 20px; 
    opacity: 0; 
} 
.imgnews li:hover .descr{ 
	color: #FF6F22; 
	opacity: 1; 
} 
.AleksibType{ 
	max-width: 100%; 
	overflow: hidden; 
	display: inline-block; 
	position: absolute; 
	bottom: 780px; 
	left: 5px; 
	background-color: rgba(241, 90, 8, 0.4); 
	padding: 5px 5px 5px 10px; 
	color: white; 
	opacity: 1; 
	font-size: 17px; 
	-webkit-transition: all .5s; 
	-o-transition: all .5s; 
	transition: all .5s; 
    border-radius: 2px; 
    max-height: 100%; 
} 
.descr2{ 
	position: absolute; 
	display: flex; 
	bottom: 705px; 
	margin-left: -4px; 
	width: 385px; 
	height: 222px; 
	background-color: rgba(0, 0, 0, .5); 
	color: white; 
	align-items: center; 
	justify-content: center; 
	-webkit-transition: all .5s; 
	-o-transition: all .5s; 
	transition: all .5s; 
	font-size: 20px; 
    opacity: 0; 
} 
.imgnews li:hover .descr2{ 
	opacity: 1; 
	color: #FF6F22; 
} 
.DendiText{ 
	position: absolute; 
	width: 335px; 
	background-color: rgba(0, 0, 0, .4); 
	left: 500px; 
	bottom: 705px; 
	border-radius: 2px; 
	font-size: 20px; 
	color: white; 
	padding: 5px 5px 5px 10px; 
	-webkit-transition: all .5s; 
	-o-transition: all .5s; 
	transition: all .5s; 
	opacity: 1; 
} 
.DendiType{ 
	max-width: 100%; 
	overflow: hidden; 
	position: absolute; 
	bottom: 780px; 
	left: 705px; 
	background-color: rgba(241, 90, 8, 0.4); 
	padding: 5px 5px 5px 10px; 
	color: white; 
	opacity: 1; 
	font-size: 17px; 
	-webkit-transition: all .5s; 
	-o-transition: all .5s; 
	transition: all .5s; 
    border-radius: 2px; 
    max-height: 100%; 
}
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <link rel="shortcut icon" href="assets/img/Icon.png" type="image/png"> 
  <link rel="stylesheet" href="assets/css/style.css"> 
  <title>EsportPortal</title> 
</head> 
 
<body bgcolor="#1C1C1C"> 
  <header> 
    <div class="buttonlogin"> 
      <b><a href="#" class="button" style="text-decoration: none;">Войти</a></b> 
    </div> 
    <div class="logo"> 
      <a href="index.html"><img src="assets/img/logo.png" class="graficlogo" width="60" alt="Ошибка отображения"></a> 
      <nav> 
        <div class="Search"> 
          <img src="assets/img/Search1.png" alt="#" class="Poisk"> 
        </div> 
        <div class="line"> 
          <img src="assets/img/line.png" alt="#" class="Slash"> 
        </div> 
        <div class="Social"> 
          <a href="https://vk.com/flainof" class="vkLogoLink" target="_blank"><img src="assets/img/vkLogo.png" alt="Вконтакте" class="vkLogo"></a> 
          <a href="https://vk.com/flainof" class="twitterLogoLink" target="_blank"><img src="assets/img/twitterLogo.png" alt="Твиттер" class="twitterLogo"></a> 
        </div> 
        <div class="Menu"> 
          <b> 
                        <a href="news.html">Новости</a> 
                        <a href="games.html">Игры</a> 
                        <a href="video.html">Видео</a> 
                        <a href="stream.html">Стримы</a> 
                        <a href="majors.html" class="Majors"><img src="assets/img/BerlinMajor.png" alt="#" class="MajorLogo">Berlin Major</a> 
                      </b> 
        </div> 
      </nav> 
    </div> 
  </header> 
  <main> 
    <div class="MainNews"> 
      <div class="textnews"> 
        <h3 class="AleksibText">Грустный и одинокий Aleksib после вылета из мейджора</h3> 
        <h3 class="DendiText">Dendi заявил о готовности сменить позицию</h3> 
      </div> 
      <div class="typetext"> 
          <h2 class="AleksibType">CS:GO</h2> 
          <h2 class="DendiType">Мнение</h2> 
      </div> 
      <div class="imgnews"> 
        <ul> 
          <b><li><a href="news.html"><span class="descr">Подробнее</span><img src="assets/img/1.jpg" alt="" class="IMG1-Aleksib"></a></li></b> 
          <b><li><a href="news.html"><span class="descr2">Подробнее</span><img src="assets/img/2.jpg" alt="" class="IMG2-Dendi"></a></li></b> 
          <b><li><a href="news.html"><span class="descr3"></span><img src="assets/img/3.jpg" alt="" class="IMG3-Pasha"></a></li></b> 
          <b><li><a href="news.html"><span class="descr4"></span><img src="assets/img/4.jpg" alt="" class="IMG4-Timati"></a></li></b> 
          <b><li><a href="news.html"><span class="descr5"></span><img src="assets/img/5.jpg" alt="" class="IMG5-Astralis"></a></li></b> 
        </ul> 
      </div> 
    </div> 
  </main> 
  <!-- <script src="assets/js/script.js"></script> --> 
</body> 
 
</html>

Answer 1

Зачем намешивать все в кучу? Выделите каждой новости отдельный блок. Картинку можно вставить как background-image. Ну и структура примерно такая:

<section class="news">
    <article>
        <h3>Рубрика</h3>
        <h2>Заголовок</h2>
    </article>
    <article>
        <h3>Рубрика</h3>
        <h2>Заголовок</h2>
    </article>
</section>
READ ALSO
Проблема с colspan и rowspan
HTML

Проблема с colspan и rowspan

Не могу понять каким образом можно сдвинуть 6,8,11 ячейки, чтобы получилось как на картинке?

 97
ToObject динамический класс?
c#

ToObject динамический класс?

Сейчас я конвертирую JSON данные (с АПИ) через ToObject<>()Но сперва я создаю класс-тип и потом уже конвертирую(ToObject<List<MyClass>>())

 128
C# производительность приложения
c#

C# производительность приложения

Есть консольное приложение, которое подключается к веб сервису, и запрашивает данныеЕсть вопросы по производительности этого приложения

 162
Перебор XmlNodeList и xpath в C#
c#

Перебор XmlNodeList и xpath в C#

При выполнении кода:

 107