Tableau

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Tableau

Message par mewtwo Dim 22 Jan 2012 - 23:04

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


Dernière édition par mewtwo le Mar 24 Jan 2012 - 22:24, édité 3 fois
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau

Message par Invité Lun 23 Jan 2012 - 7:44

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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau

Message par mewtwo Mar 24 Jan 2012 - 2:25

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
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau

Message par Invité Mar 24 Jan 2012 - 10:20

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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau

Message par mewtwo Mar 24 Jan 2012 - 18:45

Merci Smile

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

comment je peux changer ça? =s
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau

Message par Invité Mar 24 Jan 2012 - 22:07

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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau

Message par mewtwo Mar 24 Jan 2012 - 22:21

D'accord

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

Spoiler:
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau

Message par Invité Mar 24 Jan 2012 - 22:40

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.

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau

Message par mewtwo Mar 24 Jan 2012 - 22:46

merci (:
mewtwo

mewtwo
****

Féminin
Messages : 260
Inscrit(e) le : 14/03/2011

https://forum.forumactif.com/forum
mewtwo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum