Sujet Précédent Sujet Suivant

Un soucis de mise en page...

Résolu/Fermé
Stefan0 Messages postés 59 Date d'inscription dimanche 13 novembre 2011 Statut Membre Dernière intervention 1 février 2015 - Modifié par Stefan0 le 10/06/2012 à 15:07
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 - 11 juin 2012 à 09:54
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 : 
<!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:

2 réponses

Réponse 1 / 2
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 313
10 juin 2012 à 23:03
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é :)
0
Réponse 2 / 2
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
11 juin 2012 à 09:54
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>
0