Tableau

[mewtwo]

Bonjour/bonsoir

J'ai utilisé le modele 1 de ce tuto https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil sur mon forum test http://pokemonsilver2.forum-canada.com/
Malheureusement ce tuto est mal fait et n'indique pas certains trucs.
1.Je voudrais mettre une image au dessus des titres des onglets.
2.Aussi je voudrais que quand lorsqu'on clique sur un ongle, on a une légère bordure sur les deux cotés du haut et qu'une couleur apparait au tours de l’écriture de l'onglet
3. je veux que le tableau fasse ceci
Merci d'avance

[Invité]

Bonjour,

Navrée d'avoir rédigé un aussi mauvais tutoriel et que l'ensemble du staff m'ait laissé le publier ! Je pensais pourtant qu'il était clair lorsque je dis:

Le code CSS:
Ce code donne le style de votre tableau à onglet. Il est à personnaliser entièrement! Il se place dans:
Panneau d'administration > Affichage Couleurs > Feuille de style CSS

Chacune des class du code CSS a une utilité:
.mon_onglet ► style des onglets non sélectionnés.
.mon_onglet:hover ► style de l'onglet survolé.
.mon_onglet_selected ► style de l'onglet sélectionné.
.mon_contenu ► style de la zone des contenus.
#mes_contenus, #mes_onglets ► Style global du tableau à onglet.

Pour vos 3 questions, ils s'agit de modifications CSS, je vous les mets en rouge:
1. Les images pour l'onglet:

.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background-image: url('URL DE L'IMAGE');
border: 1px solid #000;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
}

2. Changer le fond et l'apparence de l'onglet actif :

.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff; /*fond*/
border-top: 1px solid #000; /*bordure haut*/
border-right: 1px solid #000; /*bordure droite*/
border-left: 1px solid #000; /*bordure gauche*/
border-bottom: 1px solid #fff; /*bordure bas*/
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px; /*arrondis*/
-webkit-border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
cursor: pointer;
margin-bottom: -1px;
list-style: none;}

3. Scrollbar pour hauteur fixe du contenu des onglets :

.mon_contenu{
height: 120px;
overflow-y: auto;
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
line-height: normal;
font-size: 11px;}

Les valeurs de ces propriétés sont à modifier à votre convenance.

Cordialement.

[mewtwo]

Merci
Oui c’était clair sorry

J'ai un petit souci maintenant. Comment je peux faire pour arrondir les coté du bas d'un ongle non sélectionné
Exemple: imaginons que ceci https://2img.net/i/fa/fdf3/nouvea19.png est la forme de l'onglet que je veux

[Invité]

Bonjour,

Les propriétés pour arrondir les angles sont les suivantes:

Code:

-moz-border-radius: 20px;
-webkit-border-radius: 20px; /*arrondis*/
border-radius: 20px;

Plus le chiffre est grand, plus l'arrondi est prononcé. Doc il faut ajouter ces propriété dans le paragraphe concerné:

Code:

.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background-image: url('URL DE L'IMAGE');
border: 1px solid #000;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; /*arrondis*/
border-radius: 20px;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
}


Cordialement.

[mewtwo]

Merci

sur EI ce n'est pas arrondis et c'est en forme de carré

comment je peux changer ça? =s

[Invité]

Bonsoir,

Internet explorer n'accepte pas les arrondis en CSS ... le seul moyen que je connaisse est de mettre des images de fond avec les angles arrondis.

Cordialement.

[mewtwo]

D'accord

je n'arrive pas a vous mp. Voici la réponse a votre mp:

Spoiler:

[Invité]

Difficile de conseiller un forum plutôt, le plus simple est de prendre l'annuaire des forums et de faire le tour des sites:
> http://www.annuairedeforums.com/ (exemple: 1 - 2 - 3 - 4 - 5)

Cordialement.

[mewtwo]

merci (: