Sujets similaires

Dernière édition par Corben Dallas le Mar 04 Jan 2011, 13:08, édité 2 fois

Bonjour ou bonsoir plutôt Smile

J'ai fait ce premier tuto : STATISTIQUES DE FORUM AFFICHÉES DANS LA DESCRIPTION DE CEUX-CI

ça donne ça, nickel : Mon forum

Si ensuite, je fais ce tuto : MODIFIER L'APPARENCE DES TITRES DES CATÉGORIES c'est la banqueroute, ça met en première colonne : "dernier message" et ça écrabouille la dernière colonne de droite, comme sur ce screen :

https://i.servimg.com/u/f61/09/01/83/41/sans_t13.jpg

On dirait que ça inverse nom+largeur de la premiere et derniere colonne. Je suis sur que c'est pas grand chose mais quand on sait pas lire le code...

***

Mon template index_box avec prise en compte des deux tutos :

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

<span class="gensmall">{LAST_VISIT_DATE}

{CURRENT_TIME}

</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<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>
</td>
</tr>
</table>
<div class="titre_categorie">{catrow.tablehead.L_FORUM}</div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>


<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="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>


<tr>

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

<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">Contient <b>{catrow.forumrow.POSTS}</b> messages dans <b>{catrow.forumrow.TOPICS}</b> sujets.</span></td></tr></table>
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">

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

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>

<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>


<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>

</tr>


<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><img src="{SPACER}" alt="" height="5" width="1" />

Nota : j'utilise Chrome et Firefox.
Et je paye en nature celui qui trouve là où le bas blesse Very Happy

Bonjour,

Je tiens à préciser que depuis hier, la couleur des titres est réservée à la modération et à l'administration. J'ai donc retiré la couleur.

Sinon je vais essayer de t'aider. D'abord, je te suggère de refaire les tutos pour voir si le problème ne vient pas seulement d'une erreur de manipulation. de mon côté, je vais analyser ton template pour voir où est l'erreur :DD

