Sujets similaires

Bonsoir

J'aurais besoin de votre aide car j'ai un petit soucis avec mon forum.
Beaucoup de membres se plaignent des catégories, chez eux elles ne sont pas centrées. Mais moi qui utilise Firefox si. Il y aurait-il une solution pour résoudre ce soucis esthétique.
Voici notre lien : http://turn-cup-speak.forumgratuit.org/

J'en profite pour poser une question, est-ce qu'il y aurait un service de commande disponible pour moi ici ? Car je suis en attente d'un nouveau design et j'aurais besoin d'un nouveau QEEL en image. Faut-il faire une personnalisation ou une commande ?

Cordialement.

Bonjour !

Citation :: est-ce qu'il y aurait un service de commande disponible pour moi ici ?

Tu as en principe lu et approuvé le règlement en t'inscrivant sur CSSActif, tu connais donc la réponse Wink

Pour centrer tes catégories, applique un margin:auto; à la classe .forumline. Il te faudra faire de même pour tous les images d'illustration en haut et en bas des catégories également. Ca aurait été simple si tu avais utilisé des classes mais vu que c'est en dur dans le HTML, il te faudra aller fouiller dans tes templates.

Bonjour,
Oui pardon, ce fut un oubli. Et merci de ton aide Wink

Citation :: ll te faudra faire de même pour tous les images d'illustration en haut et en bas des catégories également.

Oui mais ou exactement? Pour pas que je ne fasse de bêtises ^^

Ah bah tu sais quel code tu as utilisé pour ces images là, non ? Faut juste éditer le style avec la propriété que je t'ai donnée.

