Description des forums avec liens et scrollbar

Dernière édition par james1920 le Mar 04 Jan 2011, 14:20, édité 1 fois

Description des forums avec liens et scrollbar

Informations générales

Description :: Ce tutoriel va vous permettre de réaliser des descriptions de forums "codées" avec une barre de défilement (scrollbar) sur le texte de description, et des liens de navigation sur le côté.
Démo :: Démonstration sans CSS et avec CSS.
Testé sur :: Firefox, Chrome, Safari, Opera, Internet Explorer
Crédits :: Proposé par James1920 le 03/01/2011 | Validé par Hiro'
Mise(s) à jour :: MàJ par 'Christa le 23/05/2012

Le tutoriel

Partie HTML

Pour ceux qui l'ignoreraient ou l'auraient oublié, les descriptions des forums se font dans le Panneau d'administration » Général » Catégories et forums » » Champ de texte Description.
Vous pouvez aussi renseigner ce champ dès la création de votre forum, bien entendu.

Pour avoir le rendu souhaité, nous allons réaliser un tableau d'une ligne et deux colonnes, comme ceci :

Code:: <table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" class="celluledesc-liens">
COLONNE 1
</td>
<td valign="top" align="center" class="celluledesc-texte">
COLONNE 2
</td>
</tr>
</table>

Selon ce que vous souhaitez, vous pourrez placer votre description d'un côté et vos liens de l'autre. Ici, on va mettre les liens dans la COLONNE 1 et la description dans la COLONNE 2.
Notez la présence des classes pour chaque cellule :
• celluledesc-liens est la classe à associer à la cellule contenant vos liens,
• celluledesc-texte est la classe à associer à la cellule contenant le texte de la description.
Si vous souhaitez les inverser, il vous suffit simplement d'intervertir les classes.

Placer les liens

Pour rappel, les liens devront se présenter sous la forme suivante :

Code:: <a href="URL">TEXTELIEN</a>
<a href="URL">TEXTELIEN</a>
<a href="URL">TEXTELIEN</a>

Ne mettez pas de <br />, le CSS (ci-après) se chargera des sauts de ligne.

Placer la description

Le texte de la description va nécessiter l'usage d'une troisième classe CSS, celluledesc-scroll et devra se présenter sous la forme suivante :

Code:: <div class="celluledesc-scroll">
VOTRE TEXTE DE DESCRIPTION
</div>

Mise en place complète

Si vous avez tout bien suivi jusqu'à maintenant, vous devez avoir compris que pour avoir une présentation avec les liens à gauche et la description à droite, le code complet devra ressembler à ceci :

Code:: <table width="100%" cellspacing="2" cellpadding="0">
<tr>
<td valign="middle" align="center" class="celluledesc-liens">
<a href="URL">TEXTELIEN</a>
<a href="URL">TEXTELIEN</a>
<a href="URL">TEXTELIEN</a>
</td>
<td valign="middle" align="center" class="celluledesc-texte">
<div class="celluledesc-scroll">
VOTRE TEXTE DE DESCRIPTION
</div>
</td>
</tr>
</table>

Maintenant que la partie HTML de ce tutoriel est faite, il va maintenant falloir définir le code CSS si vous souhaitez que tout apparaisse convenablement.

Partie CSS

Pour éviter les problèmes d'affichage de votre forum, il y a plusieurs points que votre CSS doit prendre en charge :

La cellule contenant les liens devra être d'une largeur fixe ;
Il faudra un saut de ligne entre les liens, ce serait encore mieux si l'on pouvait ajuster l'espacement entre deux liens ;
Comme le tutoriel l'indique, on souhaite que la cellule contenant le texte de description soit munie d'une barre de défilement quand le texte est trop long ;
Histoire d'avoir un meilleur rendu, ça serait bien de pouvoir personnaliser le fond et la forme de chacune des deux cellules.

Pour ça, comme vous avez pu le voir plus haut, trois classes ont été appliquées au code HTML, voyons donc chacune d'entre elles plus en détail.
• celluledesc-liens : C'est la cellule contenant les liens. On va transformer chaque lien en bloc (ce qui permettra de générer un saut de ligne entre chacun), mais on pourra aussi appliquer à cette cellule une couleur de fond, une couleur de texte, des coins arrondis, etc.
• celluledesc-texte : C'est la cellule contenant la description. On peut lui donner à elle aussi une couleur de fond et autres éléments de design originaux. Entre autres, on va instaurer une marge intérieure pour que le contenu (le texte) ne soit pas collé aux bords.
• celluledesc-scroll : C'est la zone qui contiendra le texte de la description. On va lui donner une hauteur fixe et faire apparaître une barre de défilement quand cette hauteur sera dépassée par le contenu, grâce à la propriété CSS overflow

Il est désormais temps d'avoir un exemple bien tangible du code CSS correspondant. Certaines valeurs ont été indiquées par commodité, d'autres pas, vous devez remplacer le texte en majuscules par la valeur de votre choix :

Code:: /* *********************************************************
Personnalisation des descriptions de catégories
Tutoriel par CSSACtif - http://www.css-actif.com/t9071-
************************************************************/

/* On s'occupe de la cellule contenant les liens */
.celluledesc-liens {
/* largeur de la cellule */
width:150px;

/* on donne une apparence personnalisée à la cellule */
/* des bordures arrondies... */
-moz-border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
-webkit-border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
/* un fond : couleur, image, positionnement de l'image de fond */
background : #ffffff url('URL-IMG-FOND') top center no-repeat;
}

/* Puis on s'occupe des liens en question */
.celluledesc-liens a {
display:block; /* IMPORTANT : on transforme les liens en blocs */
text-align:center; /* on centre le texte dans les blocs */
margin: 5px 0px; /* marges extérieures haut/bas puis droite/gauche */
padding:2px 4px; /* marges intérieures (entre les bords et le texte) */
border : 1px solid #999999; /* bordure : épaisseur type couleur */
background: #f0f0f0; /* couleur de fond */

/* on personnalise un peu le texte */
color : #990000; /* couleur du lien */
font-size: 12px; /* taille du texte */
letter-spacing:1px; /* espacement entre les lettres */
font-weight:bold; /* texte en gras */
/* ... etc */
}

/* On s'occupe de la cellule contenant le texte de description */
.celluledesc-texte {
text-align:justify; /* texte justifié */
padding:5px; /* marges intérieures */

/* on donne une apparence personnalisée à la cellule */
/* des bordures arrondies... */
-moz-border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
-webkit-border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
border-radius : HAUTGAUCHEpx HAUTDROITpx BASDROITpx BASGAUCHEpx;
/* un fond */
background : #ffffff url('URL-IMG-FOND') top center no-repeat;
/* on personnalise un peu le texte */
color : #000000;
font-size: 13px; /* taille du texte */
}

/* Puis on s'occupe de la description (en particulier le scroll automatique) */
.celluledesc-scroll {
height:100px; /* hauteur du bloc de description */
overflow:auto; /* le scroll apparaît automatiquement si besoin */
padding:5px; /* marges intérieures, espacement par rapport à la barre de scroll */
}

/* *********************************************************
Personnalisation des descriptions de catégories [FIN]
************************************************************/