Pardon pour la couleur..
Et un grand merci par avance d'essayer de m'aider, j'avoue que je n'ai pas avancé d'un iota. je n'arrive pas à comprendre comment est bâti un tableau. (Il me semble que s'en est un non?)

Ouep c'est bien un énorme tableau. Pour bien comprendre le template, il faut surtout comprendre que c'est un tableau.
Je ne sais pas si tu l'as lu mais le cours élémentaire 1 du HTML porte sur les tableau. C'est un très bon cours~
Sinon, il y a le site du zéro qui explique très bien. C'est là que j'ai appris~

Je connais le zero, oui, c'est un peu l'histoire du code et moi Very Happy

Plus sérieusement, j'ai déjà refait les tutos, et j'ai l'impression que les codes s'imbriquent, et c'est ce qui pose problème. A priori...

*vient de tester*

Effectivement c'est bizarre
Je vais essayer d'arranger tout ça :DD

Serais-je bordélique Very Happy

Sujet: Re: Problème avec template index_box Dim 02 Jan 2011, 23:55

Je crois que j'y suis arrivée.
http://iko-test.forumactif.com/forum

J'ai du virer la colonne des derniers messages pour que ça marche, mais les colonnes étaient toujours écrapouties sur le côté. Alors à quelque part dans le template, la colonne de la description a une largeur de 100%, j'ai enlevé le 100% et voilà~

Est-ce que c'est bien ça? oo

Si oui:

Sujet: Re: Problème avec template index_box Lun 03 Jan 2011, 09:06

Je viens de le tester : http://munuroetest.jdrforum.com/

Il n'y a plus de nom de colonne, mais je ne vois pas en quoi cela pourrait être gênant.
En fait, c'est pas mal du tout, il faudrait juste que j'arrive à fixer une largeur pour la colonne de derniers messages.
Peux-tu m'aider encore sur ce dernier détail ?

Sinon, sous Chrome, je n'ai pas réussi à arrondir les coins des catégories :

Code:: /*--- Mettre dans des encadrés le titre des catégories ---*/
a.forumlink{
-webkit-border-radius: 7px 7px 7px 7px;/*--- compatibilité chrome ---*/
-moz-border-radius: 7px 7px 7px 7px;
font-weight: lighter;
background-color: #2C3749;
border-bottom: 5px double #3F4251;
width:250px;
display:block;
text-align: center;
}

En tout cas, un premier merci, parce que le temps qu'on consacre aux autres sans rien attendre en retour, si ce n'est un modeste "merci", c'est rare.

Sujet: Re: Problème avec template index_box Lun 03 Jan 2011, 12:12

Ajoute

Code:: border-radius: 7px;

Aussi xD
C'est le code des arrondis pour les navigateurs qui marchent avec le CSS3, donc Opera, Chrome (mais normalement le webkit marche aussi) et probablement IE9~
Et quand que les 4 côtés ont les mêmes arrondis, tu n'est pas obligé de mettre 7px 4 fois. Juste le mettre 1 fois et ça va le faire sur les quatres coins :DD
Comme ça:

Code:: -moz-boder-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;

Sinon, pour ton template, c'est normal qu'il n'y ai plus de nom de colonne, sinon il y aurait eu un gros trou bizarre ._. et en plus le nom s'en va à gauche le plus possible donc c'était difficile de le mettre (enfin pour moi xD)
Pour mettre une largeur fixe... tu vois, y'a cette partie-là dans le template:

Code:: <td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>

C'est celle-là, la colonne des derniers messages.
Si tu veux que celle-là aie une largeur fixe, tu dois y mettre un width. Je ne sais pas si tu sais comment, mais dans tout les cas je vais le dire xD
Donc y'a plusieurs trucs dans la balise td au début, genre class, align, valign et height. C'est à cet endroit là que tu vas ajouter:

Code:: width="XXpx"

Tu peux aussi le mettre en pourcentages si tu en a envie, mais une largeur en pixel assure que la colonne va être d'une largeur fixe et pas de 15% de la largeur de ton forum si elle change avec les résolution d'écrans (donc si tu as une largeur de fo en % xD)
Donc tu changes le XX pour le chiffre que tu veux~

Et de rien, ça fait vraiment plaisir de t'aider :DD J'en ai plein de temps à consacrer aux autres, et j'aime ça ♥

Sujet: Re: Problème avec template index_box Lun 03 Jan 2011, 14:32

Pour la largeur, ça marche Smile

Donc un grand merci, ça fait plaisir d'avancer comme ça. T'es géniale.

Par contre, ça marche pas pour arrondir les noms de catégorie, je te mets mon CSS entier, peut-être y a t-il une erreur autre part qui pourrait interférer ?

C'est un peu fouillis... Il y a des choses en tests, d'autres à supprimer... bref, je te laisse découvrir :

Code:: /*--- Position du forum ---*/
body {
background-repeat: no-repeat;
webkit-background-position: top left;
background-position: top left;
}

/*--- Espace à gauche du forum ---*/
.bodyline {
position: absolute;
left: 25px;
right: 545px;/*--- Espace à droite du forum (uniquement pour chrome) ---*/
}

/*--- Affichage des sous-forums ---*/
.vignettes
{-moz-border-radius:7px;
-webkit-border-radius: 7px;/*--- compatibilité chrome ---*/
font-size: xx-small;
background-color: #407da8; /*FOND*/
border: 1px solid #5ba5d9;
padding: 1px; /*ESPACER DES BORDS*/
padding-right:3px;
padding-left:3px;
padding-bottom: 3px;
padding-top:1px;
}

/*--- Affichage du contour des avatars ---*/
.postdetails.poster-profile a img {
-webkit-border-radius: 10px;/*--- compatibilité chrome ---*/
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #FFFFFF;
}

/*--- Mettre dans des encadrés le titre des catégories ---*/
a.forumlink{
-moz-boder-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
font-weight: lighter;
background-color: #2C3749;
border-bottom: 5px double #3F4251;
width:250px;
display:block;
text-align: center;
}

a {font-variant: small-caps;}/*--- Affiche tous les titres en Majuscule ---*/

/*--- Mise en forme des CITATIONs ---*/
.quote{
border-left:1px solid #000000;/* couleur du bordure* px = épaisseur bordure/
border-right:1px solid #000000;/* couleur du bodure*/
border-top:1px solid #000000;/* couleur du bodure*/
border-bottom:1px solid #000000;/* couleur du bodure*/
-moz-border-radius:10px 10px 1px 1px;/* chaque valeur correspond à un coin arrondi de ta citation */
-webkit-border-radius:10px 10px 1px 1px;/* les côtés sont arrondis sous CHROME*/
-border-radius:10px 10px 10px 10px;/* les côtés sont arrondis sous CHROME*/
background-color:#FFFFFF;couleur du fond de ta citation
}

/*--- Mise en forme des CODEs---*/
.code{
border-left:1px solid #000000;/* couleur du bordure* px = épaisseur bordure/
border-right:1px solid #000000;/* couleur du bodure*/
border-top:1px solid #000000;/* couleur du bodure*/
border-bottom:1px solid #000000;/* couleur du bodure*/
-moz-border-radius:10px 10px 1px 1px;/* chaque valeur correspond à un coin arrondi de ta citation */
-webkit-border-radius:10px 10px 1px 1px;/* les côtés sont arrondis sous CHROME*/
-border-radius:10px 10px 10px 10px;/* les côtés sont arrondis sous CHROME*/
background-color:#FFFFFF;couleur du fond de ta citation
}

/*--- Mise en forme barre de navigation ---*/
.navi {
position: absolute;
height: 25px;
left: 15px;
background-color: #407da8; /*FOND*/
border: 1px solid #5ba5d9;
text-shadow: 3px 0px 0px #000000; /*OMBRAGE*/
padding: 0,5px; /*ESPACER DES BORDS*/
-moz-border-radius: 5px; /*ARRONDIR LES COINS*/
-webkit-border-radius: 5px; /*ARRONDIR LES COINS*/
}

/*--- Arrondir les coins des catégories ---*/
.forumline{
-moz-border-radius-topright: 7px;
-webkit-border-radius: 0px 7px 0px 0px;/*--- compatibilité chrome ---*/
}

.onglet/*--- PA avec onglet ---*/
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}