(Ou mieux, tant qu'à faire, remplacer tous ces <div style="/*plein de propriétés CSS*/"> par <div class="categorieHaut"> et puis définir une classe .categorieHaut dans le CSS avec tout ce qui était dans le style. Même chose pour une très probable classe .categorieBas)

Je n'ai absolument rien compris, excuses moi :/ Tu pourrais mieux m'expliquer. Encore désolée

Bonsoir,

Ce n'est pas grave, tu es là pour apprendre.

Pour commencer, quel code as-tu utilisé pour afficher une image en haut et en bas de tes catégories ?

Bonsoir ^^
Tiens j'avais posté ma réponse mais apparement je n'ai pas du enregistrer :O
Bref, je te disais que à la base c'était ma codeuse qui avait tout mis en place dans le template index_box :

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

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</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><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

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

<table class="forumline" width="884px" border="0" cellspacing="1" align="center" cellpadding="0">
<div align="center" style="width: 884px; height: 194px; background:url('http://files.getwebb.org/files/7a/b4/f2/b8027bd12f6191a5004e673a86f62c5740/source.png');">{catrow.tablehead.L_FORUM}</div>


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

</td>
<td colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="60%" 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>
<div class="desc"><span class="genmed"><div class="descriptionsforum">{catrow.forumrow.FORUM_DESC}</div></span></div><br>
</h{catrow.forumrow.LEVEL}> <span class=sousforums>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<br><br>
<span class="gensmall">

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

</span><br></td>
<td colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="20%" height="50">
<div class="statsfow"><span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>{catrow.forumrow.POSTS}</b> messages</span></div><br>
<div class="lastfow"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div><br><br>
</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><div align="center" style="width: 884px; height: 194px; background:url('http://files.getwebb.org/files/a7/2b/51/c718f93f4e714129ce83a3fb10821f1ef0/source.png');">{catrow.tablehead.L_FORUM}</div><img src="{SPACER}" alt="" height="5" width="1" />

J'ai a peu près repéré le code où se situe l'image, enfin je crois :p

Code:: <div align="center" style="width: 884px; height: 194px; background:url

Voui c'est bien ça ! Et il y en a un autre en bas Wink

Partant de là, et sachant ce que j'ai dit plus haut, tu devrais avoir une idée de ce qu'il faut faire, non ?

Pour rappel :
• Dans l'idéal, il faut que tu crées dans ta feuille de style CSS une classe pour chaque "image" en y mettant les propriétés placées dans l'attribut style, puis tu remplaces style="/* plein de propriétés CSS */" par class="nomDeTaClasse"
• Et tu n'as plus qu'à rajouter margin:auto; aux propriétés CSS en question Wink

(Et ta codeuse ne peut pas le faire elle-même ?)

Ah pour une fois que je trouve ^^
Et non je ne sais pas comment faire :S

(Euh non car elle est partie sans nous laisser aucune explication, on s'est débrouillée comme on a pu du coup :/)

J'ai édité mon message précédent pour clarifier Wink

Comme CSSA est basé sur l'apprentissage, j'essaie au passage de te pousser à apprendre les bases du CSS pour que tu puisses faire ce genre de modifications seule à l'avenir.

Oui mais comme je te l'avais dit sur un autre sujet je suis plus habituée à changer les images sur le template, on ne peux pas laisser ainsi ?

C'est toi qui vois, ça impose quand même à chaque fois de fouiller dans le template pour modifier, avec risque de planter le forum en éditant un truc de travers, et accessoirement ça impose d'avoir impérativement un accès fondateur pour le faire, mais si tu préfères comme ça, tant mieux pour toi Wink

Je te donne juste mon conseil de codeuse sur la question : pour un site (design) facile à maintenir, on ne met jamais de CSS directement dans le HTML.

Bon alors expliques moi car je ne comprend rien mdr
Et puis je garde tout mes codes dans des blocs notes ^^
Tu veux bien m'aider tout de même ?

Je l'ai déjà fait XD Tu gagnerais à aller lire ce cours de CSS par Orange Wink

Mais sinon, reprenons les choses plus en détail.

Pour un titre de catégorie, tu as ce code :

Code:: <div align="center" style="width: 884px; height: 194px; background:url('http://files.getwebb.org/files/7a/b4/f2/b8027bd12f6191a5004e673a86f62c5740/source.png');">{catrow.tablehead.L_FORUM}</div>

Je pense que tu repères du premier coup d'oeil l'attribut style dont je te parlais.

Récupère toutes les propriétés CSS qui s'y trouvent (entre les guillemets, après le signe = ) et va dans ta feuille de styles CSS pour définir une nouvelle classe.

Tu sais comment s'écrit une classe CSS en principe : .nomDeTaClasse { /* tes propriétés ici */ }
Tu mets toutes les propriétés qui étaient dans l'attribut style là où j'ai écrit "tes propriétés ici" (évidemment sans les deux symboles /* et */ vu que ce sont des commentaires)

Et puis dans ton HTML, tu remplaces style="..." par class="nomDeTaClasse"

Et pour le centrage du bloc... c'est exactement la même chose que ce que tu as fait pour .forumline Wink

Ca te parait plus clair comme ça ?

Oui d'accord je vais essayer mais sinon, si jamais je n'arrive pas en CSS tu pourrais me dire comme je fais sans ça, je rajoutes quoi dans le template ?

Ben, tu rajoutes margin:auto; dans les styles que j'ai mentionnés O_o

Déjà fais mais les images sont décalées :/ Désolée d'être aussi embêtante mais je suis complétement nulle en codage :/

Je ne vois pas le code sur ton forum.

Montre moi ce que tu as fait et je te dirai où est l'erreur.

Eh bien je suis allée dans mon CSS et j'ai modifier le forumline car il n'y avait pas auto avant

Bah sur mon écran tes forums sont centrés, donc ça c'est fait. On parle des titres maintenant '_'

Oui des images + titres, ils ne sont pas centrés avec la catégorie, tu veux un imprim écran ?

Non, j'ai des yeux pour voir, tout va bien XD

Ce que j'essaie de te faire comprendre, c'est qu'ajouter margin:auto à la classe .forumline c'était pour centrer les catégories. Ça tu as compris comment le faire de ce que j'en vois.

Maintenant ce qu'il te faut faire, c'est ajouter cette même propriété margin:auto aux blocs contenant le haut et le bas de tes forums. Je t'ai expliqué trois fois la marche à suivre, je ne t'aiderai pas davantage avant d'avoir vu tes propres essais Wink

Ok bon je ne suis pas sûre de moi car j'ai franchement rien compris :/

Dans le CSS je mets :

Code:: .catégories2 {
align: center;
width: 884;
height: 194px;
background:url('http://files.getwebb.org/files/7a/b4/f2/b8027bd12f6191a5004e673a86f62c5740/source.png');
}

Et dans le Template

Code:: <div class="catégories2"></div>

C'est presque ça, il y avait quelque chose avant le </div> qu'il ne faut pas que tu oublies.

Accessoirement, on ne met jamais d'accent (ni d'espace) à un nom de classe !

Il ne manque plus qu'à rajouter le margin:auto; @_@

D'accord mais comment je fais ?
Je dois faire ça deux fois ? Car il y a deux images de catégories, en haut et en bas :/
Je n'ai rien compris, tu peux me guider stp

Catégories non centrées ?

Catégories non centrées ?

Sujets similaires

Sujets similaires

Partenaires Or