largeur fluctuante de la colonne de droite

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

Résolu largeur fluctuante de la colonne de droite

Message par iOrion le Lun 26 Déc 2011 - 18:33

Bonjour à tous et merci d'avance pour l'attention que vous porterez à notre problème Smile

Nous rencontrons un problème sur ce forum, http://holidays.forum-gratuit.net/ , au niveau de l'affichage de la colonne de droite du forum (qui comprend le dernier sujet et nom de l'utilisateur ayant répondu). La taille varie inexplicablement entre la première catégorie, où c'est impeccable, et les suivantes où la taille est réduite... Voilà une capture d'écran pour mieux visualiser.



Je vous joins ici le template modifié, à savoir index_box :
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><img src="http://bildberg.eu/yXAaxEHY.png" /><table class="forumline" width="100%" border="0"cellspacing="1" cellpadding="0">
   <tr>
      
         
   </tr>
   <!-- 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>
      <!-- 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">
               <table width="100%"><tr><td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td><td align="right"><span class="gensmall"> {catrow.forumrow.TOPICS} Topics ■ {catrow.forumrow.POSTS} Messages</span></td></tr></table><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 over" align="center" valign="middle" height="100">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </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="http://bildberg.eu/Kg3WvlJV.png"/> <img src="{SPACER}" alt="" height="25" width="100%" /><!-- END tablefoot --><!-- END catrow -->

Ainsi que le css qui s'y rapporte :
Code:
.forumline {
border-top: none;
  border-bottom: none; }

a.forumlink{
display: block;
color: #FF726B;
letter-spacing: -3px;
font-family: Arial;
text-shadow: #D1C0B6 1px 1px 2px;
font-style: lighter;
font-weight: lighter ;
text-align: center;
font-size: 28px;
background-color:#;
height: 15px;
border-top: 4px solid #;
  -moz-border-radius:20px;}

a.forumlink:hover{
display: block;
color: #FF726B;
letter-spacing: -3px;
font-family: Arial;
text-shadow: #D1C0B6 1px 1px 2px;
font-style: lighter;
font-weight: lighter ;
text-align: center;
font-size: 28px;
background-color:#;
height: 15px;
border-top: 4px solid #;
  -moz-border-radius:20px;}

.postbody {
    display: block;
    text-align: list; justify;
}
.postbody {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-align:justify;
}

.bodyline{
border-top: none !important;
border-bottom: none !important;
}
body {
margin: 0 auto;
}

body{
  cursor: crosshair;
}
a:link{
  cursor: help;
}
a:visited{
  cursor: help;
}

a.mainmenu{
 background-color: #;
  border-bottom: 1px solid #;
  border-right: 1px solid #;
  border-left: 1px solid # ;
  border-top: 1px solid #;
  display: center;
  font-family: courier new;
  text-transform: uppercase;
  border-radius: 05px 05px 05px 05px;
  padding-right: 1px;
  padding-left: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #FF7873;
  text-align: center;
  font-size: 13px;}

a.mainmenu:hover{
 background-color: #;
  border-bottom: 1px solid #;
  border-right: 1px solid #;
  border-left: 1px solid # ;
  border-top: 1px solid #;
  display: center;
  font-family: courier new;
  border-radius: 05px 05px 05px 05px;
  padding-right: 1px;
  padding-left: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
  color:#C27D89;
  text-align: center;
  font-size: 13px;}

a.styletitrepa, a.styletitrepa:active, a.styletitrepa:visited {
  background-color: #ffffff;
  border-bottom: 2px solid #9B8E92;
  color: #5e7d92;
  font-weight: bold;
  font-family: courier new;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -1px;
  display: block;
  text-align: center;
  -moz-border-radius: 20px;}

