Bonsoir =)

Oui c'est encore moi, je sais je suis pénible =) Merci en tout cas de votre gentillesse pour résoudre cette affaire !

Alors, alors, j'ai suivit l'autre jour un le tutoriel pour mettre les liens des sous-forums sous forme d'onglets. :: Ce tuto

Je me demandais par contre comment peut-on faire pour mettre ces même onglets, au lieu d'en dessous le texte de description, au dessus, juste sous le lien des titres de forums comme cela se fait parfois ? J'ai penché pour un template à déplacer, mais j'avoue ne pas savoir vraiment lequel =)

Voici les codes :
Celui du forum menant vers les sous-forums avec onglets :

Code:

<div align="right">
<a class="vignettes" href="http://themes-de-liv.forumactif.org/metaphories-contemplatives-f8/">Metaphories Contemplatives</a>
<a class="vignettes" href="http://themes-de-liv.forumactif.org/delices-sanguinolants-f9/">Délices Sanguinolants</a></div><div class="laligne"></div>

Celui du CSS en question :

Code:

.vignettes
{-moz-border-radius:6px;
background-color: #383838;
padding-right:5px;
padding-left:5px;
padding-bottom: 3px;
padding-top:3px;}

.laligne
{border-bottom : 3px solid #383838;}

J'ai également une autre question sur ce genre de code pour encadrer une description ::

Spoiler:

que l'on trouve sur Ce topic

J'aimerais pouvoir, comme dans l'exemple, placer une image (avec un rollover dessus) et que le texte de la description soit aligné par rapport à l'image, c'est à dire que toutes les phrases ne dépassent pas du dessous de cette image. J'avoue ne pas non plus comprendre comment on peut faire ça !

Tous ces essais sont visibles sur mon forum de test si besoin ::
http://themes-de-liv.forumactif.org/index.htm


Encore merci pour votre aide !

Coucou !

Alors les deux topics étant de moi, je me permets de t'aider xD.

Donc, pour mettre tes vignettes au dessus de ta description, c'est tout simple en fait : suffit juste de mettre le code comme ceci :

Code:

<div align="right">
<a class="vignettes" href="LIEN SOUS FORUM">NOM DU SOUS FORUM/TOPIC</a>
<a class="vignettes" href="LIEN SOUS FORUM">NOM DU SOUS FORUM/TOPIC</a>
</div>
<div class="description">TA DEscriptION DE FORUM</div>

Et tu ajoutes le CSS qui va avec :

Code:

 .vignettes
{-moz-border-radius:7px;
background-color: #TA COULEUR;
padding-right:10px;
padding-left:10px;
padding-bottom: 3px;
padding-top:3px;}

.description
{background-color: #TA COULEUR;
border: 1px solid #TA COULEUR;}

--------
Par contre, pour faire comme sur le screen ; mettre une image à côté d'un texte, il faut faire une sorte de tableau (et associer la class "description" au tableau en entier)

Code:

<div align="right">
<a class="vignettes" href="http://">Vignette 1</a>
<a class="vignettes" href="http://">Vignette 2</a>
</div><br>
<table class="description"><tr>

<td align="center" valign="middle" width="25%">
<img src="IMAGE D'ORIGINE" onMouseOver="this.src='IMAGE AU PASSAGE DE LA SOURIS';" onMouseOut="this.src='IMAGE D'ORIGINE';">
</td>

<td width="75%" valign="top" align="justify">
TA DEscriptION
</td>

</tr></table>

Les pourcentages peuvent se modifier, et passer en pixels, selon ton forum en fait ^^.
Pour le rollover, je l'ai ajouté au code, suffit juste de modifier les images ^^. Par contre, le rollover là, ne mène vers rien ^^. Si tu veux un lien dessous, faudra modifier le code de base ^^.

Essayes, et dis moi si cela marche, et si tu as des questions

Liliana

Bonsoir Liliana !

Tout fonctionne à merveille. Pour la première question, en effet, je cherchais midi à 14h ! XD
Finalement les codes sont parfois si bêtes...

Un grand grand merci pour ton aide, c'est tout parfait !


Bonne soirée à toi !


Problème résolu !

De rien Contente d'avoir pu t'aider ^^

Je classe alors ^^