En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.

Chez Papinou - Skins GuppY 5

 
 
 
 
 

guppy5.png

Vous êtes ici :   Accueil » Liens onglets à l'horizontale
 
 
 
    Imprimer la page...
    Imprimer la section...

Liens onglets à l'horizontale

Des liens sur des onglets à l'horizontale


liens_onglets.jpg

Dans le fichier styleplus.css de votre skin, vous ajoutez le style ci-dessous:
 

/* Ajouter au styleplus.css */
/********* ONGLETS *******/
ul.onglets { width: 100% ;}
ul.onglets li { display:block;width: 12%;height: auto;float: left;}
ul.onglets li[float="left"] + li { float:none; }
.onglets li {
font: bold 16px Arial, Helvetica, sans-serif;background-color:#fff;color: #BB8060;border: 1px solid #BB8060;
border-radius: 8px;margin:8px;padding:5px;display:block;text-align:center; }
.onglets li:hover {
font: bold 16px Arial, Helvetica, sans-serif;background-color:#BB8060;color: #fff !important;
border: 1px solid #BB8060;border-radius: 8px; }
.onglets a { color:#BB8060; }
.onglets a:hover { font-weight: bold;color: #fff !important; }
/********* FIN ONGLETS *******/


Vous pouvez modifier :

- la  taille des onglets en modifiant width; 12%; en remplaçant 12% par la largeur souhaitée,
- la police, la couleur du texte, la couleur du background.

Sans rien modifier, vous devez avoir le même affichage que sur la copie d'écran ci-dessus.

Dans chaque article ou document vous devez ajouter au début ou à la fin le code pour afficher les liens comme ci-dessous :
 

/* Ajouter au début ou à la fin de chaque article concerné par un lien */

<div style="text-align:center;width:100%;margin:auto;">
<ul class="onglets">
	<li><a href="articles.php?lng=fr&amp;pg=509#z2">Préambule</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=8#z2">Présentation</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=9#z2">Installation</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=407#z2">Mise à jour</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=10#z2">Configuration</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=55#z2">Habillage</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=13#z2">Notes</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=14#z2">Licence</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=15#z2">Nous rejoindre</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=418#z2">Scripts</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=412#z2">Merci</a></li>
</ul>
</div>

<div style="clear:both"></div>

/* Fin ajout article */

Vous devez remplacer le pg=509 par pg=ID de votre article, et bien sûr le texte à afficher sur l'onglet.
Ceci fonctionne avec tous les types de document à la condition de mettre le bon lien.

à suivre


Date de création : 06/11/2018 @ 23:11
Catégorie : - GuppY 5
Page lue 883 fois