Un soucis de mise en page...
Résolu
Stefan0
Messages postés
59
Date d'inscription
Statut
Membre
Dernière intervention
-
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention -
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'essaye actuellement de créer des cartes de jeu à l'aide de css et html (idée tordue ? ... et alors ?). Dans ce contexte, la place des différents éléments est primordial, surtout que je suis perfectionniste. Dans l'ensemble, j'ai plutôt bien réussis, seul les trois caractéristiques (Points de Vie, force et défense) n'apparaissent pas comme je voudrais.
En effet, je voudrais que les PV soient tout à gauche, la force au milieu et la défense à droite. Pour arriver à ce résultat, j'ai mis ces caractéristiques dans divers balises différentes (span avec inline:block et widht en 33% puis 54px, div avec float:left et les mêmes widht, puis de désespoir tableaux, avec td de largeur bien définis de 54px puis 33%) mais sans jamais avoir le bon résultat.
Les caractéristiques apparaissaient collées les unes aux autres, centré ou à gauche selon ce que je demande.
Deux solutions me viennent à l'esprit :
- utiliser position:relative pour forcer les blocs à être où je voudrais.
- mettre plein d'espace à la barbare pour bien positionner les blocs.
Mais voilà, une fois que j'aurais bien réussis cette carte, je compte utiliser le modèle pour en faire d'autre rapidemment sans retoucher au css (et j'aime pas la technique des espaces)! Et là, il suffit qu'une caractéristique possède plus de chiffres que le modèle initiale et patatra tout est décalé.
C'est peut-être un peu abstrait sans code ni représentation graphique tout ça... Aller hop illustrations :
Pour l'image : http://www.imagerun.info/img101/b98bl8n70l8u9hot.jpg
Merci d'avance!
EDIT : Pour ce qui auront le courage de suivre le code jusqu'au bout, voici une image faite très rapidement pour mieux comprendre quels sont les différents blocs de la carte (avec zoom détaillé sur le <div class="caracteristique"> : http://www.imagerun.info/img101/6ynm517a3496u12m.jpg
J'essaye actuellement de créer des cartes de jeu à l'aide de css et html (idée tordue ? ... et alors ?). Dans ce contexte, la place des différents éléments est primordial, surtout que je suis perfectionniste. Dans l'ensemble, j'ai plutôt bien réussis, seul les trois caractéristiques (Points de Vie, force et défense) n'apparaissent pas comme je voudrais.
En effet, je voudrais que les PV soient tout à gauche, la force au milieu et la défense à droite. Pour arriver à ce résultat, j'ai mis ces caractéristiques dans divers balises différentes (span avec inline:block et widht en 33% puis 54px, div avec float:left et les mêmes widht, puis de désespoir tableaux, avec td de largeur bien définis de 54px puis 33%) mais sans jamais avoir le bon résultat.
Les caractéristiques apparaissaient collées les unes aux autres, centré ou à gauche selon ce que je demande.
Deux solutions me viennent à l'esprit :
- utiliser position:relative pour forcer les blocs à être où je voudrais.
- mettre plein d'espace à la barbare pour bien positionner les blocs.
Mais voilà, une fois que j'aurais bien réussis cette carte, je compte utiliser le modèle pour en faire d'autre rapidemment sans retoucher au css (et j'aime pas la technique des espaces)! Et là, il suffit qu'une caractéristique possède plus de chiffres que le modèle initiale et patatra tout est décalé.
C'est peut-être un peu abstrait sans code ni représentation graphique tout ça... Aller hop illustrations :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Carte JF</title>
<style type="text/css">
body
{
text-align:center;
font-family: tahoma;
}
section
{
width: 170px;
height: 255px;
border-width:2px;
border-style:solid;
border-color:black;
border-radius: 10px;
overflow: hidden;
}
.caracteristique
{
width: 166px;
height: 40px;
overflow: hidden;
font-size: 18px;
}
.nom
{
width:165px;
height:19px;
overflow:hidden;
margin-top: -2px;
margin-bottom: 2px;
font-weight: bold;
}
.PV
{
text-align: left;
font-weight: bold;
widht:50px;
float:left;
display:block;
}
.attaque
{
text-align: center;
font-weight: bold;
widht:50px;
float:left;
display:block;
}
.defense
{
text-align: right;
font-weight: bold;
widht:50px;
float:left;
display:block;
}
.image
{
width: 140px;
height: 140px;
overflow: hidden;
}
.description
{
margin-top: -13px;
margin-bottom: 0px;
font-size: 14px;
}
.boo
{
background-image:url("carte-jf-fond-boo.jpg");
color: white;
}
</style>
</head>
<body>
<section class="boo">
<div class="caracteristique">
<p class="nom">Boo</p>
<div class="PV">7<img src="carte-jf-pv.png"></div>
<div class="attaque">3<img src="carte-jf-force.png"></div>
<div class="defense">0<img src="carte-jf-defense.png"></div>
</div>
<center><div class="image">
<img src="carte-jf-boo.png">
</div></center>
<p class="description">
Les boos sont les plus
faibles unités du roi boo.
Ils sont farceurs et timides
et préfèrent attaquer et
tourmenter en groupe.</p>
</section>
</body>
</html>
Pour l'image : http://www.imagerun.info/img101/b98bl8n70l8u9hot.jpg
Merci d'avance!
EDIT : Pour ce qui auront le courage de suivre le code jusqu'au bout, voici une image faite très rapidement pour mieux comprendre quels sont les différents blocs de la carte (avec zoom détaillé sur le <div class="caracteristique"> : http://www.imagerun.info/img101/6ynm517a3496u12m.jpg
A voir également:
- Un soucis de mise en page...
- Mise en forme conditionnelle excel - Guide
- Impossible de supprimer une page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Comment imprimer un tableau excel sur une seule page - Guide
2 réponses
Peut-être pas la meilleure solution, mais la plus simple :
fait un tableau d'une ligne avec 3 colonnes et mets simplement chaque élément dans une colonne, centre le contenu des colonnes et le tour est joué :)
fait un tableau d'une ligne avec 3 colonnes et mets simplement chaque élément dans une colonne, centre le contenu des colonnes et le tour est joué :)
Une autre solution consiste a utiliser une simple liste pour créer des colonnes :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Carte JF</title>
<style type="text/css">
body
{
text-align:center;
font-family: tahoma;
}
section
{
width: 170px;
height: 255px;
border-width:2px;
border-style:solid;
border-color:black;
border-radius: 10px;
overflow: hidden;
}
.caracteristique
{
width: 166px;
height: 50px;
overflow: hidden;
font-size: 18px;
}
.nom
{
width:165px;
height:19px;
overflow:hidden;
margin-top: -2px;
margin-bottom: 2px;
font-weight: bold;
}
.PV
{
text-align: left;
font-weight: bold;
widht:50px;
}
.attaque
{
text-align: center;
font-weight: bold;
widht:50px;
margin-left:20px;
}
.defense
{
text-align: right;
font-weight: bold;
widht:50px;
margin-left:20px;
}
.image
{
width: 140px;
height: 140px;
overflow: hidden;
}
.description
{
margin-top: -13px;
margin-bottom: 0px;
font-size: 14px;
}
.boo
{
background-image:url("http://www.imagerun.info/img101/b98bl8n70l8u9hot.jpg");
color: white;
}
ul.simple{
width: 100% ;
margin:5px;
padding:5px;
}
ul.simple li {
display:block;
width : 23%;
float:left;
}
ul.simple li[float="left"] + li {
float:none;
}
</style>
</head>
<body>
<section class="boo">
<div class="caracteristique">
<p class="nom">Boo</p>
<ul class="simple">
<li class="PV">7<img src="carte-jf-pv.png"></li>
<li class="attaque">3<img src="carte-jf-force.png"></li>
<li class="defense">0<img src="carte-jf-defense.png"></li>
</ul>
</div>
<center><div class="image">
<img src="carte-jf-boo.png">
</div></center>
<p class="description">
Les boos sont les plus
faibles unités du roi boo.
Ils sont farceurs et timides
et préfèrent attaquer et
tourmenter en groupe.</p>
</section>
</body>
</html>