Comment placer des éléments côte à côte sans déformation ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Dim 6 Mar 2016 - 18:35

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Problème de table tr td..
Lien du forum : http://western-bastards.forumactif.org/

Description du problème

Bonjour à tous !

Tout d'abord, merci de venir voir mon problème. Il s'agit d'un code que j'aimerai réussir à faire moi-même seulement, je suis confronté à un problème dès que je commence à faire des modifications. Je souhaite plus un guide que quelqu'un qui me donne le code tout fait, pour que je comprenne et que je parvienne à modifier par moi-même pour éviter de refaire les mêmes erreurs par la suite.

Comme vous pouvez le voir dans le schéma, c'est le résultat que j'aimerai obtenir, seulement avec le codage actuel, dès que j'essaye de mettre dans le template le titre et les informations sujets,message en td pour que ce soit côte à côte, tout se décale. Même chose lorsque je veux faire le bloc titre + sujet/message + description à côté de l'avatar + dernier message + image catégorie (nouveau, ancien, verrouillé)... Je ne comprends pas pourquoi ça ne fonctionne pas, alors que je fais des td mais peut-être que trop de td tue le td Laughing

Est-ce qu'il y a un moyen plus facile de pouvoir obtenir le résultat du schéma à partir du codage actuel de mes catégories sans que tout se déglingue ? Sachant qu'en plus, dès que je déplace un élément, tous les autres se décalent et pourtant, il y a une div à chaque élément, une taille (hauteur, largeur) donc... soit mon code est un vrai bordel Arrow soit je manque de petites techniques ♥

Voici mes codes en commençant par le template, suivit du css :

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
    <span class="gensmall" id="subforums">
      <!-- BEGIN switch_moderators_links -->
      {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
      <!-- END switch_moderators_links -->
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
    </span>
    <script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' • ')).removeAttr('id');
    </script>
<!-- BEGIN catrow -->
 <div class="forum">
            <table width="100%" cellspacing="0" cellpadding="0">
                <!-- BEGIN tablehead -->
                <tr>
                  <!-- BEGIN inc --><!-- END inc -->
                  <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
                    <center><img src="http://image.noelshack.com/fichiers/2016/03/1453576478-hc-tmtn-v3-2.png" alt="haut cate"/></center>
        <span class="titreCategorie">
          <center>{catrow.tablehead.L_FORUM}</center>
        </span>
      </td>
                </tr>
<!-- END tablehead -->
                <!-- BEGIN cathead -->    <!-- END cathead -->
           
                <!-- BEGIN forumrow -->
                <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
              <td class="row1 over" colspan="1" valign="top" width="100%" height="50">                                                 
                            <div class="le_tout">  <!---- DÉBUT DES MODIFICATIONS ----> 
                             
                              <table width="792px">
                                <tr><td>  <div class="titre_forum">
                            <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                                                </span> </div>
                                  <span class="genmed"><span class="description mCustomScrollbar" data-mcs-theme="minimal"><font size="1">{catrow.forumrow.FORUM_DESC}</font></span></span>
                                                                         </td><td width="60" height="95"><div style="width: 60px;"></div>
<span class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></span></td>
                                                                                  <!-- BEGIN forum_link_no -->
                                                                  <td width="150" height="45"><div class="dernier_messages">
                                                                    <span class="gensmall" style="color:#f1e0a6;"><center>{catrow.forumrow.LAST_POST}</center></span></div><div class="sujets_messages">
                                                                    <span class="gensmall" style="font-size: 9px;"><center>{catrow.forumrow.TOPICS} intrigues - {catrow.forumrow.POSTS} méfaits</center></span>
                                                                    </div></td><td><div class="sous_forum"><div class="sforum"><div id="slide"><div><p></p>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<p></p><img src="http://image.noelshack.com/fichiers/2016/03/1453581271-sousforum-tmtn-v3.png"/></td>
                                  <!-- END forum_link_no --></td>
                                 
                                        </tr>
                                                          </table>
</div>
                                                            <td><div class="img-cate"><center><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></center></div><!---- FIN DES MODIFICATIONS  ---->
</td>
</tr>
      <!-- END forumrow --><!-- BEGIN catfoot --><!-- END catfoot -->
              <!-- BEGIN tablefoot -->
                <tr>
                    <td colspan=3>
                      <center><img src="http://image.noelshack.com/fichiers/2016/03/1453576238-bc-tmtn-v3.png" alt="bas de cate" /></center>
                    </td>
                </tr>
                <!-- END tablefoot -->
            </table>

        </div>
  <!-- END catrow -->

