adapter page html sur une page classique (avec javascript)

[AryaLestrange]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 04/02/2021
Lien du forum : https://arya-forumtest.forumactif.com/h4-test-onglet

Description du problème

Coucou à vous

Je viens de finaliser un code que vous pourrez retrouver ici : https://arya-forumtest.forumactif.com/h4-test-onglet
sauf que je n'arrive pas à le transposer sur un message classique sur le forum, le code ne marche pas (surtout le javascirpt, auriez-vous une solution pour qu'il fonctionne) ? car indirectement j'ai certains placements qui ne se mettent pas au bon endroit : https://arya-forumtest.forumactif.com/t34-test-onglet#60

merci beaucoup et bonne journée :5

[Neptunia]

Bonjour ^^


Pour des raisons évidentes de sécurité, le javascript n'est pas autorisé dans les messages.
Il vous reste deux solutions :
- Placer votre page html sous forme d'iframe dans le message.
- Dissocier le javascript et placer le script dans la gestion des javascripts (cocher Sur les sujets) et le reste dans votre message.

[AryaLestrange]

Re-bonjour

D'accord, je comprends mieux, du coup, il vaut mieux tout reprendre via des imputs et label alors
j'ai plus qu'à tout reprendre, en espérant parvenir à placer les onglets en vertical comme j'y étais parvenue ce qui ne va pas être gagné :/ je suis preneuse d'astuce si jamais car c'était la seule chose où j'avais réussi à obtenir ce que jvoulais.
encore merci

[Neptunia]

Pas besoin de tout reprendre.

Il suffit de poster ça dans le message et le tour est joué (je viens de tester à l'instant)

Code:

<iframe src="/h4-" height="360" width="500" frameborder="0" scrolling="no"></iframe>

[AryaLestrange]

Hey
désolée, j'ai oublié de préciser que c'était un bout de fiche de présentation, donc je pourrai pas voir ça avec un iframe :/
j'aimerai avoir votre avis, j'ai tenté autre chose pour les onglets et voici le résultat : https://arya-forumtest.forumactif.com/t35-test-2-onglets
un moyen, pour à tout hasard, avoir le second onglet à la suite de l'autre sur la même colonne ?
mon html :

Code:

<div class="systemeonglet_prez">
<input type="radio" name="AB4C" id="OAB4C1" checked ><label for="OAB4C1"><img src="https://i.goopics.net/GGRvv.png" class="onglets_prez"/></label>
<input type="radio" name="AB4C" id="OAB4C2"><label for="OAB4C2"><img src="https://i.goopics.net/GGRvv.png"  class="onglets_prez"/></label>
<img src="https://images2.imgbox.com/38/ec/Xzapd4qr_o.png" class="avatarprez"/>
<div id="contentAB4C1" class="contenu_ongletprez">

L'école d'Ilvermorny se situe au sommet du mont Greylock dans le Massachusetts, un État du nord-est des États-Unis bordé par l'océan Atlantique. L'école est cachée à la vue des Non-Maj par de puissants sortilèges qui provoquent parfois l'apparition d'une brume épaisse autour d'elle.

Les élèves d'Ilvermorny étudient dans un château de granite qui n'était à l'origine qu'une modeste maison de pierre. Deux statues de marbre représentant Isolt Sayre et James Steward sont présentes de part et d'autre de la grande porte du château. L'école est entourée par un mur de pierre agrémenté de petites tours. L'accès au domaine se fait par un portail sur lequel est gravé les armoiries de l'école ainsi qu'un noeud gordien représentant la broche d'Isolt.

Derrière les grandes portes se trouve un hall circulaire surmonté d'une coupole en verre en guise de plafond. À l'étage de cette pièce se trouve un balcon en bois qui court tout le long des murs. En bas, le hall d'entrée n'est agrémenté que de quatre statues représentant un Serpent cornu, un Womatou, un Oiseau-Tonnerre et un Puckwoodgenie.

En dehors des murs de l'école, à l'endroit où a été enterrée la baguette de Salazar Serpentard, se trouve une variété inconnue d'amourette dont les feuilles ont de puissantes propriétés curatives.

Les uniformes des élèves sont de couleur bleue et rouge. Chaque robe est agrémentée d'un nœud gordien doré.

</div><div id="contentAB4C2" class="contenu_ongletprez">

La cérémonie de la Répartition se fait à Ilvermorny dans le hall d'entrée de l'école, face aux statues qui représentent les quatre créatures symboles des maisons.
Les nouveaux étudiants font leur entrée dans le hall sous le regard de toute l'école qui les observe depuis le balcon à l'étage et attendent qu'on les invite, chacun leur tour, à se tenir sur le symbole du nœud gordien au milieu de la place.
L'élève présenté attend alors le verdict : si une statue désire voir l'élève rejoindre sa maison, elle s'anime - le Serpent cornu en faisant s'illuminer le cristal sur son front, le Womatou en rugissant, l'Oiseau-Tonnerre en battant des ailes et le Puckwoodgenie en levant sa flèche dans les airs. Dans le cas où plusieurs statues invitent un élève à la rejoindre, il en revient à l'étudiant de choisir quelle maison il désire rejoindre. Environ une fois tous les dix ans, il arrive que les quatre statues s'animent pour un élève.
Chacune des maisons représentent un trait de caractère bien particulier. Le serpent cornu favorise les érudits ; le puckwoodgenie favorise les guérisseurs ; l'Oiseau-Tonnerre représente les aventuriers et le womatou les guerriers.
</div></div>

mon css :

Code:

.contenu_ongletprez {Overflow: auto;
background-color: black;
margin-top: 10px;
font-family:  verdana;
font-size: 15px;
color: #fff;
height: 320px;
display: none;
  width: 250px;margin-left:5px;}

  .onglets_prez img{
width:7px; height: 153px; display:block!important;
} 


  .avatarprez{width: 200px; max-height: 320px;margin: auto;margin-left:5px;}

.systemeonglet_prez{margin: auto; width: 490px; height: 350px;background: green;display:flex;padding: 5px;}
.systemeonglet_prez::after {content:''; display:table; clear:both;}
.systemeonglet_prez input[type=radio] {display:none;}

#OAB4C1:checked ~ #contentAB4C1,
#OAB4C2:checked ~ #contentAB4C2,
#OAB4C3:checked ~ #contentAB4C3 {display:inline-block;}

d'avance merci à vous je cherche des alternatives
bonne soirée <3

[Neptunia]

Je ne vous serais pas d'une grande utilité ne sachant pas ce qu'il est possible de faire avec des boutons radio.

Peut-être placer chaque input dans une cellule de tableau ?
Ou bien modifier les images et effectuer une rotation des input de 90 degrés ?

---

A moins que ...
... anglophobe s'abstenir

Créer des onglets verticaux en CSS

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.