a.styletitrepa:hover {
  font-style: italic;
  color: #dad6f0;}


div.staff {
  height: 130px;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;}

div.staff img {
  width: 50px;
  height: 100px;
  background-color: #ffffff;
  border: 1px solid #CF9797;
  padding: 3px;
  -moz-border-radius: 20px;
  margin: 0px 3px 2px 3px;}

div.navig {
  height: 130px;
  margin-top: 10px;
  text-align: center;
  overflow: hidden;}

div.navig div {
  background: #ffffff;
  margin-top: 4px;
  margin-bottom: 4px;
  border-radius: 10px 10px;
  font-size: 12px;
  text-align: center;
  text-transform: lowercase;
  font-variant: small-caps;
  height: 12px;}

div.navig div:hover {
  background: #ffffff;
  margin-top: 3px;
  margin-bottom: 3px;
  border-radius: 10px 10px;
  font-size: 13px;
  text-align: center;
  text-transform: lowercase;
  font-variant: small-caps;
  height: 12px;}

div.contexte {
  height: 130px;
  margin-top: 10px;
  text-align: justify;
  padding: 0px 10px 0px 5px;
  overflow: auto;
  font-size: 11px;}

div.pvs{
  height: 210px;
  font-size: 12px;
  margin-top: 5px;
  text-align: center;
  overflow: hidden;}

div.pvs img {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #5e7d92;
  padding: 3px;
  -moz-border-radius: 10px;
  margin: 2px;}

.friends {
  height: 88px;
  overflow: hidden;
  margin-top: 5px;
  font-size: 11px;
  text-align: center}

.copyright {
  height: 86px;
  overflow: auto;
  font-size: 9px;
  text-align: center;
  margin-top: 5px;}

div.news{
  height: 210px;
  font-size: 10px;
  margin-top: 5px;
  text-align: justify;
  overflow: auto;
  padding: 0px 10px 0px 0px;}

.stylemenu {
  border: medium double ;
  background: #f2f2f2 none repeat scroll 0% 50%;
  -moz-background-clip: border;
  -moz-background-origin: padding;
  -moz-background-inline-policy: continuous;
  font-family: tahoma;
  color: #5e7d92;
  font-size: 10px;}

.stylebutton {
  border: simple;
  background: #f2f2f2 none repeat scroll 0% 50%;
  -moz-background-clip: border;
  -moz-background-origin: padding;
  -moz-background-inline-policy: continuous;
  font-family: tahoma;
  color: #5e7d92;
  font-size: 10px;}

span.infoadmins {
  position: relative;
  text-decoration: none;}

span.infoadmins span.bulle {
  display: none;
  font-size: 10px;
border-radius: 10px 0px 15px 0px;}

span.infoadmins:hover {
  background: none;
  z-index: 999;
  cursor: help;
border-radius: 10px 0px 15px 0px;}

span.infoadmins:hover span.bulle {
  display: inline;
  position: absolute;
  top: 20px;
  left: -56px;
  width: 170px;
  color: #5e7d92;
  background-color: #ffffff;
  border: 2px simple #C7C7C5;
  padding: 3px;
  -moz-border-radius: 10px;}


.bodyline {
padding-top: 20px;
padding-right: 0px;
padding-left: 0px;}

.bodylinewidth {
margin: -30px auto -30px auto;}

.bodyline{
          border: #945F56 13px solid;
border-radius: 0px 0px;
 -moz-border-radius: 0px;}

#left {position: left;
top: 10px;
left: 10px;
}

/*LIEN SOULIGNES*/
a:link{
text-decoration: none !important;}

a:link hover{
text-decoration: none !important;}



