Bonjour ou bonsoir chers membres de css-actif. Je reviens avec un autre problème avec un tuto again – pour changer xD
En fait, j'ai trouvé un tuto assez sympa pour faire une pa en onglet... sauf que voilà, celle-ci n'accepte pas les class -->
Je vous donne le forum où j'ai fait le test :



le html de la pa :



la partie css concernée :



et le javascript :



Merci d'avance de votre aide en tout cas

Ouch !

Bonjour Lastbreath !

Alors, je dis ouch parce-qu'il y a quelques grosses erreurs dans le CSS et le JS.

Le CSS

La propriété @-ms-keyframes n'existe pas. Tu peux déjà commencer par retirer ce bloc inutile.

Ensuite un petit soucis avec une valeur qui n'existe pas, float ne peux pas valoir la valeur center (seulement left, right, none et inherit). Ligne 33 de ton code :

Code:

29   .tabs label {
30     font-size: 15px;
31     line-height: 40px;
32     position: relative;
33       float: center;
34     font-family: Times New Roman;
35     display: inline-block;
36     color: #999999;
 ...

Le Javascript

Beh ça m'étonnerais que ça marche, y'a un ; qui se balade au début du script et qui n'a rien à faire là... Etrange ?

Cela dit, c'est l'utilité du script qui me laisse perplexe. Sauf erreur de ma part, il s'agit de la librairie Modernizr qui permet de détecter (et d'ajouter certaines classes aux éléments en fonction) si les propriétés CSS/HTML (5) sont reconnues par le navigateur.
Ca permet de créer des alternatives pour les navigateurs qui ne reconnaissent pas la propriété, mais il ne me semble pas que Modernizr réalise lui-même une quelconque alternative.

Après il s'agit peut-être d'un script particulier qui a été modifié, j'suis pas rentré dans le détail, mais pour info : quel est censé être son rôle ?


Au passage, ton forum n'autorise pas l'affichage pour les visiteurs, donc difficile de constater de visu !

Voilà

Oups, désolée Espeon, j'ai tendance à oublier que je cache les catégories xD autant pour moi, je crois que là c'est bon normalement pour que tu puisses voir l'effet en question

Hmmm oui je vois, les onglets fonctionnent bien (donc laisse le JS comme il l'est, j'imagine qu'elle est construite exprès).


Par contre du coup, je ne comprends pas quel est ton problème ?

Bah en fait, quand j'mets une classe dedans, genre :

Code:

<div class="prename">texte parce que blabla</div>

Bah ça ne me met pas la classe, et ça m'efface le texte ou ce que j'ai mis dedans xD (je ne sais pas si c'est plus clair là xD)

Hmmm c'est étrange car avec ce que tu me donne il n'y a pas de raison que ça fasse cela.

Par curiosité, où est-ce-que tu essaies de placer ta <div> (et qu'il te l'enlève) ?

La seule raison à cela serait que le JS vienne modifier ton HTML, mais il ne me semble pas avoir vu une telle opération dans le script, que je vais ré-étudier de ce pas..
A et le ; au début du script est normal, je me suis renseigné à ce sujet donc pas de soucis avec la syntaxe

À la place de :



et après je sais pas, ça s'efface ><

Alors pour y avoir regardé de plus près je peux te dire déjà que :

• Ce n'est pas le javascript qui réalise l'effet. D'ailleurs il n'est pas même pas chargé dans la page donc je ne sais pas ce que tu en as fait (où l'as-tu mis) mais il n'apparaît pas.
  
• C'est le CSS qui réalise le changement d'onglet en considérant les champs checkés en HTML (ce qui est très moche puisque ça correspond à un formulaire normalement

Personnellement je ne saurais que trop te conseiller de chercher un autre (vrai) système d'onglets, celui-ci étant complètement bancal et plus ou moins compatible, même avec Modernizr (je ne sais pas qui a fait ce truc mais c'est un petit rigolo en tout cas ).


Sinon pour ton problème de div qui disparaît, ça ne devrait pas et le HTML/CSS n'a rien à voir avec ça. Soit c'est un script qui modifie (et impose) ton HTML (mais je n'en ai pas vu), soit c'est ton template (donc FA) qui fait des siennes, peut-être parce-qu'il n'est pas valide... Ou bien à cause du navigateur : ça avait tendance à m'arriver quand le template était un peu gros et que j'étais sous Firefox, j'arrivais pas à modifier mon template, l'enregistrement n'aboutissait pas, page blanche à chaque fois...


Ah et sinon, si tu garde ce CSS, ce serait pas mal que tu fasse les petits correctifs que je t'ai détaillé dans mon premier message

Alors en fait, j'ai enlevé ce que tu m'as dit, sauf que ça modifie les onglets... et en allant demander à un forum qui a la même PA que moi, comment ils ont pu modifier le tout, on m'a conseillé de faire le contenu de mes onglets en iframe pour être sûr que cela soit pris en compte. Ensuite, on m'a confirmé que ça n'était pas adapté aux forums, mais à des sites, donc normal que cela ne semble pas si correct. Donc je vais essayer tout ça par iframe, et si j'ai un problème... bah je reviendrais demander de l'aide

Ah ouais... Sauf cas extrêmes (et encore, plus de nos jours) je persiste à penser qu'un truc qui fait appel à une iframe c'est un truc bancal. Notamment parce-que la page qui affiche l'iframe n'a aucun contrôle sur le contenu de l'iframe, justement.

Autant dire que pour un effet aussi simple qu'un menu avec des onglets, c'est très très très mal (que ce soit pour un site ou pour un forum, ça fait pas de différence, un forum n'est qu'un site web après tout).

Par exemple, sans aller chercher très loin, le forum des forums propose un tutoriel clair et efficace de base pour faire un tableaux à onglets personnalisable en CSS à souhait. Et ça me laisse songer qu'il faudra qu'on fasse un tutoriel sur le principe de base d'un affichage par onglet sur CSSActif pour couper court à ces solutions exotiques (le plus simple ça reste des div identifiées, masquées qui s'affichent au clic sur un autre élément lié, pas d'iframe ou de javascript en dur dans le HTML et autres alternatives bizzaroïdes).


Bref, si ton soucis est résolu, je t'invite à l'indiquer dans le titre du sujet pour les modérateurs
Je reste à disposition si tu as des questions cela étant !

Bonjour,

Suite aux explications d'Espeon, pouvons-nous considérer votre problème comme "résolu" ?
Merci.

Ouip ! Désolée, j'ai eu une semaine très chargée >< et je n'arrivais pas à modifier le titre ! Merci à Espeon pour sa patience en tout cas

Hello !
Puisque c'est résolu, je classe ! (: