Хочу как на фото. Но у меня Почему-то текст находится под фото и за пределы фотографии не может выйти?
<section class="elvo"> <div class="container"> <div class="elvo__section"> <img class="elvo__img" src="Images/elvo.jpg" alt="" /> <div class="elvo__window"> <p class="elvo__title">Компания elvo</p> <p class="elvo__input">Лучшая компания</p> <p class="elvo__text"> Строительная компания ELVO является проектной организацией, которая отвечает за подготовку всего проекта, в соответствии с договором или контрактом. </p> </div> </div> </div> </section> |
<section class="elvo"> <div class="container"> <div class="elvo__section"> <img class="elvo__img" src="Images/elvo.jpg" alt="" /> <div class="elvo__window"> <p class="elvo__title">Компания elvo</p> <p class="elvo__input">Лучшая компания</p> <p class="elvo__text"> Строительная компания ELVO является проектной организацией, которая отвечает за подготовку всего проекта, в соответствии с договором или контрактом. </p> </div> </div> </div> </section>
.elvo { display: flex; } .elvo__section { margin-top: 40px; height: 770px; } .elvo__img { float: right; width: 700px; height: 500px; /*position: absolute;*/ margin-right: 0; } .elvo__window { height: 510px; width: 460px; margin-left: 5px; } /*background-color: #f1f1f1; position: relative; }*/ |
.elvo { display: flex; } .elvo__section { margin-top: 40px; height: 770px; } .elvo__img { float: right; width: 700px; height: 500px; /*position: absolute;*/ margin-right: 0; } .elvo__window { height: 510px; width: 460px; margin-left: 5px; } /*background-color: #f1f1f1; position: relative; }*/
Дополнительно:
Научитесь выкладывать код на codepen.io
snippet
Я тебе сильно подредачил, остальное позишин абсолют сделай сам. Суть : надо научиться пользоваться flex чтобы понимать что куда идет. Flex это типо контейнер, в котором можно управлять расположением, вот почитай на хабре гайд и может поймешь
<div class="elvo"> <div class="elvo__section"> <div class="elvo__window"> <p class="elvo__title">Компания elvo</p> <p class="elvo__input">Лучшая компания</p> <hr /> <p class="elvo__text"> Строительная компания ELCO является проектной организацией, которая отвечает за подготовку всего проекта, в соответствии с договором или контрактом. </p> </div> <div class="sss"> <img class="elvo__img" src="https://avatars.mds.yandex.net/i?id=d3ff560daf1ac26b8e28a8637a7c1ad1dd762b6a-10384982-images-thumbs&n=13" alt="" /> </div> </div> </div> |
<div class="elvo"> <div class="elvo__section"> <div class="elvo__window"> <p class="elvo__title">Компания elvo</p> <p class="elvo__input">Лучшая компания</p> <hr /> <p class="elvo__text"> Строительная компания ELCO является проектной организацией, которая отвечает за подготовку всего проекта, в соответствии с договором или контрактом. </p> </div> <div class="sss"> <img class="elvo__img" src="https://avatars.mds.yandex.net/i?id=d3ff560daf1ac26b8e28a8637a7c1ad1dd762b6a-10384982-images-thumbs&n=13" alt="" /> </div> </div> </div>
.elvo{ width: 1100px; margin-top: 40px; height: 770px; } .elvo__section { display: flex; align-items: flex-end; } .elvo__img { width: 700px; height: 500px; } hr{ width: 100px; } .elvo__window { display: flex; flex-flow: column wrap; padding: 40px; height: 290px; width: 460px; background-color: grey; } /*background-color: #f1f1f1; position: relative; }*/ |
.elvo{ width: 1100px; margin-top: 40px; height: 770px; } .elvo__section { display: flex; align-items: flex-end; } .elvo__img { width: 700px; height: 500px; } hr{ width: 100px; } .elvo__window { display: flex; flex-flow: column wrap; padding: 40px; height: 290px; width: 460px; background-color: grey; } /*background-color: #f1f1f1; position: relative; }*/
- Можно вопрос?
А почему решил container убрать?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы текст располагался поверх фотографии, а не под ней, вам необходимо использовать CSS для установки изображения в качестве фона элемента и настройки его свойств. Вот пример кода на PHP, как можно это сделать:
.container { position: relative; width: 100%; height: 400px; /* Задайте высоту фотографии */ background-image: url('путь_к_вашей_фотографии.jpg'); background-size: cover; background-position: center; } .text { position: absolute; top: 50%; /* Расположение текста по вертикали */ left: 50%; /* Расположение текста по горизонтали */ transform: translate(-50%, -50%); color: white; /* Цвет текста */ font-size: 24px; /* Размер шрифта текста */ } <div class="container"> <div class="text"> Ваш текст здесь </div> </div>.container { position: relative; width: 100%; height: 400px; /* Задайте высоту фотографии */ background-image: url('путь_к_вашей_фотографии.jpg'); background-size: cover; background-position: center; } .text { position: absolute; top: 50%; /* Расположение текста по вертикали */ left: 50%; /* Расположение текста по горизонтали */ transform: translate(-50%, -50%); color: white; /* Цвет текста */ font-size: 24px; /* Размер шрифта текста */ } <div class="container"> <div class="text"> Ваш текст здесь </div> </div>
В данном примере создается контейнер с фоновым изображением, а текст размещается поверх него с помощью абсолютного позиционирования. Вы можете настроить размеры, цвет и другие свойства текста и фотографии, чтобы достичь нужного вам эффекта. Не забудьте заменить 'путь_к_вашей_фотографии.jpg' на реальный путь к вашему изображению.