0

Элементы залезают под картинку,помогите пожалуйста,я новичек и уже час ,если не больше пытаюсь найти ошибку ,но все четно. Мне нужно ,чтобы элементы отображались как на первом скриншоте,но как-только я пытаюсь добавить элементы ко-второй картинке происходит следующее(см.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>

1
  • А что сайт будет про дотку?
    – Randall
    11 сен 2019 в 8:28

1 ответ 1

0

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

<section class="news">
    <article>
        <h3>Рубрика</h3>
        <h2>Заголовок</h2>
    </article>
    <article>
        <h3>Рубрика</h3>
        <h2>Заголовок</h2>
    </article>
</section>
1
  • Абсолютное позиционирование - вообще бессмысленное зло в этом случае. Есть весьма полезная статья про позиционирование, думаю, поможет многое понять: dreamhelg.ru/2011/02/css-position-in-10-steps
    – red ale
    11 сен 2019 в 8:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.