Mise en Page CSS

[Shaof]

Bonjour, j'ai un soucis avec mes codes. Je n'y connais rien en HTML ou CSS et j'ai trouvé un code approximatif afin de faire une belle mise en page pour l'accueil. Cependant, j'arrive pas à arranger. J'aimerais que tout s'aligne comme il faut.

HTML

Code:

<center><div class="contenu"><div class="left">

  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Nouveautés <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>

    <center>- Mise en place du bloc d'accueil</center>

  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Liens Utiles <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>

    <center><a href="#">Règlement</a><br>
    <a href="#">Carte du Monde</a><br>
    <a href="#">LIEN 1</a><br>
    <a href="#">LIEN 1</a><br>
    <a href="#">LIEN 1</a></center>

  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Informations <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>

    <center><strong>Création du Forum</strong><br> 26/02/2013<br><br>
    <strong>Administrateur</strong><br> Maître du Jeu</center>

</div><div class="middle">

  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Contexte <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>

    <center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat. Duis at dui ut eros viverra mollis. Aliquam libero tortor, pulvinar eu semper et, molestie at magna. Ut vitae magna lectus. Nulla non leo neque, nec fermentum urna.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat.      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat. Duis at dui ut eros viverra mollis.</center>

  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Partenaires <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>

<center><a href="http://revolution-d.power-rpg.com" target="_blank" ><img src="http://i73.servimg.com/u/f73/18/14/39/50/parten11.png" border="0" alt="Revolution D" /></a>

</div><div class="right">

  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Devenir Partenaire <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>

    <center>Pour devenir notre partenaire, contactez-nous <a href="http://kodraf.pokemonrpg.org/privmsg?mode=post&u=1" class="postlink">ICI</a><br>
Vous trouverez ci-dessous notre logo de partenariat.<br><br>

<a href="http://kodraf.pokemonrpg.org" target="_blank" ><img src="http://i73.servimg.com/u/f73/18/14/39/50/parten10.png" border="0" alt="Monde de Kodraf" /></a></center>

<h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Promouvoir <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>

<center><strong>Votez toutes les 2 heures</strong>
<br><br>

<a href="http://www.root-top.com/topsite/korben/in.php?ID=12993">>> Top des Meilleurs RPG : Votez ici <<</a>
<br><br>

<strong><a href="https://www.facebook.com/pages/Le-Monde-de-Kodraf/146226612207020" class="postlink"><img src="http://i73.servimg.com/u/f73/18/14/39/50/logo_f11.png" /> Kodraf - Univers Pokémon / Forum RPG</a></strong></center>

</div></div></center>

CSS

Code:

.contenu{
  width: autopx;
  height: autopx;}
 
.left {
  width: 15%;
  float: left;}
 
.middle {
  width: 60%;}
 
.right {
  width: 15%;
  float: right;}

Pour un aperçu : http://kodraf.pokemonrpg.org/

PS : S'il y a des balises de center en trop ou autre, faites-le moi savoir s'il vous plaît.

[Lixyr]

J'aime bien la bannière tricolore *.*

Sinon, pour la PA, l'effet que vous désirez, c'est remonter le partenariat au même niveau que les autres c'est ça ?

[Shaof]

Merci ^^

Oui, remonter la partie droite et ré aligner un peu la partie du milieu (perfectionniste)

EDIT : J'ai trouvé comment faire pour la partie droite ! Fallait simplement changer l'ordre des codes. Par contre, je sais toujours pas pour équilibrer la ligne du titre "CONTEXTE" avec les parties de droite et gauche.

EDIT 2 : Toujours pas trouver comment aligner le milieu avec les côtés.

HTML :

Code:

<center><div class="contenu"><div class="left">
 
  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Nouveautés <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>
 
    <center>- Mise en place du bloc d'accueil</center>
 
  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Liens Utiles <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>
 
    <center><a href="http://kodraf.pokemonrpg.org/t1-regle-du-jeu">Règlement</a><br>
    <a href="http://kodraf.pokemonrpg.org/f1-evenements">Evènements</a><br>
    <a href="http://kodraf.pokemonrpg.org/f31-trucs-astuce">Trucs / Astuce</a><br>
    <a href="http://kodraf.pokemonrpg.org/t3-carte-de-la-region">Carte du Monde</a><br>
    <a href="http://kodraf.pokemonrpg.org/f39-region-de-vinis"><strong>Jouer Maintenant</strong></a></center>
 
  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Informations <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>
 
    <center><strong>Création du Forum</strong><br> 26/02/2013<br><br>
    <strong>Administrateur</strong><br> Maître du Jeu</center>
 
