problème onglet + redimension automatique de la PA
2 participants
Page 1 sur 1 • Partagez
problème onglet + redimension automatique de la PA
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 20/09/2023
Lien du forum : https://ak-forumtest.forumactif.fr/
Description du problème
Bonjour à vousJe reviens vers vous pour deux problèmes.
Le premier est en rapport avec l'image de fonds de ma PA :
https://ak-forumtest.forumactif.fr/
J'ai pourtant mis les mêmes dimensions que l'image, et elle se redimensionne en plus petite toute seule, et je ne sais pas d'où ça vient + je ne veux pas que ça le fasse ^^
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Elsie&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Page d'accueil - AK</title>
<style>
@font-face {
font-family: 'BlackJaguar';
src: url('https://dl.dropbox.com/scl/fi/qfotdxoctaxocpxqdjjr7/BlackJaguarDemoRegular.ttf?rlkey=12d592x1jtzg9ezh96jnqsvoy&');}
:root {
--policetitre: 'BlackJaguar'; /** police des titres **/
--policetitre2: 'Elsie', cursive; /** police des titres annexes et liens **/
--policeecrit: Verdana, sans-serif; /** police d'écriture de base **/
--couleurfonds:#081e15; /** PA si nécessaire **/
--couleurprincipal:#87837A; /** couleur des écrits **/
--couleursecondaire:#690706;
--couleurfonce:#987d39;
--couleurintermediaire:#c2a864;
--couleurliens:#ae5650;}
a:link, a:visited, a:hover, a:focus, a:active, .PA-Arya-AK-Liens li a {
text-decoration:none;font-weight:italic;
color: var(--couleurprincipal);
font:10px var(--policeecrit);}
::-webkit-scrollbar {
width: 3px; /*largeur de la scrollbar verticale*/
height: 3px; /*hauteur de la scrollbar horizontale*/
background-color: transparent;}
::-webkit-scrollbar-track {
background-color:transparent; /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
background-color: transparent; /*couleur de l'ascenseur*/}
.PA-Arya-AK {
background-image : url(https://images2.imgbox.com/d9/6f/7xlIos2q_o.png);background-repeat : no-repeat;
width:800px;
height:600px;
margin:auto;
display:flex;
justify-content: space-between;
font:10px var(--policeecrit);
color:var(--couleurprincipal);
text-align: justify;}
.PA-Arya-AK-Colonne1, .PA-Arya-AK-Colonne2, .PA-Arya-AK-Colonne3 {
width: 33%;
}
.PA-Arya-AK-Contexte > div > p, .PA-Arya-AK-Annonces > div > p, PA-Arya-AK-Decrets > div > p, .contenu_onglet-staff > p:nth-child(1) { margin: 0;}
.PA-Arya-AK-Contexte div {
margin: 115px 0px 40px 40px;
padding:5px;
width:195px;
height:95px;
overflow:auto;}
.PA-Arya-AK-Liens {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2,1fr);
text-align: center;
width:195px;
margin: 0px 5px 10px 45px;}
.PA-Arya-AK-Liens li, .PA-Arya-AK-Liens li:hover {
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;}
.PA-Arya-AK-Partenaires {
margin: 35px 20px 40px 35px;
padding: 5px;
width:195px;
height: 100px;}
.PA-Arya-AK-Staffsysteme_onglets {
margin-top:100px;
padding:5px;
width:245px;
height:120px;}
.PA-Arya-AK-Staff_onglets {
display:flex;}
.PA-Arya-AK-Staff_onglet {
width:50px;
height:50px;
border-radius:100%;cursor:pointer;background-color: white;}
.PA-Arya-AK-Staff_conteneur_onglets {
position: relative;
top: 5px;
text-align:center;}
.PA-Arya-AK-Staff_contenu_onglet {
overflow: hidden;
display: none;
}
.PA-Arya-AK-Staff_contenu_onglet p span {
font:15px var(--policetitre);
color:var(--couleursecondaire);}
.PA-Arya-AK-Decrets div {
margin: 145px 0px 40px 36px;
width:190px;
height:150px;
overflow:auto;
padding:5px;}
.PA-Arya-AK-Predefinis ul {
list-style-type: none;
padding: 0;
width: 450px;
margin-top: 40px;
display: grid;
grid-template-columns: repeat(10,1fr);
justify-items: center;}
.PA-Arya-AK-Predefinis img {
width:40px;
height:40px;
object-fit:cover;
border-radius:100%;}
.PA-Arya-AK-membresdumois{
margin: -10px 0px 40px 30px;
width:200px;
height: 140px;
padding: 2px;
text-align: center;
display: flex;}
.PA-Arya-AK-membresdumois > div > div {
height : 50px;
overflow:hidden;
transition: .8s ease;
opacity : 0;
font:9px var(--policeecrit);
background: var(--couleurfonds);
margin: 0px 0px 0px 0px;
padding: 25px 0px;}
.PA-Arya-AK-membresdumois > div > div > span {
font:11px var(--policetitre2);}
.PA-Arya-AK-membresdumois > div > div:hover{
opacity : 1;}
.PA-Arya-AK-membresdumois > div {
display:block;
width:100px;
height:50px;
margin: auto;}
p{margin:0;}
</style>
</head>
<body>
<div class="PA-Arya-AK">
<div class="PA-Arya-AK-Colonne1">
<div class="PA-Arya-AK-Contexte">
<div><p><strong>IL Y A TROIS ANS</strong>, Harry Potter perdait la vie dans son combat contre Lord Voldemort. Cela fait maintenant près de trois ans que le seigneur des ténèbres a pris le pouvoir en compagnie de ses fidèles.... Trois ans que les sangs-purs font partie de la Haute Société, mais dans l’ombre, certains sorciers se soulèvent et sont prêts à tout pour renverser le nouveau gouvernement, ces derniers sont parés à se battre, quitte à y perdre la vie pour retrouver de l’espoir et leur liberté. Il est temps pour vous de choisir votre camp, lequel choisisseriez-vous ?</p>
<p>Découvrez notre contexte, juste-<a target="_blank" href="URL"><i>ici</i></a></p>
</div>
</div>
<ul class="PA-Arya-AK-Liens">
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t67-le-contexte" title="Contexte">Contexte</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t68-le-reglement" title="Règlement">Règlement</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t70-annexe-1-la-chronologie" title="Chronologie">Chronologie</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t29-annexe-4-les-decrets" title="Décrets">Décrets</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t302-les-groupes-du-forum" title="Groupes">Groupes</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t80-bottin-des-avatars" title="Bottin des Avatars">Avatars</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/h4-bottin-des-personnages" title="Bottin des personnages">Personnages</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t474-annexe-6-liste-des-personnages-jouables" title="Prédéfinis">Prédefinis</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/f34-les-scenarios" title="Scénarios">Scénarios</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/f35-les-pre-liens" title="Pré-liens">Pré-liens</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/f77-les-familles" title="Familles">Familles</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t72-annexe-3-registre-des-sangs-purs" title="Registre des sangs-purs">Sangs-purs</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t71-annexe-2-les-capacites-speciales" title="Capacités spéciales">Dons</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/f7-les-annexes" title="Annexes">Annexes</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t973-systeme-de-points-demande-et-echange" title="le système de point">Les points</a></li>
<li><a target="_blank" href="URL" title="Guide du nouveau">Guide</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/f14-les-moldus" title="Section Invités">Invités</a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/f13-partenariats" title="Les partenaires">Partenaires</a></li>
<li><a target="_blank" href="https://discord.gg/9jm4zbEj7r" title="Discord">Discord</a></li>
</ul>
<div class="PA-Arya-AK-Partenaires">
<marquee direction="left">
<a href="https://impedimenta.forumactif.com/" target="_blank"><img src="https://images2.imgbox.com/a1/c9/Jqk2y0gO_o.png" /></a>
<a href="https://gameofblood.forumactif.com/" target="_blank"><img src="https://i.postimg.cc/sXTkf3Rw/bouton-part-1.png" /></a>
<a href="http://nineteen-years-later.forums-actifs.com/" target="_blank"><img src="https://nsa40.casimages.com/img/2019/08/28/190828024659697074.png" /></a>
<a href="https://protego-maxima.forumactif.com/" target="_blank"><img src="https://images2.imgbox.com/a1/c9/Jqk2y0gO_o.png" /></a>
<a href="https://shadow-bone.forumactif.com/" target="_blank"><img src="https://i.ibb.co/4TcHXr3/part1.png" /></a>
</marquee>
</div>
</div>
<div class="PA-Arya-AK-Colonne2">
<div class="PA-Arya-AK-Decrets">
<div>
<p>
<strong>Victoire du 02 mai 1998 de Lord Voldemort lors de la Bataille de Poudlard. Exécution de l'Elu.</strong>
</p>
<p>
<strong>Déclaration de Cessez le Feu du 3 mai 1998 : </strong>Texte officiel distribué aux quatre coins du pays offrant tout sorcier de rejoindre les rangs du Seigneur des Ténèbres. Tout sorcier refusant sera considéré comme ennemi. Déclaration d'Armistice Provisoire marquant la défaite de l'Ordre du Phénix et de l'Armée de Voldemort. "Tout sorcier se dressant contre le gouvernement sera considéré comme ennemi et incarcéré sans procès".
</p>
<p>
<strong>06.1998 : Investiture du Ministre de la Magie : Lord Voldemort. </strong>
</p>
<p>
<strong>Loi Constitutionnelle Jedusor :</strong> Loi de refonte constiutionnelle en profondeur du Ministère de la Magie.
</p>
<p>
<strong>Décret de l'Education Magique (09.1998) : </strong>Nouveau décret éducatif pour réformer l'éducation magique, nommant Venus Fawley comme Haute Rectrice pour diriger cette refonte.
</p>
<p>
<strong>Loi de fermeture des frontières (01.1999) :</strong> Tout sorcier se voit forcé de justifier ses allers et venus par les frontières quelque soit sa nationalité.
</p>
<p>
<strong>Loi de relance économique (01.1999) :</strong> Tout sorcier acceptant le gouvernement Voldemort se voit autorisé une aide financière pour reconstruire son commerce.
</p>
<p>
<strong>Loi de protection de la magie pure (01.1999) Acte 1.a. : </strong>Tout sorcier né moldu ou sang mêlé fait l'objet de contrôles. Ces contrôles sont destinés à identifier les origines douteuses.
</p>
<p>
<strong>Loi de protection de la magie pure (06.1999) Acte 1.b. :</strong> Les sorciers ayant prouvé un arbre généalogique pur sont considéré comme l'élite et bénéficie d'une position hiérarchique favorisée.
</p>
<p>
<strong>Loi de protection de la magie pure (12.1999) Acte 2a : </strong>La population magique doit être recensé : statut de sang, date de naissance, don ou particularité, ascendance.
</p>
<p>
<strong>Loi de protection de la magie pure (12.1999) Acte 2b : </strong>Refonte de la classification des espèces magiques.
</p>
<p>
<strong>Loi de protection de la magie pure (12.1999) Acte 2a :</strong> La fréquentation, fraternelle, intime ou biologique avec un être moldu est interdite. L'entrée au monde moldu est interdite. Londres devient activement quadrillé par les Rafleurs.
</p>
<p>
<strong>Loi de protection de la magie pure (12.1999) Acte 2b. : </strong>les cracmols et nés moldus n'ont pas le droit de prendre part à la vie économique du pays.
</p>
<p>
<strong>Loi de protection de la magie pure (06.2000) Acte 1.a. article 2 : </strong>Les nés-moldus, cracmols et sangs-mêlés aux origines douteuses font l'objet d'un sortilège de traquage. Si marqué, tout sorcier peut reprendre part à l'acitivité économie et sociale du pays.
</p>
<p>
<strong>Loi de protection de la magie pure (06.1999) Acte 1.b. article 2 : </strong>les sorciers de l'élite sont activement encouragés à procrés pour favoriser la transmision du sang pur. Tout sang pur s'accouplant à un être moindre sera accusé de trahison.
</p>
<p>
<strong>Loi de protection de la magie pure (06.1999) Acte 1.b. article 3 </strong>: Les sorciers de sang pur devront produire un héritier d'ici l'an prochain.
</p>
</div></div>
<div class="PA-Arya-AK-membresdumois">
<div style="background-image:url(https://i.postimg.cc/dt30DWgk/ezgif-com-gif-maker-2022-05-22-T145158-228.gif);background-size:100px;background-position:50%;width:70px;height:100px;">
<div>
<span class="soustitre">Ayla Lestrange</span><br />La plus active
</div>
</div>
<div style="background-image:url(https://i.postimg.cc/dt30DWgk/ezgif-com-gif-maker-2022-05-22-T145158-228.gif);background-size:100px; background-position: 70%;width:70px;height:100px;">
<div>
<span class="soustitre">Arya Nott-Lestrange</span><br />Coup de cœur
</div>
</div>
</div>
</div>
<div class="PA-Arya-AK-Colonne3">
<div class="PA-Arya-AK-Staffsysteme_onglets">
<div class="PA-Arya-AK-Staff_onglets">
<span class="PA-Arya-AK-Staff_onglet" id="onglet_NomOnglet1" onclick="change_onglet('NomOnglet1');"> </span>
<span class="PA-Arya-AK-Staff_onglet" id="onglet_NomOnglet2" onclick="change_onglet('NomOnglet2');"> </span>
<span class="PA-Arya-AK-Staff_onglet" id="onglet_NomOnglet3" onclick="change_onglet('NomOnglet3');"> </span>
</div>
<div class="PA-Arya-AK-Staff_conteneur_onglets">
<div class="PA-Arya-AK-Staff_contenu_onglet" id="contenu_onglet_NomOnglet1">
<img src="https://images2.imgbox.com/ed/80/iKEz2tqC_o.png"/>
<p>Présente - Fondatrice
<a target="_blank" href="URL"><i>Profil</i></a> - <a target="_blank" href="URL"><i>MP</i></a></p>
</div>
<div class="PA-Arya-AK-Staff_contenu_onglet" id="contenu_onglet_NomOnglet2">
<img src="https://images2.imgbox.com/ed/80/iKEz2tqC_o.png"/>
<p>Présente - Fondatrice
<a target="_blank" href="URL"><i>Profil</i></a> - <a target="_blank" href="URL"><i>MP</i></a></p>
</div>
<div class="PA-Arya-AK-Staff_contenu_onglet" id="contenu_onglet_NomOnglet3">
<img src="https://images2.imgbox.com/ed/80/iKEz2tqC_o.png"/>
<p>Présente - Fondatrice
<a target="_blank" href="URL"><i>Profil</i></a> - <a target="_blank" href="URL"><i>MP</i></a></p>
</div>
</div>
</div>
<div class="PA-Arya-AK-Predefinis">
<ul>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t474-annexe-6-liste-des-personnages-jouables"><img src="https://zupimages.net/up/22/44/6h6a.png" alt="Neville Londubat" title="Neville Londubat"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t474-annexe-6-liste-des-personnages-jouables"><img src="https://zupimages.net/up/22/44/9ak1.png" alt="Luna Lovegood" title="Luna Lovegood"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t999-h-libre-khalen-fuller-frere-aine-ft-bob-morley"><img src="https://zupimages.net/up/22/44/rysz.png" alt="Khalen Fuller" title="Khalen Fuller"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t892-f-libre-venus-fawley-la-matriarche-la-directrice-ft-nicole-kidman"><img src="https://zupimages.net/up/22/44/9kr6.png" alt="Venus Fawley" title="Venus Fawley"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t596-famille-lestrange"><img src="https://zupimages.net/up/22/44/9q6t.png" alt="Aslan Lestrange" title="Aslan Lestrange"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t616-la-bande-d-arya-l-elite-de-poudlard-2-4-dispos"><img src="https://zupimages.net/up/22/44/23ky.png" alt="Perséphone Yaxley" title="Perséphone Yaxley"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t474-annexe-6-liste-des-personnages-jouables"><img src="https://zupimages.net/up/22/44/6h6a.png" alt="Neville Londubat" title="Neville Londubat"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t474-annexe-6-liste-des-personnages-jouables"><img src="https://zupimages.net/up/22/44/9ak1.png" alt="Luna Lovegood" title="Luna Lovegood"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t999-h-libre-khalen-fuller-frere-aine-ft-bob-morley"><img src="https://zupimages.net/up/22/44/rysz.png" alt="Khalen Fuller" title="Khalen Fuller"/></a></li>
<li><a target="_blank" href="https://avada-kedavrarpg.forumactif.com/t892-f-libre-venus-fawley-la-matriarche-la-directrice-ft-nicole-kidman"><img src="https://zupimages.net/up/22/44/9kr6.png" alt="Venus Fawley" title="Venus Fawley"/></a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
/* Fonction de gestion des onglets */
function change_onglet(name) {
let ongletAncien = document.getElementById(`onglet_${anc_onglet}`);
let ongletNouveau = document.getElementById(`onglet_${name}`);
let contenuOngletAncien = document.getElementById(`contenu_onglet_${anc_onglet}`);
let contenuOngletNouveau = document.getElementById(`contenu_onglet_${name}`);
if(ongletAncien && ongletNouveau && contenuOngletNouveau && contenuOngletAncien) {
/* cache le précédent contenu */
ongletAncien.classList.remove('onglet_actif');
contenuOngletAncien.style.display = 'none';
/* Affiche le nouveau contenu */
ongletNouveau.classList.add('onglet_actif');
contenuOngletNouveau.style.display = 'block';
/* met à jour la valeur de l'onglet actif */
anc_onglet = name;
} else if (!ongletAncien) {
console.error("Erreur script onglet : L'onglet d'identifiant \"onglet_" + anc_onglet + "\" est introuvable")
} else if (!ongletNouveau) {
console.error("Erreur script onglet : L'onglet d'identifiant \"onglet_" + name + "\" est introuvable")
} else if (!contenuOngletAncien) {
console.error("Erreur script onglet : Le conteneur d'identifiant \"contenu_" + anc_onglet + "\" est introuvable")
} else if (!contenuOngletNouveau) {
console.error("Erreur script onglet : Le conteneur d'identifiant \"contenu_" + name + "\" est introuvable")
}
}
/* initialisation des onglets */
var anc_onglet = 'NomOnglet1';
change_onglet(anc_onglet);
</script>
</body>
</html>
Voici le code si vous voyez quelque chose, la taille est normalement de 600 pour l'image, mais elle est rogné sur la hauteur, je ne sais pas d'où ça vient, j'ai augmenté l'iframe ; la taille et retirer les overflow, mais rien à faire
Second point, je me tire les cheveu avec les onglets, j'aimerai faire des boutons qui change de couleur quand c selectionné ou non mais je n'arrive pas, tout ce que j'arrive à faire, c de mettre une seule couleur, est-ce que vous pourriez m'aider ?
merci
Re: problème onglet + redimension automatique de la PA
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 » |
Re: problème onglet + redimension automatique de la PA
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 déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum. |
Sujets similaires
» Problème de Redimension automatique des Images du Forum.
» Redimension automatique des images
» Redimension automatique des avatars
» Redimension automatique des images
» Redimension automatique des images DANS les posts/topics
» Redimension automatique des images
» Redimension automatique des avatars
» Redimension automatique des images
» Redimension automatique des images DANS les posts/topics
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum