LeCube
hello tous le monde, j'ai un soucis apres avoir suivi le tuto sur card UI ce trouvant ici :
https://www.grafikart.fr/tutoriels/html-css/card-ui-629
j'ai bien ma card ui fonctionnelle pas de soucis a ce niveau la mais je voudrais l'integrer plusieur fois sur une meme page html.
pour le moment je n' y arrive pas car si j'integre un nouvelle element ils se superpose au lieu de ce placer l'un a coté de l'autre.
j'ai bien compris que mon pb venait de la declaration du positionnement du block et que par concequent les deux objets ayant les mm declaration dans le css, il ont la mm position ds le rendu web.
Ma question est la suivante comment declarer deux postions pour mon block ?
la seul solution que j'ai trouvé ce de dupliquer le code css, un pour chaque card mais c'est tres lourd et peu pratique
n'y a t'il pas un moyen de declarer une postion pour chaque block et d'avoir le reste du css commun plutot que d'avoir 2 css differents (un pour chaque block) ?
Ce que je fais
le code originel du tuto
c'est ici que la position du block est declaré
.book{
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
width: 370px;
transform: translateX(-50%) translateY(-50%);
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0,0,0, 0.1);
transition: box-shadow $duration;
}
Ce que je veux
.book{
position: absolute;
overflow: hidden;
width: 370px;
background-color: darkslategray;
box-shadow: 0px 0px 20px rgba(0,0,0, 0.1);
transition: box-shadow $duration;
&__1{
position: absolute;
overflow: hidden;
width: 370px;
top: 50%;
left: 75%;
transform: translateX(-75%) translateY(-50%);
}
&__2{
position: absolute;
overflow: hidden;
width: 370px;
top: 50%;
left: 25%;
transform: translateX(-25%) translateY(-50%);
}
a{
color: inherit;
text-decoration: none;
}
}dans page page html
je declare
<body>
<article class="book__1">
<header class="book__thumb">
<a href="#"><img src="http://lorempicsum.com/futurama/400/235/2" alt="couverture emmene moi au paradis"></a>
</header>
<div class="book__date">
<span class="book__date__month">mai</span>
<span class="book__date__year">2017</span>
</div>
<div class="book__body">
<div class="book__category"><a href="#">Couverture</a></div>
<h2 class="book__title"><a href="#">1</a></h2>
<h3 class="book__author">card 1</h3>
<p class="book__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia alias, assumenda eveniet dolores. Natus, dolorum labore recusandae quae maiores vero commodi quasi doloribus totam minima consectetur, ea laboriosam eligendi iusto! Natus, dolorum labore recusandae quae maiores vero commodi quasi doloribus totam minima consectetur, ea laboriosam eligendi iusto!</p>
</div>
<footer class="book__footer">
<span class="icon icon--editor"></span><a href="#"> édition</a>
<span class="icon icon--articles"></span><a href="#"> 15 articles de presse </a>
</footer>
</article>
<article class="book__2">
<header class="book__thumb">
<a href="#"><img src="http://lorempicsum.com/futurama/400/235/2" alt="couverture emmene moi au paradis"></a>
</header>
<div class="book__date">
<span class="book__date__month">mai</span>
<span class="book__date__year">2017</span>
</div>
<div class="book__body">
<div class="book__category"><a href="#">Couverture</a></div>
<h2 class="book__title"><a href="#">2</a></h2>
<h3 class="book__author">card 2</h3>
<p class="book__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia alias, assumenda eveniet dolores. Natus, dolorum labore recusandae quae maiores vero commodi quasi doloribus totam minima consectetur, ea laboriosam eligendi iusto! Natus, dolorum labore recusandae quae maiores vero commodi quasi doloribus totam minima consectetur, ea laboriosam eligendi iusto!</p>
</div>
<footer class="book__footer">
<span class="icon icon--editor"></span><a href="#"> édition</a>
<span class="icon icon--articles"></span><a href="#"> 15 articles de presse </a>
</footer>
</article>
Ce que j'obtiens
j'ai bien mes deux block en place mais le reste du css ne s'applique pas
soit j'ai mon css fonctionel mais mes deux block se superpose
soit j'ai bien mes deux block l'un a cote de l'autre mais mon css ne fonctionne plus.
Help !!
merci d'avance
2 réponses
Bonjour.
Il te suffit par exemple, dans .card de remplacer :
position: absolute;
top: 50%;
left: 50%;Par :
position: relative;
top: 14em;
left: 10%;Et d'ajouter :
display: inline-block;
margin-right: 0.2em;Le résultat ici.