After using only “pre make” compoments like Mui or TailWind I try to do a component using only CSS and maybe JavaScritp. But i get some problems when i use relative and absolute positions to make a div go inside an image. I know that absolute positions broke the natural flow… and i need a way to make this scroll-div work.
The problem: when the page width is less then sum of all images the imagens overflow the next div aside. They don’t respect the margins won by another div.
I think a solution as useRef to get the width from ‘a’ tag and calc the left position that go use to get a gap. Like left: 0, left: 580*funcGetWidthFromRef(), left:funcGetWidthFromRef().
Is there another solution?
My code:
import Image from "next/image";
import styles from "../../styles/Card.module.css";
export default function Card() {
const listArticles = [1, 2, 3, 4];
const textTitle = ["Vant", "Vam", "Puits", "JUmpP"];
return (
<>
{" "}
<section className={`${styles.scrollableCategoryContent}`}>
{listArticles.map((art, index) => {
return (
<article key={index} className={`styles.Game${art}`}>
<a
href=""
className={`${styles.cardAnchorConteirner}`}
style={{
left: `${170 * index}px`,
// width: `${580 * 4}px`,
// maxWidth: `${700}px`,
}}
>
<Image
// fill
className={`${styles.cardImage}`}
width={580}
height={480}
objectFit="cover"
objectPosition="top left"
src={
"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
}
alt="test"
></Image>
<div
className={`${styles.textCardBackGround}`}
// style={{
// backgroundColor: `rgb(${
// 0 + index * 10
// },${0 + index * 5 * 2},${
// 0 - (index * 10) / 2
// },30%)`,
// }}
>
<h2
className={`${styles.cardTitleText}`}
>{`${textTitle[index]}`}</h2>
</div>
{/* card.{index} */}
</a>
</article>
);
})}
</section>
</>
);
}
.scrollableCategoryContent{
display: grid;
grid-auto-flow: column;
background-color: black;
max-width: 700;
height: 480px;
overflow-x: scroll;
}
.Game1, .Game2, .Game3, .Game4 {
}
.cardAnchorConteirner{
width: 100%;
height: 100%;
/* left: 100px;
display: inline-block; */
position: relative;
}
.cardImage{
position: absolute;
/* position: relative; */
}
.textCardBackGround {
position: absolute;
background-color: aqua;
width: 100%;
height: 20%;
left: 0px;
right: 0px;
bottom: 20%;
}
.cardTitleText{
color: white;
}