Code:
/*----------------------CATEGORIES FORUM------------------------------*/
/* FORUM ENSEMBLE */
.forum {
width: 800px;
margin: auto;
}

/* TITRES CATEGORIES */
.titreCategorie h2{
margin-left: 0px;
margin-top: -230px;
height: 220px;
}
.titreCategorie .textecatego {
display: none;
}
.textecatego {
display: inline;
}
.titreCategorie img {
display: inline-block !important;
  margin-top: 10px;
}

/* LA PARTIE QUI RENFERME TOUT */
.le_tout{
background-image:url('');
width: 792px;
height: 152px !important;
vertical-alignement: middle;
margin:auto;
padding: 4px;}

/* TITRE DES FORUMS */
.titre_forum{
margin-top:-52px;
font-family: 'Metamorphous', cursive;
font-size: 13px;
width: 285px;
height: 15px;
}

.forumlink{
color: #BD9751 !important;
margin-left: 6px;}

.forumlink:hover{
opacity: 0.7 !important;
margin-left: 6px;}

/* DESCRIPTION FORUM */
.description {
display: block;
width: 276px;
height: 95px;
border-radius: 10px;
overflow: auto;
margin-left: 8px;
margin-top: 3px;
background-color: #transp;
font-color: #904F1B !important;
font-family: tahoma;
font-size: 10px;
padding: 2px;
text-align: justify;
position: absolute;
z-index: 6;}

/* NMB SUJETS MESSAGES */
.sujets_messages{
color: white !important;
font-family: 'Open Sans Condensed', sans-serif !important;
text-align: center;
top: 5px;
left: 2px;
opacity: 0.5;
width:80px;
height: 10px;
position: relative;}

/* DERNIERS MESSAGES */
.dernier_messages{
color: #904F1B !important;
font-family: 'Open Sans Condensed', sans-serif !important;
top: 15px;
left: 2px;
background-color: #transp;
width: 158px;
height: 90px;
position: relative;}

/* AVATAR CATEGORIE */
.lastpost-avatar {
float: left;
padding: 2px;
width: 60px;
height: 95px;
margin-top: 15px;
margin-left: -22px;
position: relative;
border-radius: 5px;}
.lastpost-avatar img {
width: 60px;
height: 95px;
border-radius: 5px;
}

/*IMG CATEGORIE*/
.img-cate{
width: 90px;
height: 90px;
margin-left: -9px;
margin-top: -30px;}

/* LIEN SOUS-FORUM */
        .sforum {
          left: 12px;
          top: 8px;
          width: 190px;
          height: 122px;
          background-color: #transp;
          text-align:left;
          position: relative;
          z-index: 3;
          transition: all 1s;
          -webkit-transition: all 1s;
        }
.sous_forum a {
          color: #c9b699 !important;
          font-family: 'Gilda Display', serif !important;
          text-shadow: 0px 0px 0px #000000; 
          padding: 5px;}
.sous_forum a:hover {
          color: #CBA377 !important;
          opacity: 0.7;
          padding: 5px;}

/*IMAGE*/
#slide div {
   background: #transp;
   height: 122px; /* Égal à la hauteur de l'image */
   margin: 0px;
   overflow: hidden;
   position: relative;
   width: 190px; /* Égal à la largeur de l'image */
        left: 0px;
        font-family: tahoma;
        font-size: 11px;
        color: #c9b699;
        line-height: 11px;
  text-align: center;
 
}
#slide div img {
   left: 0;
   position: absolute;
   top: 0;
     transition: transform 0.9s ease-in-out;
   -moz-transition: -moz-transform 0.9s ease-in-out;
   -o-transition: -o-transform 0.9s ease-in-out;
   -webkit-transition: -webkit-transform 0.9s ease-in-out;
}
#slide div:hover img {
   transform: translateY(-225px); /* Valeur négative égale à la hauteur de l'image */
   -moz-transform: translateY(-225px);
   -o-transform: translateY(-225px);
  -webkit-transform: translateY(-225px);}
/*--------------------------------------FIN CAT----------------------------------------*/

Merci par avance à la personne qui voudra bien m'expliquer, me guider pour ce codage I love you
Bonne soirée à tous !!


