Sujets similaires

Dernière édition par Jusuchin le Jeu 13 Sep 2012, 14:48, édité 1 fois

Bonsoir, me revoila avec mes ennuis de codes inclinés!

Voila mon problème ! J'ai suivi le tutoriel du forum afin de mettre en place les boutons new/old/lock message de l'index au niveau de la colonne "dernier message". Jusque là, aucun soucis.

Mon gros problème est de réussir à mettre en place correctement le bouton au sein de mon image de fond attribuée à la partie "Dernier message" et surtout de réduire l'écart qui est apparu entre le bouton et le texte d'information du dernier message et qui a totalement décalé ce dernier, donc (le bouton devrait donc se retrouver dans la zone verte et le texte au niveau des lignes )

J'ai également remarqué que le bouton n'apparaissait pas pour chaque forum.

Voici mon forum test : http://brotherhood.forumactif.fr/forum (j'ai appliqué en réalité le bouton "new message" dans la partie "pas de nouveau message" afin qu'on puisse voir en permanence la modification)

Mon template index_box:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td class="gensmall" align="center" valign="bottom">
<div class="lieens">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
</td>
</tr>

</table>

<center><div class="titrecat">{catrow.tablehead.L_FORUM}</div></center><DIV CLASS="fond_forumline">

<table class="forumline" width="98%" border="0" cellspacing="1" cellpadding="0">


<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="80%">
<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>
<img src="http://img11.hostingpics.net/pics/529147titre1.png">
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>



<tr>




<td class="row1 over" colspan="2" valign="top" width="70%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}" width="100%" height="53">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>



<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="center" align="center">
<div class="forumdesc">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

</span>
</div>
</td>
<td valign="center" align="center">
<div class="listeforums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</td>
</tr>
</table>


</td>



<td class="row3 over" align="center" valign="middle" height="50" width="20%">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> <br /> <div class="gensmall incline">{catrow.forumrow.LAST_POST}</div></td>





<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table></div><center><img src="http://img15.hostingpics.net/pics/608103bascat2.jpg" alt="" /></center>

et un bout de CSS

