Besoin d'un expert en CSS

[geokdo]

Bonjour,

Voici le lien du forum type ==> http://girondingue.creazioneforum.com/forum.htm
J'aimerais pouvoir faire pareil que sur le forum lorsqu'on clique sur le nom d'un sous-forum, l'image change. J'aimerais aussi savoir comment faire pour qu'il y est 4 sous-forum dans un seul cadre "La Buvette" mais qu'après les sous-forums soit bien séparés.

Merci !

[Somewhere]

Bonjour

Pour votre première question, il s'agit simplement de mettre un background-image. (qui est différente quand on passe au survol)
Ca donne un truc dans ce style dans ta feuille de style CSS :

Code:

.titreforum {
background-image: url("LIEN_DE_TON_IMAGE.jpeg");
border : 1px solid black;
}

.titreforum:hover {
background-image: url("LIEN_DE_TON_IMAGE_AU_SURVOL.jpeg");
border : 1px solid black;
}


Pour que cela fasse effet, il faut que tu ailles dans Catégories et Forums, que tu choisisses chaque sous-forum où tu désires avoir l'effet et dans le titre, tu mets comme cec :

Code:

<div class="forumname">Titre de ton sous forum</div>

Concernant ta deuxième question, il s'agit des catégories composites dont voici le tuto : [link]

Cordialement, Somewhere

[geokdo]

Merci beaucoup, mais comment faire pour centrer le sous-titre et le mettre dans la barre arrondie ?

[Somewhere]

Re =)

il faut que tu ajoutes ceci pour centrer le texte :

Code:

text-align: center;

et cela pour les bords arrondis :

Code:

-moz-border-radius:15px;

*Change la valeur pour avoir un arrondi comme tu le souhaites

Somewhere.

[geokdo]

Je bloque totalement avec les fonds de titre, ça ne marche pas :|

[Somewhere]

Qu'est-ce qui ne marche pas ? Tu ne vois pas l'image en fond ?

Fais voir ce que tu as mis dans ta feuille CSS (uniquement la partie ayant trait au titre du sous-forum)

[geokdo]

Bah j'ai testé en mettant les images en gif, ça marche pas, alors j'ai mis la première en jpg et la deuxième en gif, mais toujours rien.

Code:


.titreforum {
background-image: url("http://www.arles-avignon.com/users/1715/22/71/48/album/0110.jpg");
text-align: center;
-moz-border-radius:15px;
border : 2px solid black;
}

.titreforum:hover {
background-image: url("http://www.arles-avignon.com/users/1715/22/71/48/album/gif11.gif");
text-align: center;
-moz-border-radius:15px;
border : 2px solid black;
}

[Somewhere]

Tu as bien pensé à ajouter à chaque sous-forum ceci ?

Code:

<div class="titreforum">....</div>

[geokdo]

Oui. Par contre tu m'avais dis de mettre

Code:

<div class="[b]forumname[/b]">Titre de ton sous forum</div>

. Ça peut changer un truc ?

[Somewhere]

Oui, je m'étais trompé

Mais on va reprendre de zéro si tu le veux bien afin de faire quelque chose de beaucoup moins compliqué
Retourne dans ton CSS et enlève tout ce que je t'ai donné (c'est à dire les codes pour .titreforum et .titreforum:hover)
Enlève aussi les <div class="..."> que tu as pu mettre dans les titres de tes sous-forums.

Voilà, maintenant, on recommence Pourquoi ? Parce qu'on m'a fait remarquer (clin d'oeil à celle qui se reconnaîtra ) qu'il existe déjà une balise toute prête pour les titres de sous-forums qui s'appelle "forumlink". Et grâce à ça, nul besoin pour toi de rajouter les <div class="..."> dans chaque titre de sous-forum. C'est plus léger et moins prise de tête

Donc, c'est reparti Essaye avec ce code :

Code:

a.forumlink:link, a.forumlink:visited {
background-image: url("http://www.arles-avignon.com/users/1715/22/71/48/album/0110.jpg");
background-position: right;
text-align: center;
color: #ffffff;
display: block;
-moz-border-radius:10px;
}
a.forumlink:hover, a.forumlink:hover:visited {
background-image: url("http://www.arles-avignon.com/users/1715/22/71/48/album/gif11.gif");
background-position: right;
color: #000000;
text-align: center;
display: block;
-moz-border-radius:10px;
}

Par contre, j'ai ajouté un "background-position: right;", comme tu peux le voir. Tes images sont plutôt larges et comme le logo est situé tout à droite, je fais en sorte que l'image puisse être vue, c'est pour ça que je demande à ce que l'image de fond nous montre le côté le plus à droite

Voilà, normalement, ça devrait fonctionner Dis le moi si tu as des difficultés et encore désolé pour ce changement de code en cours de route.

PS ; à l'avenir, évite de mettre "Je veux comme ce forum" en titre de sujet, ça peut être considéré comme du plagiat.

Cordialement, Somewhere.

[geokdo]

Merci d'essayer de m'aider, mais ça veux toujours pas fonctionner

[Somewhere]

Ca fonctionne super bien sur mon forum de test, pas de raison que ça ne fonctionne pas sur le tien

Peux-tu montrer le lien de ton forum ou de ton forum de test afin que je vois le résultat que tu as eu ?

[geokdo]

==> http://www.arles-avignon.com/index.htm

[Somewhere]

Ah oui, tu n'as aucun changement

Je peux voir ta feuille CSS ?

[geokdo]

Je t'ai envoyé un MP.

[Somewhere]

Répondu Normalement le problème est résolu si je ne me trompe pas
(juste oublié de changer les anciens codes donnés au début du sujet par les nouveaux)

[geokdo]

Merci beaucoup de ta patience. Tu remercieras aussi stp "l'anonyme" qui t'as fait connaitre l'existence du code.