CSS pour recouvrement d'images et positionnement Fermé

Question

Bonjour, Je développe un petit jeu sur internet, qui va simuler des cartes. Je crée donc mes objets dynamiquement dans ma page. L'avantage est qu'ils ont tous la même taille, d'un point de vue physique. Par contre, j'ai beau fouiller et me remuer les méninges, le css reste abscons pour moi. Voici la structure de ma page :

...

En gros, j'ai 3 "catégories" de div (combattants, objectif et main), et je souhaiterai les positionner comme suit : Combattants : en ligne les uns à côté des autres en haut de la page (avec un "blanc" au début). Objectif : superposer toutes les cartes (div ?) à gauche, en dessous du blanc. Main : superposer toutes les cartes à gauche, en dessous des objectifs. Quelqu'un peut m'aider ? Je sèche. :)

Homawak · Answer

Salut,
beaucoup de réponses avec une recherche "positionnement CSS" pour que ça ne reste plus abscon:
https://www.qwant.com/?q=positionnement+CSS&webext=5.0.1
et
https://www.google.fr/search?q=positionnement+CSS&oq=positionnement+CSS

Je vous conseille d'aller voir du côté de float mais c'est assez vicieux quand on maîtrise pas et qu'il y en a plusieurs qui se suivent(en fait il faut utiliser clear:both quand on termine chaque série en positionnement flottant.

Une autre solution toute simple est de définir des tailles en % pour chaque élément de la rangée dans un container en display:inline; (en prenant en compte les marges internes et externes éventuelles + l'espacement)chacun se suivra naturellement jusqu'à remplir toute la ligne(le container doit faire 100% de la taille totale à utiliser). Pour le reste les décalages c'est simplement avec les propriétés margin et padding
ceci devrait fonctionner(à adapter à vos besoins):

<style type="text/css" rel="stylesheet">
.container.display{block;width:100%;text-align:center;}
.partie{
display:inline; width:25%;margin:2%; padding:0;
}
<style>
<div class="container">
<div class="partie">A<div>
<div class="partie">B<div>
<div class="partie">C<div><!-- 3 blocks horizontalement de 25%+4% de marges(2% à droite +2 à gauche) chacun-->
</div>

CSS pour recouvrement d'images et positionnement

1 réponse

Discussions similaires