Dernière édition par Cheeralex le Lun 7 Mar 2016 - 18:31, édité 1 fois

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 14:21

Coucou Smile

Si tu veux je peux voir ça avec toi ^^ Déjà, quelque soit le codage que tu veux faire, laisse tomber les templates Smile La seconde étape (la première étant de faire un schéma), c'est de faire ton codage simplement sur une page html.

Tu saurais faire ça ? Smile

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 14:33

Oh, merci beaucoup pour ton aide !
Alors oui, je peux essayer de faire ça sur une page HTML, comme si je faisais une PA en fait, je fais des cadres etc ? Si c'est ça, alors oui, je peux faire ce montage facilement je pense I love you

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 14:33

Oui c'est exactement ça Smile

Une fois que ça sera ok pour toi et qu'après lecture de ton code je ne vois pas de faute, on verra pour y mettre les variables du forum et l'ajouter au template Smile

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 15:00

Hmh... on va dire que c'est un peu mieux mais les éléments ne veulent pas se mettre côte à côte...
J'ai retiré des table et finalement, y'en avait certainement trop parce que c'est plus ordonné mais le titre et 0mess 0suj veut toujours pas se mettre à côté... là il manque l'avatar mais pareil, ça peut pas se mettre à côté car si je met des td, tout se décale Arrow

Code:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<!DOCTYPE html>
<html>
<head></head> 
<body><center><div class="contenu">
<table width="100%"><tr><td width="50%"><div class="titre1">TITRE DU FORUM -</div><div class="infosuj">0 message 0 sujet</div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum erat nec vestibulum vulputate.
Proin massa tellus, molestie hendrerit nisl vitae, fermentum congue urna. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Phasellus nec felis eget ante accumsan tempus. Nulla non faucibus justo. Curabitur turpis diam.</div></td>
<td width="50%"><img src="http://i.imgbox.com/zPSwI64I.png" width="130" height="40"/>
<div class="avatar"></div><div class="derniermess"></div>
<td width="50%"><div class="sous_forum"><div class="sforum"><div id="slide"><div><p></p>SOUS FORUM<p></p><img src="http://image.noelshack.com/fichiers/2016/03/1453581271-sousforum-tmtn-v3.png"/></td></tr></table></div>

<style>.contenu{width: 800px;
height: 150px !important;
vertical-alignement: middle;
margin:auto;
padding: 4px;}
.titre1{margin-top: 0px;
font-family: 'Metamorphous', cursive;
font-size: 13px;
width: 320px;
height: 15px;}
.infosuj{color: black !important;
font-family: 'Open Sans Condensed', sans-serif !important;
text-align: center;
top: 5px;
left: 2px;
opacity: 0.5;
width:80px;
height: 10px;
position: relative;}
.description{display: block;
width: 320px;
height: 110px;
border-radius: 10px;
overflow: auto;
margin-left: 8px;
margin-top: 3px;
background-color: black;
font-color: #904F1B !important;
font-family: tahoma;
font-size: 10px;
padding: 2px;
text-align: justify;
position: absolute;
z-index: 6;}
.derniermess{color: #904F1B !important;
font-family: 'Open Sans Condensed', sans-serif !important;
top: 15px;
left: 2px;
background-color: black;
width: 158px;
height: 90px;
position: relative;}
.avatar{float: left;
padding: 2px;
width: 30px0px;
height: 65px5px;
margin-top: 15px;
margin-left: -22px;
position: relative;
border-radius: 5px;}
.avatar img {
width: 30px;
height: 65px;
border-radius: 5px;}
.sforum{left: 12px;
          top: 8px;
          width: 190px;
          height: 122px;
          background-color: #transp;
          text-align:left;
          position: relative;
          z-index: 3;
          transition: all 1s;
          -webkit-transition: all 1s;}
.sous_forum a {
          color: #c9b699 !important;
          font-family: 'Gilda Display', serif !important;
          text-shadow: 0px 0px 0px #000000; 
          padding: 5px;}
.sous_forum a:hover {
          color: #CBA377 !important;
          opacity: 0.7;
          padding: 5px;}
        /*IMAGE*/