.titre_categorie /*--- Test Nom des catégories ---*/
{
background: #405361; /*fond*/
-moz-border-radius-topleft: 50px; /*arrondi angle gauche*/
-moz-border-radius-topright: 50px; /*arrondi angle droit*/
-webkit-border-radius-top-left: 50px; /*arrondi angle gauche*/
-webkit-border-radius-top-right: 50px; /*arrondi angle droit*/
margin-top: 10px; /*ne pas modifier*/
margin-bottom: -10px; /*a modifier selon vos goûts*/
text-align: center; /*alignement du texte*/
height: auto; /*hauteur à modifier selon vos goûts*/
width: 430px; /*largeur à modifier selon vos goûts*/
margin-left: 320px; /*pour déplacer la position des titres des catégories*/
padding-top: 1px !important; /*espace entre la bordure et le texte*/
padding-bottom: 5px !important; /*espace entre la bordure et le texte*/
-moz-text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
-webkit-text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
}

a:hover /*--- Ombre sous les Liens ---*/
{
text-shadow: 4px -4px #306f9c;
}

a /*--- Supprime le soulignement des Liens---*/
{
text-decoration: none !important;
}
a:hover /*--- Supprime le soulignement des Liens au survol---*/
{
text-decoration: none !important;
}

a:hover /*--- Espace les lettres des liens au survol---*/
{
letter-spacing : 2px; }

/*--- Test Boite type WIDGET a supprimer---*/
.boite2{
position: absolute; /* position de boite */
top: 350px; /* position à partir du haut */
right: 10px; /* position à partir de la droite */
width: 170px; /* largueur de la boite */
background-color: #b2cbe0; /* couleur de fond */
padding: 8px; /* marge intérieure */
-moz-border-radius:6px; /* coins arrondis */
-webkit-border-radius:6px; /* coins arrondis */
border-radius:6px; /* coins arrondis */
}

.titre{
background-color: #3479b4; /* couleur de fond */
color:#b2cbe0; /* couleur de la police */
font-weight:bold; /* épaisseur de la police en gras */
font-size:11px; /* taille de la police */
text-align : center; /* alignement du texte */
padding: 6px; /* marge intérieur */
margin-bottom: 5px; /* marge extérieure pour moi 5px en bas */
-moz-border-radius:6px; /* coins arrondis */
-webkit-border-radius:6px; /* coins arrondis */
border-radius:6px; /* coins arrondis */
}

.cadre{
text-align: left; /* alignement du texte */
color:#3479b4; /* couleur du texte */
font-size:11px; /* taille du texte */
background-color: #cfe3f4; /* couleur du fond */
padding: 6px; /* marge intérieur */
-moz-border-radius:6px; /* coins arrondis */
-webkit-border-radius:6px; /* coins arrondis */
border-radius:6px; /* coins arrondis */
}

.ascenseur {/*--- Bouton ascenseur---*/
position: fixed; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/
top: 50px; /*--- On le place à 50 px du haut de l'écran ---*/
right: 0px; /*--- On le place à 0px de la gauche de l'écran ---*/
background-color: #A7CC42; /*--- On donne une couleur au fond ---*/
-moz-border-radius: 0px 35px 35px 0px; /*--- On arrondit les bords ---*/
-webkit-border-radius: 0px 35px 35px 0px;
border-radius: 0px 35px 35px 0px;
}

.lnrbox/*--- Test Chatbox pour la personnaliser---*/
{
position: fixed;
bottom: 50px;
left: 0px;
background-color: #A7CC42;
background-position: center;
border: 1px solid #COULEUR;
border-bottom: 4px solid #COULEUR;
z-index: 999;
}

#chatbox_header .catBottom .cattitle /*--- Couleur du nom de la chatbox---*/
{
color: #A7CC42;
}