.statistiques{
background-image: url(http://bildberg.eu/gzOJZYRD.png);
background-repeat: no-repeat;
background-position:center ;
height:300px;}

.groupes{
font-size:19px;
text-shadow: #EAE1E2 0px 0px 2px;
font-weight: bold;
font-style: italic;
text-align:center;
font-family: courier new;
  background-color: #ffffff;
  border-bottom: 1px dotted # ;
  border-right: 1px dotted #;
  border-left: 1px dotted #;
text-decoration: none !important;}


.profilentour {
text-align:center;
padding:9px;
background-color:#A89E9E;
-moz-border-radius:10px;
}

Une idée sur comment tout mettre à la même taille ?

Merci d'avance pour l'aide apportée Very Happy


Dernière édition par iOrion le Lun 26 Déc 2011 - 21:47, édité 1 fois

iOrion
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 26/12/2011

http://holidays.forum-gratuit.net/
iOrion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: largeur fluctuante de la colonne de droite

Message par Danux le Lun 26 Déc 2011 - 18:52

Bonjour,

Comme vous n'imposez pas de taille fixe à votre tableau, celui-ci s'adapte en fonction du contenu.

Pour y remédier, fixez une taille à la dernière colonne :
Code:
      <td class="row3 over" align="center" valign="middle" height="100" width="LARGEUR">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
(Remplacez largeur par la taille voulue) Wink

Danux
****

Masculin
Messages : 329
Inscrit(e) le : 22/07/2009

http://forum.forumactif.com/forum
Danux a été remercié(e) par l'auteur de ce sujet.

Résolu Re: largeur fluctuante de la colonne de droite

Message par iOrion le Lun 26 Déc 2011 - 19:33

Merci pour la rapidité de la réponse Very Happy
Malheureusement ma co-admin vient de passer le code et le problème n'est pas résolu...

Voici notre template actuel :
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><img src="http://bildberg.eu/yXAaxEHY.png" /><table class="forumline" width="100%" border="0"cellspacing="1" cellpadding="0">
   <tr>
      
         
   </tr>
   <!-- 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>
      <!-- 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">
               <table width="100%"><tr><td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td><td align="right"><span class="gensmall"> {catrow.forumrow.TOPICS} Topics ■ {catrow.forumrow.POSTS} Messages</span></td></tr></table><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 over" align="center" valign="middle" height="100" width="100px">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </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="http://bildberg.eu/Kg3WvlJV.png"/> <img src="{SPACER}" alt="" height="25" width="100%" /><!-- END tablefoot --><!-- END catrow -->

Sur le forum, la largeur n'a toujours pas changé pour les catégories inférieures :/ (ni même pour la première catégorie dont la largeur devrait normalement être réduite...)

iOrion
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 26/12/2011

http://holidays.forum-gratuit.net/
iOrion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: largeur fluctuante de la colonne de droite

Message par Danux le Lun 26 Déc 2011 - 19:42

Bien alors essayons ceci :

Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><img src="http://bildberg.eu/yXAaxEHY.png" /><table class="forumline" width="100%" border="0"cellspacing="1" cellpadding="0">
   <tr>
      
         
   </tr>
   <!-- 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}" align="right"> </td>
   </tr>
   <!-- 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="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" width="60px">
         <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" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <table width="100%"><tr><td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td><td align="right"><span class="gensmall"> {catrow.forumrow.TOPICS} Topics ■ {catrow.forumrow.POSTS} Messages</span></td></tr></table><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 over" align="center" valign="middle" height="100" width="100px">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </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="http://bildberg.eu/Kg3WvlJV.png"/> <img src="{SPACER}" alt="" height="25" width="100%" /><!-- END tablefoot --><!-- END catrow -->

J'ai supprimé la largeur (width=100%) de la colonne centrale, et j'ai mis width=60px pour la 1ère colonne (vous pouvez changer la valeur bien entendu) Smile

EDIT: J'ai corrigé également le colspan="3" dans la ligne du titre de la catégorie.
Comme vous avez supprimé les colonnes "Messages" et "Sujets", il n'y a plus 3 mais qu'une seule colonne Smile

Danux
****

Masculin
Messages : 329
Inscrit(e) le : 22/07/2009

http://forum.forumactif.com/forum
Danux a été remercié(e) par l'auteur de ce sujet.

Résolu Re: largeur fluctuante de la colonne de droite

Message par iOrion le Lun 26 Déc 2011 - 21:47

ça marche impeccable ! Merci beaucoup Very Happy

iOrion
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 26/12/2011

http://holidays.forum-gratuit.net/
iOrion 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