#slide div {
  background: #transp;
  height: 122px; /* Égal à la hauteur de l'image */
  margin: 0px;
  overflow: hidden;
  position: relative;
  width: 190px; /* Égal à la largeur de l'image */
        left: 0px;
        font-family: tahoma;
        font-size: 11px;
        color: #c9b699;
        line-height: 11px;
  text-align: center;
 
}
#slide div img {
  left: 0;
  position: absolute;
  top: 0;
    transition: transform 0.9s ease-in-out;
  -moz-transition: -moz-transform 0.9s ease-in-out;
  -o-transition: -o-transform 0.9s ease-in-out;
  -webkit-transition: -webkit-transform 0.9s ease-in-out;
}
#slide div:hover img {
  transform: translateY(-225px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateY(-225px);
  -o-transform: translateY(-225px);
  -webkit-transform: translateY(-225px);}</style>
  </body></HTML>



EDIT : Alors, je trouve que l'essai est beaucoup mieux quand je reste sur du basique de chez basique xD
Quelques imperfections mais l'idée est là What a Face


Code:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<!DOCTYPE html>
<html>
<head></head> 
<body><center><div style="background-color: black; width: 800px; height: 140px;">
  <table width="100%"><tr><td><table><tr><td><div style="background-color: red; width: 150px; height: 15px;">TITRE -</div></td><td><div style="background-color: red; width: 120px; height: 15px;"> MESS SUJ</div></td></tr></table>
    <div style="background-color: red; width 320px; height: 95px;">DESCRIPTION</div></td>
    <td><div style="background-color: red; width: 220px; height: 35px;">IMAGE</div><br />
    <div style="background-color: red; width: 220px; height: 60px;"><table><tr><td><div style="background-color: blue; width: 35px; height: 55px;">AVA</div></td><td><div style="background-color: red; width: 110px; height: 55px;">DERNIER MESS</div></td></tr></table></div></td>
    <td><div style="background-color: red; width: 250px; height: 110px;">SOUS FORUM</div></td></tr></table></div>
  </body></HTML>


Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 16:01

Du coup, on part sur le "simple" ? ^^

Déjà, tu as une balise "center" qui n'est pas fermée. On va la supprimer et plutôt indiquer dans la div qu'elle aura des marges à droite et à gauche automatique ; c'est à dire que le navigateur, grâce à la largeur de la div la centrera comme il faut sur la largeur de la page.

Code:
<div style="background-color: black; width: 800px; height: 140px; margin: auto;">

Pour le reste, c'est tout bon Smile

On passe au template ?

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 16:15

Ah oui effectivement... Je l'ai même pas vu le center Arrow
Passons au template, ça va se corser je le sens Laughing


Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 16:26

Mais non Smile

On va commencer simple en y mettant les variables Smile

> Le titre :
Code:
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

> Nombre de messages :
Code:
{catrow.forumrow.POSTS}

> Nombre de sujets :
Code:
{catrow.forumrow.TOPICS}

> La description :
Code:
{catrow.forumrow.FORUM_DESC}

> L'image :
Code:
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

> La partie avec l'avatar du posteur :
Code:
<!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

> L'info sur le dernier message
Code:
{catrow.forumrow.LAST_POST}

> Les sous forum
Code:
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

Si on mets ça dans ton code, on a ça pour le moment :
Code:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<!DOCTYPE html>
<html>
<head></head>
<body>

<div style="background-color: black; width: 800px; height: 140px; margin: auto;">
  <table width="100%">
    <tr>
      <td>
        <table>
          <tr>
            <td>
              <div style="background-color: red; width: 150px; height: 15px;"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
            </td>
            <td>
              <div style="background-color: red; width: 120px; height: 15px;">{catrow.forumrow.POSTS} msg - {catrow.forumrow.TOPICS} sjt</div>
            </td>
          </tr>
        </table>
        <div style="background-color: red; width 320px; height: 95px;">{catrow.forumrow.FORUM_DESC}</div>
      </td>
      <td>
        <div style="background-color: red; width: 220px; height: 35px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><br />
        <div style="background-color: red; width: 220px; height: 60px;">
          <table>
            <tr>
              <td>
                <div style="background-color: blue; width: 35px; height: 55px;">
                  <!-- BEGIN avatar -->
                  <div style="width: 200px;"></div>
                  <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                  <!-- END avatar -->
                </div>
              </td>
              <td>
                <div style="background-color: red; width: 110px; height: 55px;">{catrow.forumrow.LAST_POST}</div>
              </td>
            </tr>
          </table>
        </div>
      </td>
      <td>
        <div style="background-color: red; width: 250px; height: 110px;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
      </td>
    </tr>
  </table>
</div>


  </body></HTML>

