Comment placer des éléments côte à côte sans déformation ?
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Comment placer des éléments côte à côte sans déformation ?
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
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 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
Bonne soirée à tous !!
Dernière édition par Cheeralex le Lun 7 Mar 2016 - 18:31, édité 1 fois
Re: Comment placer des éléments côte à côte sans déformation ?
Coucou
Si tu veux je peux voir ça avec toi ^^ Déjà, quelque soit le codage que tu veux faire, laisse tomber les templates 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 ?
Si tu veux je peux voir ça avec toi ^^ Déjà, quelque soit le codage que tu veux faire, laisse tomber les templates 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 ?
Re: Comment placer des éléments côte à côte sans déformation ?
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
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
Re: Comment placer des éléments côte à côte sans déformation ?
Oui c'est exactement ça
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
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
Re: Comment placer des éléments côte à côte sans déformation ?
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
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à
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
- 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à
- 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>
Re: Comment placer des éléments côte à côte sans déformation ?
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.
Pour le reste, c'est tout bon
On passe au template ?
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
On passe au template ?
Re: Comment placer des éléments côte à côte sans déformation ?
Ah oui effectivement... Je l'ai même pas vu le center
Passons au template, ça va se corser je le sens
Passons au template, ça va se corser je le sens
Re: Comment placer des éléments côte à côte sans déformation ?
Mais non
On va commencer simple en y mettant les variables
> Le titre :
> Nombre de messages :
> Nombre de sujets :
> La description :
> L'image :
> La partie avec l'avatar du posteur :
> L'info sur le dernier message
> Les sous forum
Si on mets ça dans ton code, on a ça pour le moment :
Est-ce que jusque là c'est bon ? (on va ensuite ajouter ça dans les templates)
On va commencer simple en y mettant les variables
> 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)
Re: Comment placer des éléments côte à côte sans déformation ?
Alors, tout est bon oui ♥
Donc pour le template maintenant... Je copie colle cette partie là ?
- 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à ?
Re: Comment placer des éléments côte à côte sans déformation ?
Parfait !
Dernière étape, on injecte tout ça dans le template ^^
1) On va supprimer l'en-tête, c'est à dire cette partie :
2) Cette partie, c'est le titre de ta catégorie :
3) Nous, on va modifier cette partie :
qui correspond à l'affichage d'un forum C'est donc là qu'on va mettre notre code :
Du coup, tu as ce template :
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"> {catrow.tablehead.L_FORUM} </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"> </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 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"> </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 -->
Re: Comment placer des éléments côte à côte sans déformation ?
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 ?
Re: Comment placer des éléments côte à côte sans déformation ?
Montre ton template ici, on va le faire ensemble
Re: Comment placer des éléments côte à côte sans déformation ?
Le voilà
Du coup, est-ce que je colle mon code après le <!-- BEGIN forumrow --> jusqu'à <!-- END forumrow --> ?
- 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 --> ?
Re: Comment placer des éléments côte à côte sans déformation ?
Oui
Normalement, si tu fais ça, ça devrait fonctionner ^^ Mais attention, n'oublie pas la ligne et la colonne, donc :
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 -->
Re: Comment placer des éléments côte à côte sans déformation ?
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 -->
Re: Comment placer des éléments côte à côte sans déformation ?
Oh je ne peux pas voir ton forum sans etre connectée
On va remplacer ça :
par ça :
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;">
Re: Comment placer des éléments côte à côte sans déformation ?
Ah voilà, je me demandais d'où venait les deux petites bandes vertes sur le côté, elles ont disparu
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é
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é
Re: Comment placer des éléments côte à côte sans déformation ?
Ah bah tu as la base
Du coup, je te laisse faire les réglages et préviens moi ici quand c'est ok ^^ J'y jetterai un oeil
Du coup, je te laisse faire les réglages et préviens moi ici quand c'est ok ^^ J'y jetterai un oeil
Re: Comment placer des éléments côte à côte sans déformation ?
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
Merci énorméééément Miettes ! ♥♥♥
Ensuite, je crois que tout est parfait *.* Il me reste vraiment quelques bidouillages côté esthétique mais... tout fonctionne à merveille
Merci énorméééément Miettes ! ♥♥♥
Sujets similaires
» Difficulté à placer des éléments côte à côte.
» Comment mettre des sous catégories côte à côte ?
» Comment mettre les deux Widgets cote a cote
» Placer les widgets sur le côté droit sur AwesomeBB
» placer deux photos de chaque coté de la banniere
» Comment mettre des sous catégories côte à côte ?
» Comment mettre les deux Widgets cote a cote
» Placer les widgets sur le côté droit sur AwesomeBB
» placer deux photos de chaque coté de la banniere
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum