Soucis de mise en page

**Stefan0** · 10/06/2012, 16h47

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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 :

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">) :

Merci d'avance pour votre aide!

**Muchos** · 10/06/2012, 20h18

PS: Topic css !

Ça pourrait être quelque chose comme ça ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div class="caracteristique">
	<p class="nom">Boo</p>
	<div class="caracteristique-details">
		<div class="pv">7<img alt="PV" src="carte-jf-pv.png"></div>
		<div class="attaque">3<img alt="AT" src="carte-jf-force.png"></div>
		<div class="defense">0<img alt="DF" src="carte-jf-defense.png"></div>
	</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.caracteristique-details {display: table; width: 100%;}
 
.pv, .attaque, .defense {
display: table-cell;
text-align: center;
font-weight: bold;   
width: 33%; 
}

**Stefan0** · 12/06/2012, 20h45

Merci beaucoup, ça marche!

Soucis de mise en page [HTML 5]

HTML

Vue hybride

Discussions similaires

Partager

Partager