Est-ce que jusque là c'est bon ? (on va ensuite ajouter ça dans les templates)

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 16:35

Alors, tout est bon oui ♥

Code:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<!DOCTYPE html>
<html>
<head></head> 
<body><div style="background-color: black; width: 800px; height: 140px; margin: auto;">
  <table width="100%"><tr><td><table><tr><td><div style="background-color: red; width: 150px; height: 15px;">    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div></td>
  <td><div style="background-color: red; width: 120px; height: 15px;">{catrow.forumrow.POSTS} - {catrow.forumrow.TOPICS}</div></td></tr></table>
    <div style="background-color: red; width 320px; height: 95px;">{catrow.forumrow.FORUM_DESC}</div></td>
    <td><div style="background-color: red; width: 220px; height: 35px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><br />
    <div style="background-color: red; width: 220px; height: 60px;"><table><tr><td><div style="background-color: blue; width: 35px; height: 55px;">    <!-- BEGIN avatar -->
                <div style="width: 35px;"></div>
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar --></div></td><td><div style="background-color: red; width: 110px; height: 55px;">{catrow.forumrow.LAST_POST}</div></td></tr></table></div></td>
    <td><div style="background-color: red; width: 250px; height: 110px;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></td></tr></table></div>
  </body></HTML>



Donc pour le template maintenant... Je copie colle cette partie là ?

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 16:42

Parfait !

Dernière étape, on injecte tout ça dans le template ^^

1) On va supprimer l'en-tête, c'est à dire cette partie :
Code:
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>

2) Cette partie, c'est le titre de ta catégorie :
Code:
<!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->

3) Nous, on va modifier cette partie :
Code:
<tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->

qui correspond à l'affichage d'un forum Smile C'est donc là qu'on va mettre notre code :
Code:
   <!-- BEGIN forumrow -->
   <tr>
      <td colspan="{catrow.catfoot.INC_SPAN}">
         <div style="background-color: black; width: 800px; height: 140px; margin: auto;">
           <table width="100%">
             <tr>
               <td>
                 <table>
                   <tr>
                     <td>
                       <div style="background-color: red; width: 150px; height: 15px;"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
                     </td>
                     <td>
                       <div style="background-color: red; width: 120px; height: 15px;">{catrow.forumrow.POSTS} msg - {catrow.forumrow.TOPICS} sjt</div>
                     </td>
                   </tr>
                 </table>
                 <div style="background-color: red; width 320px; height: 95px;">{catrow.forumrow.FORUM_DESC}</div>
               </td>
               <td>
                 <div style="background-color: red; width: 220px; height: 35px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><br />
                 <div style="background-color: red; width: 220px; height: 60px;">
                   <table>
                     <tr>
                       <td>
                         <div style="background-color: blue; width: 35px; height: 55px;">
                           <!-- BEGIN avatar -->
                           <div style="width: 200px;"></div>
                           <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                           <!-- END avatar -->
                         </div>
                       </td>
                       <td>
                         <div style="background-color: red; width: 110px; height: 55px;">{catrow.forumrow.LAST_POST}</div>
                       </td>
                     </tr>
                   </table>
                 </div>
               </td>
               <td>
                 <div style="background-color: red; width: 250px; height: 110px;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
               </td>
             </tr>
           </table>
         </div>
      </td>
   </tr>
   <!-- END forumrow -->

Du coup, tu as ce template :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <td colspan="{catrow.catfoot.INC_SPAN}">
         <div style="background-color: black; width: 800px; height: 140px; margin: auto;">
           <table width="100%">
             <tr>
               <td>
                 <table>
                   <tr>
                     <td>
                       <div style="background-color: red; width: 150px; height: 15px;"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
                     </td>
                     <td>
                       <div style="background-color: red; width: 120px; height: 15px;">{catrow.forumrow.POSTS} msg - {catrow.forumrow.TOPICS} sjt</div>
                     </td>
                   </tr>
                 </table>
                 <div style="background-color: red; width 320px; height: 95px;">{catrow.forumrow.FORUM_DESC}</div>
               </td>
               <td>
                 <div style="background-color: red; width: 220px; height: 35px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><br />
                 <div style="background-color: red; width: 220px; height: 60px;">
                   <table>
                     <tr>
                       <td>
                         <div style="background-color: blue; width: 35px; height: 55px;">
                           <!-- BEGIN avatar -->
                           <div style="width: 200px;"></div>
                           <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                           <!-- END avatar -->
                         </div>
                       </td>
                       <td>
                         <div style="background-color: red; width: 110px; height: 55px;">{catrow.forumrow.LAST_POST}</div>
                       </td>
                     </tr>
                   </table>
                 </div>
               </td>
               <td>
                 <div style="background-color: red; width: 250px; height: 110px;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
               </td>
             </tr>
           </table>
         </div>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 16:52