</div><div class="right">
 
  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Devenir Partenaire <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>
 
    <center><strong>Pour devenir notre partenaire, contactez-nous <a href="http://kodraf.pokemonrpg.org/privmsg?mode=post&u=1" class="postlink">ICI</a></strong><br><br>

Voici notre logo de partenariat<br><br>
 
<a href="http://kodraf.pokemonrpg.org" target="_blank" ><img src="http://i73.servimg.com/u/f73/18/14/39/50/parten10.png" border="0" alt="Monde de Kodraf" /></a></center>
 
<h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Promouvoir <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>
 
<center><strong>Vous pouvez voter toutes les 2 heures</strong>
<br><br>
 
<a href="http://www.root-top.com/topsite/korben/in.php?ID=12993">>> Top des Meilleurs RPG : Votez ici <<</a>
<br><br>

<strong>Merci !</strong>
<br><br>

<strong><a href="https://www.facebook.com/pages/Le-Monde-de-Kodraf/146226612207020" class="postlink"><img src="http://i73.servimg.com/u/f73/18/14/39/50/logo_f11.png" /> Page Facebook</a></strong></center>

</div><div class="middle">
 
  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Contexte <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>
 
    <div align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat. Duis at dui ut eros viverra mollis. Aliquam libero tortor, pulvinar eu semper et, molestie at magna. Ut vitae magna lectus. Nulla non leo neque, nec fermentum urna.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat. Duis at dui ut eros viverra mollis.</div>
 
  <h2><center><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Partenaires <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></center></h2>
 
<center><a href="http://revolution-d.power-rpg.com" target="_blank" ><img src="http://i73.servimg.com/u/f73/18/14/39/50/parten11.png" border="0" alt="Revolution D" /></a>
 
</div></div></center>

CSS :

Code:

.contenu{
  width: autopx;
  height: autopx;}
 
.left {
  width: 15%;
  float: left;}
 
.middle {
  width: 65%;}
 
.right {
  width: 15%;
  float: right;}

text-align: justify

[Lixyr]

En fait, quand tous les blocs se suivent, ça ne sert à rien de mettre trois bloc avec un float:left et un en float:right. Il faut prendre une seule classe pour indiquer le float:left, et puis pour chaque bloc (dans le html) on met la même classe qui donne le float:left. Et ça permet en même temps de centrer tout en même temps au lieu de mettre des balises center partout.

Ensuite, pour les largeurs, on met une id pour chaque bloc et on indique dans le css les valeurs de largeur pour les id.

Ce qui au final donne, pour la partie html :

Code:

<div class="contenu">
  <div class="float" id="left">
      <h2><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Nouveautés <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></h2>
            - Mise en place du bloc d'accueil
          <h2><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Liens Utiles <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></h2>
            <a href="http://kodraf.pokemonrpg.org/t1-regle-du-jeu">Règlement</a><br>
            <a href="http://kodraf.pokemonrpg.org/f1-evenements">Evènements</a><br>
            <a href="http://kodraf.pokemonrpg.org/f31-trucs-astuce">Trucs / Astuce</a><br>
            <a href="http://kodraf.pokemonrpg.org/t3-carte-de-la-region">Carte du Monde</a><br>
            <a href="http://kodraf.pokemonrpg.org/f39-region-de-vinis"><strong>Jouer Maintenant</strong></a>
    <h2><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Informations <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></h2>
  <strong>Création du Forum</strong><br> 26/02/2013<br><br>
            <strong>Administrateur</strong><br> Maître du Jeu
  </div>
  <div class="float" id="middle">
        <h2><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Contexte <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></h2>
       
            <div align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat. Duis at dui ut eros viverra mollis. Aliquam libero tortor, pulvinar eu semper et, molestie at magna. Ut vitae magna lectus. Nulla non leo neque, nec fermentum urna.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum sodales enim. Cras in tortor ut est pretium ultricies. Cras eget eros vel odio bibendum commodo eu ut lectus. Nunc quis mauris erat. Duis at dui ut eros viverra mollis.</div>
       
          <h2><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Partenaires <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></h2>
       
        <a href="http://revolution-d.power-rpg.com" target="_blank" ><img src="http://i73.servimg.com/u/f73/18/14/39/50/parten11.png" border="0" alt="Revolution D" /></a>
  </div>
  <div class="float" id="right">
      <h2><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Devenir Partenaire <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></h2>
       
            <strong>Pour devenir notre partenaire, contactez-nous <a href="http://kodraf.pokemonrpg.org/privmsg?mode=post&u=1" class="postlink">ICI</a></strong><br><br>
       
        Voici notre logo de partenariat<br><br>
       
        <a href="http://kodraf.pokemonrpg.org" target="_blank" ><img src="http://i73.servimg.com/u/f73/18/14/39/50/parten10.png" border="0" alt="Monde de Kodraf" /></a>
       
        <h2><img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba14.png" border="0" alt="Monde de Kodraf" /> Promouvoir <img src="http://i73.servimg.com/u/f73/18/14/39/50/pokeba15.png" border="0" alt="Monde de Kodraf" /></h2>
       
        <strong>Vous pouvez voter toutes les 2 heures</strong>
        <br><br>
       
        <a href="http://www.root-top.com/topsite/korben/in.php?ID=12993">>> Top des Meilleurs RPG : Votez ici <<</a>
        <br><br>
       
        <strong>Merci !</strong>
        <br><br>
       
        <strong><a href="https://www.facebook.com/pages/Le-Monde-de-Kodraf/146226612207020" class="postlink"><img src="http://i73.servimg.com/u/f73/18/14/39/50/logo_f11.png" /> Page Facebook</a></strong>
  </div>