body.chatbox /*--- Couleur du fond de la chatbox---*/
{
background-color: #2C3749;}

/*--- Profil Affiché/Masqué ---*/

.profil1{
background-image: url('adresse de l'image');
padding: 7px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border: 2px solid #000
}

(Ah tiens, je sais pas pourquoi, mais ma flèche "haut" ne fonctionne pas avec Chrome. Et ça, je comprends pas, surtout que "Bas" fonctionne... )

Sujet: Re: Problème avec template index_box Lun 03 Jan 2011, 17:19

Le code que tu m'as donné marche avec les arrondis xD a.forumlink c'est pour les noms des forums genre Les bas-fonds, etc.

J'ai trouvé ça:

Code:: .titre_categorie /*--- Test Nom des catégories ---*/
{
background: #405361; /*fond*/
-moz-border-radius-topleft: 50px; /*arrondi angle gauche*/
-moz-border-radius-topright: 50px; /*arrondi angle droit*/
-webkit-border-radius-top-left: 50px; /*arrondi angle gauche*/
-webkit-border-radius-top-right: 50px; /*arrondi angle droit*/
margin-top: 10px; /*ne pas modifier*/
margin-bottom: -10px; /*a modifier selon vos goûts*/
text-align: center; /*alignement du texte*/
height: auto; /*hauteur à modifier selon vos goûts*/
width: 430px; /*largeur à modifier selon vos goûts*/
margin-left: 320px; /*pour déplacer la position des titres des catégories*/
padding-top: 1px !important; /*espace entre la bordure et le texte*/
padding-bottom: 5px !important; /*espace entre la bordure et le texte*/
-moz-text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
-webkit-text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
}

Et j'ai compris xD
Pour des arrondis sur un seul côté, pour Firefox c'est par exemple -moz-border-radius-topleft. Maiiiis pour webkit c'est différent, je crois que c'est genre -webkit-border-topleft-radius. alors, pour faire simple, on va mettre comme tu as fait pour tes autres arrondis:

Code:: .titre_categorie /*--- Test Nom des catégories ---*/
{
background: #405361; /*fond*/
-moz-border-radius: 50px 50px 0px 0px;
-webkit-border-radius: 50px 50px 0px 0px; /*compatibilité Chrome*/
margin-top: 10px; /*ne pas modifier*/
margin-left: 320px; /*pour déplacer la position des titres des catégories*/
margin-bottom: -10px; /*a modifier selon vos goûts*/
text-align: center; /*alignement du texte*/
height: auto; /*hauteur à modifier selon vos goûts*/
width: 430px; /*largeur à modifier selon vos goûts*/
padding-top: 1px !important; /*espace entre la bordure et le texte*/
padding-bottom: 5px !important; /*espace entre la bordure et le texte*/
-moz-text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
-webkit-text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/
}

J'ai aussi rejoint les trois margins pour que ça soit un peu plus clair~

Ça devrait marcher =D

Sujet: Re: Problème avec template index_box Lun 03 Jan 2011, 17:36

Pour info, les trois types de fonctions pour faire les coins arrondis sont:

Code:

/*--- Pour un côté spécifique ---*/
-webkit-border-bottom-left-radius: TAILLEpx;
-webkit-border-bottom-right-radius: TAILLEpx;
-webkit-border-top-left-radius: TAILLEpx;
-webkit-border-top-right-radius: TAILLEpx;

border-bottom-left-radius: TAILLEpx;
border-bottom-right-radius: TAILLEpx;
border-top-left-radius: TAILLEpx;
border-top-right-radius: TAILLEpx;

-moz-border-radius-bottomleft: TAILLEpx;
-moz-border-radius-bottomright: TAILLEpx;
-moz-border-radius-topleft: TAILLEpx;
-moz-border-radius-topright: TAILLEpx;

Voilou =D

EDIT Ikø' : MERCIIII J'avais oublié *o*

Sujet: Re: Problème avec template index_box Mar 04 Jan 2011, 10:00

Bonjour,

Votre demande est-elle toujours d'actualité ?

N'oubliez pas, d'utiliser l'icône Problème avec template index_box Resolu3

au titre de votre sujet lorsque c'est le cas.

Sujet: Re: Problème avec template index_box Mar 04 Jan 2011, 13:07

Ikø' je te remercie sincèrement pour ton aide, et, si tu le permets, je te solliciterais probablement pour d'autres soucis que je n'ai pas encore provoqués Very Happy

Je suivrai la ligne de conduite du forum pour se faire, bien sur.

Encore merci !

Sujet: Re: Problème avec template index_box Mar 04 Jan 2011, 13:09

Très bien, je classe (:

Problème avec template index_box

Problème avec template index_box

Sujets similaires

Sujets similaires

Partenaires Or