Code:: td.row3.over
{
background-image:url(http://img11.hostingpics.net/pics/354135message.png);
background-repeat: no-repeat;
background-position:right;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
margin-left:10px;
height:30px;
}

En espérant que mon problème soit moins casse-tête que le précédent,

Merci d'avance! Mise en place boutons dans colonne "dernier message" | Résolu 577704309

Mise en place boutons dans colonne "dernier message" | Résolu 577704309

Jusuchin

Bonjour,

Je passe en coup de vent, je n'ai pas le temps de regarder le code. Par contre, je peux te dire que le "Nouveau message ne s'affichent pas dans certains cas pour une bonne raison: Forumactif fait la différence entre une catégorie (un forum qui contient des sous-forums) et un forum (qui ne contient pas de sous-forum). Tu as mis l'icône seulement à l'endroit "Catégorie - Nouveau :" du PA, alors que pour afficher le même icône partout il faudrait mettre le même lien à "Catégorie - Nouveau:" et à "Forum - Nouveau:".

Pour le reste, quelqu'un confirmera parce que j'ai pas tout étudier, je dirais que le positionnement incorrect viens du fait que tu as effectué une rotation à tes éléments (ça a tendance à modifier la position, selon l'axe) peut-être serait-il plus facile de redresser ton image de fond (https://2img.net/r/hpimg11/pics/354135message.png) par un logiciel de graphisme, mettre tes éléments normalement puis effectuer une rotation de l'ensemble... enfin, c'est dans le pire des cas, peut-être quelqu'un passera te donner une réponse plus facile et peut-être (même) plus efficace.

Voilà.

Bonsoir,

Merci de la réponse parce que ça m'aide déjà.

Pour la différence entre "catégorie" et "forum", en effet, je viens de me rendre compte de mon erreur... Ca fait trois ans que j'ai arrêté d'administrer et ça se fait sentir si je ne sais même plus faire cette différence... En tout cas, oui, ça résout (forcément) le problème des trous.

Pour l'image graphique droite puis en rotation par des codes, je tenterai bien si ça peut résoudre le problème mais c'est vrai que s'il y avait un moyen plus simple, ça m'éviterait de recommencer pas mal de codes sur lesquels j'ai déjà embêté bien du monde...

EDIT: Alors voilà ce que j'ai fait ! J'ai redressé mes images sur photoshop et les ai mises sur le forum en appliquant un code de rotation :

Code:: td.row3.over
{
background-image:url(http://img11.hostingpics.net/pics/302080message2.png);
background-repeat: no-repeat;
background-position:right;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
margin-right:10px;
height:30px;
width:190px;
-webkit-transform: rotate(-23deg);
-moz-transform: rotate(-23deg);
-ms-transform: rotate(-23deg);
-o-transform: rotate(-23deg);
transform: rotate(-23deg);
}

Résultat! Ca a marché, il y a à la fois un angle sur mon texte, mon image et les boutons. Par contre, ça ne règle pas l'écart entre le bouton et le texte. Il y a également un gros cadre vert qui est venu déborder de mes catégories. Et cela a décalé mes liens de sous-forums vers la gauche... (EDIT: ça j'ai pu le corriger en modifiant le codage des sous-forums mais pour le reste, je ne trouve pas...)

Spoiler:

RE-EDIT (ah bah oui on me répond pas mais je tiens au courant de mes efforts Mise en place boutons dans colonne "dernier message" | Résolu 40601244

): j'ai réussi à résoudre l'écart entre le bouton et le texte (j'avais un margin-top dans mon code incline, que j'avais oublié) mais ce satané cadre vert est toujours là (il semble venir de "td.row3.over" vu que je peux modifier ses angles...). Et j'aimerais réhausser l'ensemble aussi pour qu'il rentre comme il faut dans l'image, ce que je n'arrive pas à faire avec des marges

Spoiler:

Hello,

Je n'ai pas tout suivi, mais pour le fond qui dépasse as-tu essayé avec un background-color:none ?

Pour le reste il nous faudrait ton template et ton CSS pour voir ce qu'il en est à propos du positionnement @_@

Désolée, j'étais persuadée d'avoir répondu...

Non le background-color:none ne fonctionne pas (d'autant plus que j'ai déjà un background-image)

Alors voici mon template index_box :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td class="gensmall" align="center" valign="bottom">
<div class="lieens">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
</td>
</tr>

</table>

<center><div class="titrecat">{catrow.tablehead.L_FORUM}</div></center><DIV CLASS="fond_forumline">

<table class="forumline" width="98%" border="0" cellspacing="1" cellpadding="0">


<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="80%">
<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>
<img src="http://img11.hostingpics.net/pics/529147titre1.png">
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>



<tr>




<td class="row1 over" colspan="2" valign="top" width="70%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}" width="100%" height="53">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>



<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="center" align="center">
<div class="forumdesc">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

</span>
</div>
</td>
<td valign="center" align="center">
<div class="listeforums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</td>
</tr>
</table>


</td>



<td class="row3 over" align="center" valign="middle" height="50" width="20%">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> <br /> <div class="gensmall incline">{catrow.forumrow.LAST_POST}</div></td>





<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table></div><center><img src="http://img15.hostingpics.net/pics/608103bascat2.jpg" alt="" /></center>

et mes bouts de CSS qui me semblent concernés jusque là Razz

Code:: td.row3.over
{
background-image:url(http://img11.hostingpics.net/pics/302080message2.png);
background-repeat: no-repeat;
background-position:right;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
margin-right:10px;

height:30px;
width:190px;
background-color:none
-webkit-transform: rotate(-23deg);
-moz-transform: rotate(-23deg);
-ms-transform: rotate(-23deg);
-o-transform: rotate(-23deg);
transform: rotate(-23deg);
}
.incline {

height:30px !important;
width:110px !important;
background-color:#;
margin-bottom:40px;
margin-left:25px;
font-size:9px !important;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
table-layout: fixed;

}

Et avec background-color:transparent; ? Je viens de tester avec firebug, ça marche @_@

Haha ouiiii, en effet ça marche ! Sous Firefox et Chrome ! Merci mon dieu ! \o/ c'est fou ce qu'un truc tout bête peut faire.

Par contre, est-ce que je peux poser une dernière "petite" question, qui nous pose encore un problème sur cette partie "dernier message" ? Mise en place boutons dans colonne "dernier message" | Résolu 3451650135

Mise en place boutons dans colonne "dernier message" | Résolu 3451650135

Ben pose là on verra bien si on a une réponse ^^'

(Par contre moi je vais me coucher là, bonne soirée)

Dernière édition par Jusuchin le Lun 10 Sep 2012, 13:01, édité 1 fois

Bon bah en fait ça en fait deux... J'ai bien mis le code background-color:transparent dans la partie du css de "td.row3.over" mais on vient de se rendre compte à l'instant que lorsqu'on passait la souris sur la partie dernier message, le fond vert réapparaissait...

Et mon autre problème, c'est une histoire de résolution d'écran... Selon sur quel ordinateur je me trouve, je me suis rendue compte que la partie dernier message se décalait totalement sur la droite et ma liste de sous-forums également. Pourtant la largeur globale des catégories ne varie pas selon la résolution ! Je me disais qu'il y avait peut-être un moyen de "fixer" tout ça comme il faut mais je ne trouve pas mon bonheur...

Ce doit être parce-que le background vert est affecté à l'élément lors du survol, il faut donc également préciser qu'il doit être transparent lors du survol (hover), soit dans ton cas :

Code:: td.row3.over, td.row3.over:hover {
...
}

Pour le coup des résolutions... A vrai dire il faudrait jeter un oeil sur ton CSS, ou avoir quelques screenshots (ou le lien vers la page/le forum qui plante pour constater de visu ce qui ne va pas). C'est un peu vague pour le moment comme description (pour moi tout du moins). Je vais regarder ça, je n'avais pas vu le lien vers ton forum Wink

Et j'en profite :

Citation :: Non le background-color:none ne fonctionne pas (d'autant plus que j'ai déjà un background-image)

En fait, les deux propriétés sont compatibles et complémentaires. Si background-image ne fonctionne pas (mauvaise url, navigateur très vieux, ...), la solution par défaut sera d'appliquer la couleur de background-color. Ca sert parfois, dans des codes plus ou moins bien construits, pour s'assurer de la continuité d'un dégradé avec la couleur finale, ...

Merci pour l'astuce, je ne connaissais pas cette propriété ! En effet, ça marche impeccable Razz

Pour le background-color + background-image, merci également de l'info, encore une chose que j'ignorais !

Alors pour montrer deux comparaisons niveau résolution :

Chez moi (ce que je voudrais...) [1366x768]

Spoiler:

Chez mon copain (avant qu'on ait enlevé le fond vert évidemment) [1920*1024]

Spoiler:

Dans les deux cas, j'utilisais le même navigateur (Firefox)

EDIT: Je suis vraiment embêtée par ce problème... J'ai essayé de régler le problème à partir de position:relative dans les deux blocs (la liste des sous-forums et la partie "dernier message") mais rien à faire, il n'y a aucun changement chez mon ami...
J'ai essayé de changer la résolution de mon écran jusqu'à 800x600 et je n'ai remarqué aucun problème. Tout s'affichait et s'alignait comme je le voulais. Je ne comprends pas pourquoi ça ne marche pas sur la plus grande résolution

EDIT2: Alors, j'ai demandé à mon copain de changer également de résolution d'écran, pour voir ce que ça fait avec les résolutions entre la sienne et la mienne... Et ça marche impeccablement, jusqu'à 1600*1024 ! Mais celle au-dessus (c'est à dire la sienne), non, ça ne veut pas.

Hmmm à vrai dire le problème peut avoir des origines multiples. Je vais constater de visu et, lorsque j'aurais trouvé pourquoi, je t'expliquerais ça.

Cependant, il faudra attendre ce soir, je ne suis pas chez moi et n'ai pas vraiment le "matériel" adéquat pour résoudre ce genre de soucis (IE6 et un bloc-note, en théorie j'dis pas, en pratique c'est vraiment galère).
Sauf si une autre âme charitable passe d'ici là et peut se pencher sur ton soucis Wink

Aloooooooors !

Ton problème vient du fait que tu as élaboré ton design sans penser, effectivement, aux différentes résolutions qui existent (notamment, dans notre cas, les ordis 17"). Sauf que le forum, lui, est basé sur un template flexible qui s'adapte à la résolution (autrement dit, quand l'écran est plus grand, le forum est plus large, il n'a pas de taille fixe).

Or donc, tu utilise comme background une image de largeur fixée. En réalité, sur un grand écran, tes éléments ne sortent pas du tableau, mais le tableau est plus grand. Plus grand que le background, qui persiste au centre tandis que le tableau grandit. Pour illustrer, en rouge c'est l'espace qu'occupe réellement ton tableau, qui serait rempli normalement (jai utilisé background-color) :

Mise en place boutons dans colonne "dernier message" | Résolu 52Capture dcran 2012-09-11 204033

A cela il y a plusieurs remèdes :

Rendre ton design flexible, en décomposant tes images en 3 typiquement (le bord gauche, le bord droit et un milieu qui sera utilisé en background qui se répète).
Utiliser des règles CSS avancées telles que les media queries pour dire à ton forum comment se comporter lorsque la résolution augmente. Cependant, cette méthode ne sera pas compatible avec de vieux navigateurs (typiquement, IE7 et 8 ne les prendront pas en compte)

A toi de choisir, la première méthode demandera de travailler un peu ton design (et tu apprendra beaucoup sur les design flexibles) et fonctionnera partout. La deuxième méthode est élégante et puissante, mais elle demande de la dextérité (je m'en charge) et surtout de définir quelle est ta cible (si tu as parmi tes membres une population non négligeable de gens ayant un grand écran et tournant sous IE 7 ou 8, ce n'est pas la meilleure solution).

C'est beaucoup plus compliqué que ce que j'imaginais... J'ai compris l'histoire du tableau, pas de problème!

En ce qui concerne les solutions, je suis bien embêtée... Car c'est vrai qu'il n'y a pas tant de personnes qui ont un si grand écran et je pense encore moins pour le coup, qui utilise IE (qui plus est, une ancienne version). Mais si par malheur, un membre dans ce cas-là s'inscrivait ou voudrait s'inscrire, ça m'embêterait de le forcer à installer des navigateurs qu'il ne voudrait pas forcément.
Du coup, je pense que je vais devoir me rabattre sur le design flexible mais je vais bien avoir besoin d'aide...

Ben... J'ai pas tout suivi, mais il ne suffit pas de fixer la largeur des composants une bonne fois pour toutes ? O.o

T'es pas drôle 'Christa, pour une fois qu'on allait partir dans l'élaboration d'un vrai design flexible sur un forum de membre... Mise en place boutons dans colonne "dernier message" | Résolu 536843

Mise en place boutons dans colonne "dernier message" | Résolu 536843

Bon, oui bien sûr, on peut très bien se passer des media queries et d'appliquer le "correctif" à toutes les résolutions (puisque ça ne changera rien du point de vue visuel pour les petites résolutions qui fonctionnaient déjà).

En fait, les media queries sont des règles CSS avancées qui permettent de déclarer des propriétés CSS en fonction des caractéristiques du media utilisé (par exemple, en fonction de la résolution). Ca peut permettre de faire des choses très sympa, mais il y a encore un nombre non négligeable de gens qui naviguent sur IE 8 voire 7, ce qui ne facilite pas les choses.
Voilà, j'ai fait mon prof, enchainons...

Voici qui devrait mettre fin à ton calvaire, ces deux petites lignes CSS commentées :

Code:: .fond_forumline {
width: 840px; /* Taille de ton background, on fixe celle-ci */
margin: auto; /* Centre horizontalement l'élément pour éviter des décalages indésirables */
}

N'hésites pas à nous faire savoir si ça fonctionne ou non (mais bon, a priori, ça devrait marcher).

Je sens une de ces déceptions... Razz

Mais sinon... Ca marche, mon dieu, ça marche ! On a bien verifié sur tous les écrans et résolutions, ça marche ! Ca m'énervait tellement ce problème...

Merci beaucoup, beaucoup, beaucoup ! Merci à +∞ Mise en place boutons dans colonne "dernier message" | Résolu 306373

Mise en place boutons dans colonne "dernier message" | Résolu 306373

Bonsoir !
Merci d'avoir prévenue que le sujet était résolu. ^^

Bonne soirée, Mise en place boutons dans colonne "dernier message" | Résolu 90719

Mise en place boutons dans colonne "dernier message" | Résolu

Mise en place boutons dans colonne "dernier message" | Résolu

Sujets similaires

Sujets similaires

Partenaires Or