</div>

et pour le CSS :

Code:



.contenu{width: autopx;height: autopx;}
.float {float:left;text-align:center;}
#left {width: 15%;}
#middle {width: 65%;}
#right {width: 15%;}
       


[Shaof]

Merci ! Mais là, tout les colonnes se colle et j'arrive pas à centrer...

[Lixyr]

Pour espacer, il suffit de rajouter des padding dans le css

Code:

padding: 0px 5px;

Vous les rajoutez pour chaque bloc, donc dans la classe float, ou alors en pour chacun des trois blocs, donc dans les trois id contenant les largeurs.

[Shaof]

Et centrer alors ? Je peux faire comment ?

[Lixyr]

centrer le texte ? C'est déjà centré via le css. J'ai fait comme vous aviez fait.

[Shaof]

Non, les colonnes ! ^^

[Lixyr]

Aaaah. ^^

Centrer du float n'est pas évident mais j'ai trouvé une tactique sur le net.

Code:


.contenu{width:100%;height: autopx; margin : 0 auto;}
.float {float:left;padding: 0px 5px;text-align:center;}
#left {width: 13%;}
#middle {width: 67%;}
#right {width: 16%;}

en fait, il faut donner une valeur précise au contenu. Là j'ai mis 100% à la largeur mais vous pourriez mettre moins pour voir le résultat. Normalement, ce résultat est égale à la somme des flottants. Vos floats à vous ne font pas 100% quand on les ajoute. Ce qui devrait être le cas, c'est pourquoi le contenu est décalé vers la gauche.
Pour palier au problème, on rajoute un margin : 0 auto, au contenu, pour que le bloc qui entoure les float soit centré, d'une part.
Ensuite, il faut jouer avec les valeurs des trois flottants pour qu'ils prennent toute la place dans le contenant, soit 100%.
Malheureusement, comme on a mis des padding (0px 5px), soit 5px à gauche et 5px à droite, on a une marge intérieure de 10px par bloc.
=> Ce qui signifie que si votre contenu, par exemple faisait 100px de largeur en totalité, et bien pour calculer la largeur que devraient prendre les trois blocs flottants ensemble, il faudrait retirer à ces 100px la totalité des padding qui forment une marge, soit 5 à gauche et 5 à droite = 10 px de padding par bloc, soit 30 px en tout. Donc en fait, les floats devraient prendre 70px de largeur pour prendre la totalité de la place, puisqu'il faut compter les marges intérieurs et extérieurs (padding est une marge intérieure).

Enfin bref, tout ça pour dire qu'il va falloir ensuite que vous jouiez avec les largeurs de chaque bloc. Normalement je les ai déjà définies, mais sait-on jamais, vous n'avez pas le même CSS que moi. Donc jouez avec les valeurs des trois blocs jusqu'à ce que tous les blocs s'affichent correctement les trois à côtés des autres, et correctement.

Et tout devrait être centré.

[Shaof]

J'ai un dernier petit soucis ^^'

En mettant les bonnes valeurs, si la résolution d'écran est plus petite que la mienne, ça décale la colonne de droite en dessous de celle du milieu...

EDIT : Pour pas qu'il y ait ce décalage, je mets comme ce ci mais ça ne se centre pas :

Code:

.contenu{width:100%;height: autopx; margin : 0 auto;}
.float {float:left;padding: 0px 5px;text-align:center;}
#left {width: 15%;}
#middle {width: 60%;}
#right {width: 15%;}

EDIT 2 : Le problème semble venir du float mais je n'en suis pas sur.

[Lixyr]

C'est bizarre, normalement le % évite justement d'avoir un résultat différent selon la résolution d'écran puisque ça calcule en fonction de la taille de l'écran. Enfin, si ça descend c'est que les valeurs sont trop grandes, et donc que le flottant droit n'a pas assez de place.

J'ai remis votre width:auto; dans le css. Si vous tenez vraiment à ce que les cellules de gauche et droite aient la même taille, essayez comme ça ?