Mon template est déjà modifié avec un haut et un bas en image. Est-ce que du coup, je le remet à zéro pour avoir le même type de template que celui dont tu parles ?

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 16:54

Montre ton template ici, on va le faire ensemble Smile

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 16:55

Le voilà Smile

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
    <span class="gensmall" id="subforums">
      <!-- BEGIN switch_moderators_links -->
      {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
      <!-- END switch_moderators_links -->
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
    </span>
    <script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' • ')).removeAttr('id');
    </script>
<!-- BEGIN catrow -->
 <div class="forum">
            <table width="100%" cellspacing="0" cellpadding="0">
                <!-- BEGIN tablehead -->
                <tr>
                  <!-- BEGIN inc --><!-- END inc -->
                  <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
                    <center><img src="http://image.noelshack.com/fichiers/2016/03/1453576478-hc-tmtn-v3-2.png" alt="haut cate"/></center>
        <span class="titreCategorie">
          <center>{catrow.tablehead.L_FORUM}</center>
        </span>
      </td>
                </tr>
<!-- END tablehead -->
                <!-- BEGIN cathead -->    <!-- END cathead -->
         
                <!-- BEGIN forumrow -->
                <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
              <td class="row1 over" colspan="1" valign="top" width="100%" height="50">                                               
                            <div class="le_tout">  <!---- DÉBUT DES MODIFICATIONS ---->
                           
                              <table width="792px">
                                <tr><td>  <div class="titre_forum">
                            <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                                                </span> </div>
                                  <span class="genmed"><span class="description mCustomScrollbar" data-mcs-theme="minimal"><font size="1">{catrow.forumrow.FORUM_DESC}</font></span></span>
                                                                        </td><td width="60" height="95"><div style="width: 60px;"></div>
<span class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></span></td>
                                                                                  <!-- BEGIN forum_link_no -->
                                                                  <td width="150" height="45"><div class="dernier_messages">
                                                                    <span class="gensmall" style="color:#f1e0a6;"><center>{catrow.forumrow.LAST_POST}</center></span></div><div class="sujets_messages">
                                                                    <span class="gensmall" style="font-size: 9px;"><center>{catrow.forumrow.TOPICS} intrigues - {catrow.forumrow.POSTS} méfaits</center></span>
                                                                    </div></td><td><div class="sous_forum"><div class="sforum"><div id="slide"><div><p></p>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<p></p><img src="http://image.noelshack.com/fichiers/2016/03/1453581271-sousforum-tmtn-v3.png"/></td>
                                  <!-- END forum_link_no --></td>
                               
                                        </tr>
                                                          </table>
</div>
                                                            <td><div class="img-cate"><center><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></center></div><!---- FIN DES MODIFICATIONS  ---->
</td>
</tr>
      <!-- END forumrow --><!-- BEGIN catfoot --><!-- END catfoot -->
              <!-- BEGIN tablefoot -->
                <tr>
                    <td colspan=3>
                      <center><img src="http://image.noelshack.com/fichiers/2016/03/1453576238-bc-tmtn-v3.png" alt="bas de cate" /></center>
                    </td>
                </tr>
                <!-- END tablefoot -->
            </table>

        </div>
  <!-- END catrow -->

Du coup, est-ce que je colle mon code après le <!-- BEGIN forumrow --> jusqu'à <!-- END forumrow --> ?

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 16:58

Oui Smile

Normalement, si tu fais ça, ça devrait fonctionner ^^ Mais attention, n'oublie pas la ligne et la colonne, donc :
Code:
<!-- BEGIN forumrow -->
   <tr>
      <td colspan="{catrow.catfoot.INC_SPAN}">
         <!-- Ton code est ici ^^ -->
      </td>
   </tr>
<!-- END forumrow -->

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 17:06

Alors du coup, j'étais pas sûre si je devais garder la partie après avec le begin inc donc... ça donne ça.

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
    <span class="gensmall" id="subforums">
      <!-- BEGIN switch_moderators_links -->
      {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
      <!-- END switch_moderators_links -->
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
    </span>
    <script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' • ')).removeAttr('id');
    </script>
