Can somebody please help me how to make the image show up on the right side?
I’ve been at it for 2 days and can’t figure out why it’s not doing anything.
CSS:
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
margin: 0;
background-color: #000;
color: #eee;
font-family: Poppins;
font-size: 12px;
}
a {
text-decoration: none;
}
.carousel .list .item {
width: 100%;
height: 100%;
position: absolute;
inset: 0 0 0 0;
}
.carousel .list .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel .list .item .content {
position: absolute;
top: 20%;
width: 1140px;
max-width: 80%;
left: 50%;
transform: translateX(-50%);
padding-right: 30%;
box-sizing: border-box;
color: #fff;
text-shadow: 0 5px 10px #0004;
}
.carousel .list .item .title,
.carousel .list .item .topic {
font-size: 5em;
font-weight: bold;
line-height: 1.3em;
}
.carousel .list .item .topic {
color: #f1683a;
}
HTML:
<!-- carousel -->
<div class="carousel">
<!-- list item -->
<div class="list">
<div class="item">
<img src="" />
<div class="content">
<div class="img_right">
<img src="https://placehold.co/600x400" />
</div>
<div class="title">text-text</div>
<br class="des" />
<!-- lorem 50 -->
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
</div>
JSfiddle – https://jsfiddle.net/Neolix/72gjnduw/2/
2
Wrap the image and text content inside a container.
Use display: flex to align the image and text side by side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel Example</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap");
body {
margin: 0;
background-color: #000;
color: #eee;
font-family: Poppins, sans-serif;
font-size: 12px;
}
.carousel {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.item {
position: relative;
width: 100%;
height: 100%;
}
.content-container {
display: flex;
align-items: center;
}
.img_right img {
max-width: 100%;
height: auto;
}
.content {
max-width: 60%;
padding-left: 20px;
box-sizing: border-box;
color: #fff;
text-shadow: 0 5px 10px #0004;
}
.title {
font-size: 2em;
font-weight: bold;
line-height: 1.3em;
}
.topic {
font-size: 2em;
font-weight: bold;
line-height: 1.3em;
color: #f1683a;
}
</style>
</head>
<body>
<div class="carousel">
<div class="list">
<div class="item">
<div class="content-container">
<div class="content">
<div class="title">text-text</div>
<div class="des">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="img_right">
<img src="https://placehold.co/600x400" alt="Placeholder Image"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
New contributor
Damsarani jayalath is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
First of all you have applied position:absolute; to the main div .carousel .list .item .content which is not appropriate for the main div. instead,
body {
margin: 0;
background-color: #000;
color: #eee;
font-family: Poppins;
font-size: 12px;
}
header {
width: 100%;
max-width: 80%;
margin: auto;
height: 50px;
display: flex;
align-items: center;
position: relative;
z-index: 100;
}
header a {
color: #fff;
margin-right: 40px;
}
.carousel {
height: auto;
margin-top: -50px;
width: 100%;
/* overflow: hidden; */
position: relative;
}
.carousel .list .item {
width: 100%;
height: 100%;
position: relative;
inset: 0 0 0 0;
}
.carousel .list .item > img {
width: 100%;
height: auto;
}
.content {
display: inline-block;
width: 100%;
padding: 15px;
}
.img_right {
float: right;
width: 400px;
height: 300px;
margin-left: 15px;
margin-botton:15px;
}
.carousel .list .item img {
width: 100%;
height: auto;
}
.carousel .list .item .title, .carousel .list .item .topic {
font-size: 5em;
font-weight: bold;
line-height: 1.3em;
}<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Info</title>
<link rel="stylesheet" href="info.css" />
</head>
<body>
<header>
<nav>
<a href="gallery.html">Galéria</a>
<a href="#contact">Kontakt</a>
<a href="info.html">Info</a>
</nav>
</header>
<!-- carousel -->
<div class="carousel">
<!-- list item -->
<div class="list">
<div class="item">
<img src="https://i.postimg.cc/DZtk3F9g/609-1920x1080.jpg" />
<div class="content">
<div class="img_right">
<img src="https://i.postimg.cc/Vv1gCVnw/924-1920x1080.jpg" />
</div>
<div class="title">text-text</div>
<br class="des" />
text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text
text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text
text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text
text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text
text-texttext-texttext-texttext-texttext-texttext-texttext-texttext-text<br />
<br />text-texttext-texttext-text.<br />
</div>
</div>
</div>
</div>
</body>
</html>You are missing float:right; to the image div and little margin to the left and the bottom of it to retain some space between the text and image.