Code:


        .contenu{width:auto;height: autopx; margin : 0 auto; }
        .float {float:left;padding: 0px 5px;text-align:center;}
        #left {width: 18%;}
        #middle {width: 60%;}
        #right {width: 18%;}

Mais vous devriez réduire la largeur de la cellule du milieu pour laisser de la place au reste, et ainsi pouvoir augmenter la largeur des flottants de gauche et droite, ça permettrait de voir le titre sur une seule ligne. Comme je l'ai dit, ça dépend de la taille des flottants. Et de la taille que vous donnez au contenant. Vous avez des gros titres aussi. Prenez-les en compte.

Chez moi ça donne ça :
http://dying-to-bleed.rpg-dynasty.com/

[Shaof]

Chez moi, j'ai toujours le problème de centrage :

http://kodraf.pokemonrpg.org/

J'aimerais que ça (égaux) soit comme ça sur les côtés :

http://revolution-d.power-rpg.com/

[Lixyr]

Quelle est la taille de vos titres, ainsi que la largeur de votre forum ?

[Shaof]

Le soucis vient du bloc "Bienvenue" je pense. Pour ce qui est de la taille de chaque colonne, j'ai modifié et je pense laisser comme ça maintenant. Mais là, c'est que ça ne centre pas dans mon bloc "Bienvenue".

Largeur Forum : 98%

Les titres, dans le code, sont de type H2

EDIT : Il me semble que c'est le margin qui permet de centrer automatiquement dans le bloc non ?

[Lixyr]

le margin: 0 auto permet de centrer le bloc de manière horizontale, en égalant la marge à gauche et à droite. Mais cette marge n'est pas utile quand le bloc prend 100% de la largeur : comme elle prend toute la place on a pas besoin de la centrer.

En retirant les padding, et rajoutant un margin au bloc du centre :

Code:


        .contenu{width:100%;height: autopx; margin : 0 auto;}
        .float {float:left;text-align:center;}
        #left {width: 20%;}
        #middle {width:58%;margin:0px 8px;}
        #right {width: 20%;}

dites-moi ce que ça donne.

[Shaof]

Si je veux que le bloc du milieu soit centrer, je dois mettre 18px et non 8px pour le margin, mais en faisant ça, si on a pas ma résolution, ça se déforme.

[Lixyr]

Attendez, j'ai trouvé quelque chose.

En codant tout en %, les blocs restent les uns aux côtés des autres qu'importe la taille du forum !

Code:

        .contenu{width:100%;height: autopx; margin : 0 auto;}
        .float {float:left;text-align:center;}
        #left {width: 20%;}
        #middle {width:55%;margin:0% 2% 0% 3%;}
        #right {width: 20%;}

Maheureusement, oui, quand on a une résolution plus petite, ça se déforme...

On peut coder tout en pixel pour être extrêmement précis, mais avoir toujours la même largeur qu'importe la taille de l'écran, et obliger les gens qui ont des petits pc à scroler horizontalement... n'est pas forcément un bien.

C'est le désavantage des grands forums à grande PA.

[Shaof]

Pour ce qui est de la résolution avec ça, ce n'est plus un problème. Par contre, maintenant il y a un plus gros décalage entre la colonne de gauche et celle du milieu qu'entre elle et la colonne de droite.

[Lixyr]

Jouez avec les valeurs.

Comme ça c'est mieux ?

Code:

        #middle {width:56%;margin:0% 2%;}

C'est difficile de trouver les bonnes valeurs, mais normalement, là, ça devrait être pile poil bon. En tout cas c'est le cas chez moi.
D'ailleurs, vous devriez coder les titres de votre PA en % aussi.

En mettant

Code:

.contenu h2 {font-size:190%;}

et modifiez la valeur jusqu'à ce que vous ayez la bonne taille.

[Shaof]

Désolé du dernier dérangement, j'ai trouvé une solution :

Code:

.contenu{width:100%;height: autopx; margin : 0 auto;}
        .float {float:left;text-align:center;}
        #left {width: 19.5%;}
        #middle {width:55%;margin:0% 3% 0% 3%;}
        #right {width: 19.5%;}

http://kodraf.pokemonrpg.org/

C'était vraiment un soucis de perfectionniste ! Merci de m'avoir aidé en tout cas !

Sur ce, je vais me coucher.

[Lixyr]

C'est évident en fait quand j'y pense. Le total des pourcentages donne 100%. Ce à quoi je suis arrivée dans mon dernier code donné...

Mais si vous voulez pousser le perfectionnisme plus loin lisez mon poste précédent, pour les titres. ^^ Ca évitera le décalage avec résolution plus petite vis à vis des titres trop gros.


Bonne nuit.