<!-- BEGIN catrow -->
 <div class="forum">
            <table width="100%" cellspacing="0" cellpadding="0">
                <!-- BEGIN tablehead -->
                <tr>
                  <!-- BEGIN inc --><!-- END inc -->
                  <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
                    <center><img src="http://image.noelshack.com/fichiers/2016/03/1453576478-hc-tmtn-v3-2.png" alt="haut cate"/></center>
        <span class="titreCategorie">
          <center>{catrow.tablehead.L_FORUM}</center>
        </span>
      </td>
                </tr>
<!-- END tablehead -->
                <!-- BEGIN cathead -->    <!-- END cathead -->
         
                <!-- BEGIN forumrow -->
                <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
              <td class="row1 over" colspan="1" valign="top" width="100%" height="50">                                               
<div style="background-color: black; width: 800px; height: 140px; margin: auto;">
  <table width="100%"><tr><td><table><tr><td><div style="background-color: red; width: 150px; height: 15px;">    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div></td>
  <td><div style="background-color: red; width: 120px; height: 15px;">{catrow.forumrow.POSTS} - {catrow.forumrow.TOPICS}</div></td></tr></table>
    <div style="background-color: red; width 320px; height: 95px;">{catrow.forumrow.FORUM_DESC}</div></td>
    <td><div style="background-color: red; width: 220px; height: 35px;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><br />
    <div style="background-color: red; width: 220px; height: 60px;"><table><tr><td><div style="background-color: blue; width: 35px; height: 55px;">    <!-- BEGIN avatar -->
                <div style="width: 35px;"></div>
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar --></div></td><td><div style="background-color: red; width: 110px; height: 55px;">{catrow.forumrow.LAST_POST}</div></td></tr></table></div></td>
    <td><div style="background-color: red; width: 250px; height: 110px;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></td></tr></table></div>
                                                           
</td>
</tr>
      <!-- END forumrow --><!-- BEGIN catfoot --><!-- END catfoot -->
              <!-- BEGIN tablefoot -->
                <tr>
                    <td colspan=3>
                      <center><img src="http://image.noelshack.com/fichiers/2016/03/1453576238-bc-tmtn-v3.png" alt="bas de cate" /></center>
                    </td>
                </tr>
                <!-- END tablefoot -->
            </table>

        </div>
  <!-- END catrow -->


Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 17:12

Oh je ne peux pas voir ton forum sans etre connectée Sad

On va remplacer ça :
Code:
                <!-- BEGIN forumrow -->
                <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
              <td class="row1 over" colspan="1" valign="top" width="100%" height="50">                                             
<div style="background-color: black; width: 800px; height: 140px; margin: auto;">

par ça :
Code:
<!-- BEGIN forumrow -->
  <tr>
      <td colspan="{catrow.catfoot.INC_SPAN}">     
         <div style="background-color: black; width: 800px; height: 140px; margin: auto;">
         

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 17:36

Ah voilà, je me demandais d'où venait les deux petites bandes vertes sur le côté, elles ont disparu Cool
Super, tout est en place et il me reste plus qu'à positionner les éléments et y attribuer un css. Généralement, quand je commence à bidouiller le css avec des margin & co pour aligner (mode perfectionniste) tout se décale en même temps. Je pense qu'avec ta super technique, ça ne devrait pas être le cas mais au cas où, tu veux bien m'aider jusqu'à la finition complète des catégories ? ♥

J'ai ouvert une catégorie pour que tu puisses voir ! J'avais oublié que les permissions étaient en caché Arrow

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Miettes le Lun 7 Mar 2016 - 17:39

Ah bah tu as la base Smile

Du coup, je te laisse faire les réglages et préviens moi ici quand c'est ok ^^ J'y jetterai un oeil Smile

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment placer des éléments côte à côte sans déformation ?

Message par Cheeralex le Lun 7 Mar 2016 - 18:12

Déjà, merci énormément parce que c'est la première fois que mon code m'obéit complètement sans que tout se déglingue dès que je modifie une valeur xD
Ensuite, je crois que tout est parfait *.* Il me reste vraiment quelques bidouillages côté esthétique mais... tout fonctionne à merveille I love you

Merci énorméééément Miettes ! ♥♥♥

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum