Systèmes d'onglets sans Javascript
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Systèmes d'onglets sans Javascript
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Autre
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.kh-memento.com/
Description du problème
Bonjour bonjour.Alors, je me doute qu'avec le titre du sujet, vous vous attendez à un code tiré par les cheveux. Et j'avoue que même si je suis pas encore très doué en code css/html, je conscient qu'il est assez différent de ce que j'ai l'habitude de faire.
Avant que l'on ne me redirige vers le JVscript, j'explique la raison du choix du codage: ce dernier ne peut pas être utilisé par les membres, donc je tente un code qui ne s'appuie que sur du CSS et html.
Je tente de faire une fiche "combat" (oui pour ces fameux forum rpg) avec un système d'onglet pour avoir une vraie fiche bien organisée qui prend pas toute la page. Seulement, quand je tente de l'implémenter sur forumactif, ça déraille comme vous pouvez le voir sur le screenshot: les onglets n’apparaissent pas et en plus le code déborde du post : <.
Voici un screen du code qui marche hors de FA pour comparer: http://puu.sh/bCBYz/6524ce93dd.png
Pour le bug de la fiche qui déborde, c'est sans doute un soucis de margin, de paddin, ou que sais-je, mais ce qui m'inquiète plus c'est la barre d'onglet qui apparaît pas du tout ^^'.
Je tiens à préciser qu'en dehors de forum actif, le code marche très bien, donc soit un souci de compatibilité? Soit un changement à effectuer, d'où ma raison pour chercher de l'aide ^^'. N'ayez pas peur de me dire à la figure que mon code marchera jamais sur FA si c'est le cas, j'préfère qu'on me le dise plutôt que de perdre du temps à bricoler du code xD. Ah oui, vous noterez quelques oublis en terme de "compatibilité" des codes au niveau des border-radius et des colo-gradient. J'm'occuperai de corriger tout ça plus tard, je préfère d'abord savoir si le code peut fonctionner ^^.
Les balises qui me font douter sont les UL et Input, et je commence à me demander si elles sont gérées en dehors du panneau admin.
Un grand merci d'avance, sur ce, voici les codes:
HTML
- Code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<LINK rel="stylesheet" type="text/css" href="TestCombat.css">
</head>
<ul class="TabCombatsCombat">
<li>
<input type="radio" checked name="TabCombatsCombat" id="TabCombat1">
<label for="TabCombat1">Équipement</label>
<div id="TabCombat-content1" class="TabCombat-content animated fadeIn">
<div id="CombatEquipement">
<div id="CombatArmes"><div id="CombatArmesHeader">Armes</div></div>
<div id="CombatArmures"><div id="CombatArmuresHeader">Armures</div></div>
<div id="CombatAccessoires"><div id="CombatAccessoiresHeader">Accessoires</div></div>
</div>
</div>
</li>
<li>
<input type="radio" name="TabCombatsCombat" id="TabCombat2">
<label for="TabCombat2">Mêlée</label>
<div id="TabCombat-content2" class="TabCombat-content animated fadeIn">
<div id="CombatStylesCadre">
<div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute; left: 6px; font-weight: bold;">Description du style:</div><div style="position: absolute; top: 20px; left: 3px; width: 345px; height: 365; overflow: auto">texte random</div></div>
</div>
</div>
</li>
<li>
<input type="radio" name="TabCombatsCombat" id="TabCombat3">
<label for="TabCombat3">Distance</label>
<div id="TabCombat-content3" class="TabCombat-content animated fadeIn">
<div id="CombatStylesCadre">
<div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute; left: 6px; font-weight: bold;">Description du style:</div><div style="position: absolute; top: 20px; left: 3px; width: 345px; height: 365; overflow: auto">texte random</div></div>
</div> </div>
</li>
<li>
<input type="radio" name="TabCombatsCombat" id="TabCombat4">
<label for="TabCombat4">Défense</label>
<div id="TabCombat-content1" class="TabCombat-content animated fadeIn">
<div id="CombatStylesCadre">
<div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute; left: 6px; font-weight: bold;">Description du style:</div><div style="position: absolute; top: 20px; left: 3px; width: 345px; height: 365; overflow: auto">texte random</div></div></div> </div>
</li>
<li>
<input type="radio" name="TabCombatsCombat" id="TabCombat5">
<label for="TabCombat5">Magie</label>
<div id="TabCombat-content2" class="TabCombat-content animated fadeIn">
<div id="CombatStylesCadre">
<div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute; left: 6px; font-weight: bold;">Description du style:</div><div style="position: absolute; top: 20px; left: 3px; width: 345px; height: 365; overflow: auto">texte random</div></div>
</div>
</div>
</li>
<li>
<input type="radio" name="TabCombatsCombat" id="TabCombat6">
<label for="TabCombat6">Soutien</label>
<div id="TabCombat-content3" class="TabCombat-content animated fadeIn">
<div id="CombatStylesCadre">
<div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute; left: 6px; font-weight: bold;">Description du style:</div><div style="position: absolute; top: 20px; left: 3px; width: 345px; height: 365; overflow: auto">texte random</div></div>
</div>
</div>
</li>
<li>
<input type="radio" name="TabCombatsCombat" id="TabCombat7">
<label for="TabCombat7">Sabotage</label>
<div id="TabCombat-content1" class="TabCombat-content animated fadeIn">
<div id="CombatStylesCadre">
<div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute; left: 6px; font-weight: bold;">Description du style:</div><div style="position: absolute; top: 20px; left: 3px; width: 345px; height: 365; overflow: auto">Text random</div></div>
</div>
</div>
</li>
<li>
<input type="radio" name="TabCombatsCombat" id="TabCombat8">
<label for="TabCombat8">Don(s)</label>
<div id="TabCombat-content2" class="TabCombat-content animated fadeIn">
<div id="CombatDons">
<div id="CombatDonUnique">DON UNIQUE</div><div id="CombatDonUniqueDes">Décrivez ici un don unique à votre personnage, quelque chose qui est si spécial que ce n'est pas une abilité que n'importe qui pourrait avoir. Bien entendu, plus la capacité est puissante, plus il faudra une contre partie élevée pour y avoir droit.</div>
</div>
</div>
</li>
<li>
<input type="radio" name="TabCombatsCombat" id="TabCombat9">
<label for="TabCombat9">Bonus</label>
<div id="TabCombat-content3" class="TabCombat-content animated fadeIn">
dez,dezdozejdiozed
</div>
</li>
</ul>
Et voici pour la partie CSS:
Je suis conscient que ce code est très grand, et je pense que le problème se situe dans la première partie du code (mise en page de la barre d'onglets).
Après tout, le code après n'est que de la mise en page classique.
- Code:
/* Mise en page de la barre d'onglets pour la fiche combat! */
.TabCombatsCombat input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.TabCombatsCombat {
width: 743px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.TabCombatsCombat li{
float: left;
}
.TabCombatsCombat label{
display: block;
padding: 10px 11px;
border-radius: 5px 5px 0 0;
color: darkred;
font-size: 18px;
font-weight: bold;
font-family: 'Lily Script One', helveti;
background: linear-gradient(#eb3257, #942929);
cursor: pointer;
position: relative;
top: 10px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.TabCombatsCombat label:hover {
background: rgba(200,50,50,0.8);
top: 15px;
}
[id^=TabCombat]:checked + label {
background: linear-gradient(#eb3257, #942929);
color: black;
top: 15px;
}
[id^=TabCombat]:checked ~ [id^=TabCombat-content] {
display: block;
}
.TabCombat-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: linear-gradient(#2B2950, #942929);
padding: 15px;
color: white;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
border-radius: 0 0 10px 10px;
}
/* Mise en page des éléments composants les onglets combat */
#CombatStylesCadre{
width: 700px;
height: 450px;
background: linear-gradient(grey, darkgrey);
border-style: solid;
border-radius: 10px;
border-color: black;
border-width: 1px;
position: relative;
margin-left: 5px;
}
#CombatStylesHeader{
width: 349px;
height: 60px;
background: linear-gradient(#942929, black);
border-radius: 10px 0 10 0px;
position: absolute;
margin: 1px;
font-size: 30px;
color: lightgrey;
font-weight: bold;
font-family: 'Times New Roman';
text-align: center;
text-shadow: -1px 0px 2px rgba(0,0,0,1);
padding-top: 15px;
}
#CombatStylesDescription{
width: 349px;
height: 388px;
background: linear-gradient(darkgrey, #2B2950);
font-size: 14px;
font-family: Calibri;
color: black;
border-radius: 0 10px 0 10px;
margin: 1px;
position: absolute;
top: 60px;
line-height: 20px;
text-align: justify;}
#CombatStylesComp{
width: 349px;
height: 60px;
left: 349px;
background: linear-gradient(darkgreen, black);
border-radius: 0 10px 0 10px;
position: absolute;
margin: 1px;
font-size: 30px;
color: lightgrey;
font-weight: bold;
font-family: 'Times New Roman';
text-align: center;
text-shadow: -1px 0px 2px rgba(0,0,0,1);
padding-top: 15px;
}
#CombatEquipement{
width: 700px;
height: 450px;
background: linear-gradient(grey, darkgrey);
border-style: solid;
border-radius: 10px;
border-color: black;
border-width: 1px;
position: relative;
margin-left: 5px;
}
#CombatArmes{
position: absolute;
top: 2px;
left: 2px;
width: 230px;
height: 445px;
background: lightgrey;
border-radius: 10px 0 0 10px;
border-style: solid;
border-width: 0 2px 0 0;
border-color: black;}
#CombatArmures{
position: absolute;
top: 2px;
left: 235px;
width: 230px;
height: 445px;
background: lightgrey;
border-style: solid;
border-width: 0 2px 0 0;
border-color: black;}
#CombatAccessoires{
position: absolute;
top: 2px;
left: 468px;
width: 230px;
height: 445px;
background: lightgrey;
border-radius: 0 10px 10px 0;}
#CombatArmesHeader{
width: 229px;
height: 35px;
background: linear-gradient(#942929, black);
border-radius: 10px 0 10 0px;
position: absolute;
margin: 1px;
font-size: 25px;
color: lightgrey;
font-weight: bold;
font-family: 'Times New Roman';
text-align: center;
text-shadow: -1px 0px 2px rgba(0,0,0,1);
padding-top: 8px;
}
#CombatArmuresHeader{
width: 229px;
height: 35px;
background: linear-gradient(darkblue, black);
border-radius: 10px 0 10 0px;
position: absolute;
margin: 1px;
font-size: 25px;
color: lightgrey;
font-weight: bold;
font-family: 'Times New Roman';
text-align: center;
text-shadow: -1px 0px 2px rgba(0,0,0,1);
padding-top: 8px;
}
#CombatAccessoiresHeader{
width: 229px;
height: 35px;
background: linear-gradient(darkgreen, black);
border-radius: 10px 0 10 0px;
position: absolute;
margin: 1px;
font-size: 25px;
color: lightgrey;
font-weight: bold;
font-family: 'Times New Roman';
text-align: center;
text-shadow: -1px 0px 2px rgba(0,0,0,1);
padding-top: 8px;
}
#CombatDons{
width: 700px;
height: 450px;
background: linear-gradient(grey, darkgrey);
border-style: solid;
border-radius: 10px;
border-color: black;
border-width: 1px;
position: relative;
margin-left: 5px;
}
#CombatDonUnique{
position: absolute;
width: 700px;
height: 65px;
background: linear-gradient(white, darkgrey);
border-style: solid;
border-radius: 10px 10px 0 0;
border-color: black;
border-width: 0 0 2px 0;
color: white;
font-weight: bold;
text-align: center;
font-size: 80px;
padding-top: 35px;
}
#CombatDonUniqueDes{
position: absolute;
width: 680px;
height: 80px;
background: white;
color: black;
text-align: justify;
opacity: 0.7;
font-size: 14px;
border-radius: 10px 10px 0 0;
padding: 10px;
line-height: 20px;
}
Voila, merci encore de votre attention ^^. Si ce que je tente de faire est impossible, je suis ouvert à des alternatives ou alors je changerai carrément de système au besoin xD.
À bientôt.
Edit: ajout d'une page html annexe, le code semble fonctionner ici:
http://www.kh-memento.com/h1-onglet-sans-jvscript
Et voici un lien d'un post où ça ne fonctionne pas:
http://www.kh-memento.com/t139-test-nouvelle-fiche-de-combat#356
L'intérêt de toute cette démarche, c'est de pouvoir rendre accessible aux utilisateurs le système d'onglets donc si ça ne marche que sans eux, ça casse un peu l'objectif xD.
merci encore.
Dernière édition par SarkenHS le Mer 17 Sep 2014 - 15:56, édité 2 fois
Re: Systèmes d'onglets sans Javascript
Hello
Simple conseil, pour aller plus vite dans la résolution de ton problème je te conseillerai de poster le lien vers un sujet de ton forum où l'on peut voir directement le problème ainsi qu'un lien vers une page HTML de ton forum où on peut voir le fonctionnement normal afin de pouvoir comparer les 2
Je n'ai pas encore pas regardé ton code CSS, seulement le début, il y a une raison pour laquelle tu positionnes en absolu tes input radio au lieu de les cacher avec un display none ?
Au lieu de
Simple conseil, pour aller plus vite dans la résolution de ton problème je te conseillerai de poster le lien vers un sujet de ton forum où l'on peut voir directement le problème ainsi qu'un lien vers une page HTML de ton forum où on peut voir le fonctionnement normal afin de pouvoir comparer les 2
Je n'ai pas encore pas regardé ton code CSS, seulement le début, il y a une raison pour laquelle tu positionnes en absolu tes input radio au lieu de les cacher avec un display none ?
- Code:
.TabCombatsCombat input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
Au lieu de
- Code:
.TabCombatsCombat input[type=radio] {
display: none;
}
Re: Systèmes d'onglets sans Javascript
Bonjour, merci de l'aide rapide.
Alors, pour être franc, j'ai pour dire zéro connaissance dans les balises Input, donc je ne sais pas trop, je me suis aidé de divers tuto ci et là.
Je vais déjà tester ce que tu m'a proposé voir si ça change quelque chose ^^.
Ps: j'ai ajouté à la fin du post les éléments demandés ; )
ps en edit: j'ai vite testé ton changement, ça ne change rien d'apparence en tout cas, donc je saurai pas dire pourquoi le type l'a mis.
Je sis qu'il a utilisé la balise pour permettre de simuler un "choix" au niveau du clic utilisateur, mais il a pas précisé plus loin.
ps 3: j'ai tenté de changer autant dans le code CSS général que dans la page annexe, donc aucun changement ^^'.
Alors, pour être franc, j'ai pour dire zéro connaissance dans les balises Input, donc je ne sais pas trop, je me suis aidé de divers tuto ci et là.
Je vais déjà tester ce que tu m'a proposé voir si ça change quelque chose ^^.
Ps: j'ai ajouté à la fin du post les éléments demandés ; )
ps en edit: j'ai vite testé ton changement, ça ne change rien d'apparence en tout cas, donc je saurai pas dire pourquoi le type l'a mis.
Je sis qu'il a utilisé la balise pour permettre de simuler un "choix" au niveau du clic utilisateur, mais il a pas précisé plus loin.
ps 3: j'ai tenté de changer autant dans le code CSS général que dans la page annexe, donc aucun changement ^^'.
Re: Systèmes d'onglets sans Javascript
En fait le rendu sera le même, c'est juste plus rapide de metttre display none ^^
Merci pour les liens ^^
Pour le code HTML mis à l'intérieur du message sur ton forum, pourrais tu essayer de le copier sur ce site là http://www.willpeavy.com/minifier/, cliquer sur le bouton "Minify" puis remplacer le texte de ton message par le code qu'ils vont générer (le code sans les retours à la ligne). Le problème peut provenir de là ^^
Merci pour les liens ^^
Pour le code HTML mis à l'intérieur du message sur ton forum, pourrais tu essayer de le copier sur ce site là http://www.willpeavy.com/minifier/, cliquer sur le bouton "Minify" puis remplacer le texte de ton message par le code qu'ils vont générer (le code sans les retours à la ligne). Le problème peut provenir de là ^^
Re: Systèmes d'onglets sans Javascript
Alors, je me suis explosé de rire à voir l'étrange effet que ça a eut, mais il y a de l'amélioration: la barre d'onglet fonctionne, mais la mise en page reste totalement foireuse. Je suppose que ça veut au moins dire que la technique que j'veux employer fonctionne, mais qu'il va falloir trouver les à-côté pour corriger la mise en page : s
Par souci de lisibilité, j'ai posté ce nouvel essai dans un post à part (vu que j'ai peur que les post empiètent les uns sur les autres avec ce bug de décalage)
http://www.kh-memento.com/t140-test-fiche-de-combat-2-pareil-pas-poster-ici-merci#357
Par souci de lisibilité, j'ai posté ce nouvel essai dans un post à part (vu que j'ai peur que les post empiètent les uns sur les autres avec ce bug de décalage)
http://www.kh-memento.com/t140-test-fiche-de-combat-2-pareil-pas-poster-ici-merci#357
Re: Systèmes d'onglets sans Javascript
Bonjour,
le problème vient du fait que via l'éditeur de messages, les retours à la lignes sont pris en compte comme des <br/> : vos onglets se retrouvent sous le tableau, c'est pourquoi on ne les voit plus, et chaque onglet est un peu plus bas que le précédent à cause des retours à la ligne utilisés pour la mise en forme du code. Retirez tous ces retours à la ligne et vous obtiendrez à nouveau l'apparence souhaitée ^^
EDIT : pardon, réponse déjà donnée pour ce souci ><"
pour ce qui est de la finde la mise en forme, il devrait suffire de rabaisser le contenu des onglets, et de fixer la hauteur de .TabCombatsCombat ?
le problème vient du fait que via l'éditeur de messages, les retours à la lignes sont pris en compte comme des <br/> : vos onglets se retrouvent sous le tableau, c'est pourquoi on ne les voit plus, et chaque onglet est un peu plus bas que le précédent à cause des retours à la ligne utilisés pour la mise en forme du code. Retirez tous ces retours à la ligne et vous obtiendrez à nouveau l'apparence souhaitée ^^
EDIT : pardon, réponse déjà donnée pour ce souci ><"
pour ce qui est de la finde la mise en forme, il devrait suffire de rabaisser le contenu des onglets, et de fixer la hauteur de .TabCombatsCombat ?
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Systèmes d'onglets sans Javascript
Bonjour à toi aussi et merci. Après un dernier passage avec la touche effacer sur tout ce qui pouvait clocher, la forme actuelle de la fiche est enfin entièrement fonctionnelle et non déformée:
http://www.kh-memento.com/t140-test-fiche-de-combat-2-pareil-pas-poster-ici-merci#357
Il manque plus qu'à trouver ce qui décale la fiche vers le bas et surtout ce qui la fait descendre trop bas.
Peut-être un soucis avec un des Div? ou alors quelque chose à changer dans le CSS qui forcerait la fiche à sortir du champ?
Il est méga brouillon vu que je l'ai passé au Minifier, mais voici toujours le code actuel donc:
Merci encore de l'aide apportée ^^
Edit: je viens de voir ton edit xD.
Maais mersi quand même car ta consigne a arrangé encore un peu plus le soucis.
Je vais tenter de voir ce que j'peux toucher au .tabcombat, merci encore.
http://www.kh-memento.com/t140-test-fiche-de-combat-2-pareil-pas-poster-ici-merci#357
Il manque plus qu'à trouver ce qui décale la fiche vers le bas et surtout ce qui la fait descendre trop bas.
Peut-être un soucis avec un des Div? ou alors quelque chose à changer dans le CSS qui forcerait la fiche à sortir du champ?
Il est méga brouillon vu que je l'ai passé au Minifier, mais voici toujours le code actuel donc:
- Code:
<div><ul class="TabCombatsCombat"><li><input type="radio" checked name="TabCombatsCombat" id="TabCombat1"><label for="TabCombat1">Équipement</label><div id="TabCombat-content1" class="TabCombat-content animated fadeIn"><div id="CombatEquipement"><div id="CombatArmes"><div id="CombatArmesHeader">Armes</div></div><div id="CombatArmures"><div id="CombatArmuresHeader">Armures</div></div><div id="CombatAccessoires"><div id="CombatAccessoiresHeader">Accessoires</div></div></div></div></li><li><input type="radio" name="TabCombatsCombat" id="TabCombat2"><label for="TabCombat2">Mêlée</label><div id="TabCombat-content2" class="TabCombat-content animated fadeIn"><div id="CombatStylesCadre"><div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute;left: 6px;font-weight: bold;">Description du style:</div><div style="position: absolute;top: 20px;left: 3px;width: 345px;height: 365;overflow: auto">BLABLA</div></div></div></div></li><li><input type="radio" name="TabCombatsCombat" id="TabCombat3"><label for="TabCombat3">Distance</label><div id="TabCombat-content3" class="TabCombat-content animated fadeIn"><div id="CombatStylesCadre"><div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute;left: 6px;font-weight: bold;">Description du style:</div><div style="position: absolute;top: 20px;left: 3px;width: 345px;height: 365;overflow: auto">BLABLA</div></div></div></div></li><li><input type="radio" name="TabCombatsCombat" id="TabCombat4"><label for="TabCombat4">Défense</label><div id="TabCombat-content1" class="TabCombat-content animated fadeIn"><div id="CombatStylesCadre"><div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute;left: 6px;font-weight: bold;">Description du style:</div><div style="position: absolute;top: 20px;left: 3px;width: 345px;height: 365;overflow: auto">BLABLA</div></div></div></div></li><li><input type="radio" name="TabCombatsCombat" id="TabCombat5"><label for="TabCombat5">Magie</label><div id="TabCombat-content2" class="TabCombat-content animated fadeIn"><div id="CombatStylesCadre"><div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute;left: 6px;font-weight: bold;">Description du style:</div><div style="position: absolute;top: 20px;left: 3px;width: 345px;height: 365;overflow: auto">BLABLA</div></div></div></div></li><li><input type="radio" name="TabCombatsCombat" id="TabCombat6"><label for="TabCombat6">Soutien</label><div id="TabCombat-content3" class="TabCombat-content animated fadeIn"><div id="CombatStylesCadre"><div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute;left: 6px;font-weight: bold;">Description du style:</div><div style="position: absolute;top: 20px;left: 3px;width: 345px;height: 365;overflow: auto">BLABLA</div></div></div></div></li><li><input type="radio" name="TabCombatsCombat" id="TabCombat7"><label for="TabCombat7">Sabotage</label><div id="TabCombat-content1" class="TabCombat-content animated fadeIn"><div id="CombatStylesCadre"><div id="CombatStylesHeader">Excellente maîtrise!</div><div id="CombatStylesComp">Compétences</div><div id="CombatStylesDescription"><div style="position: absolute;left: 6px;font-weight: bold;">Description du style:</div><div style="position: absolute;top: 20px;left: 3px;width: 345px;height: 365;overflow: auto">BLABLA</div></div></div></div></li><li><input type="radio" name="TabCombatsCombat" id="TabCombat8"><label for="TabCombat8">Don(s)</label><div id="TabCombat-content2" class="TabCombat-content animated fadeIn"><div id="CombatDons"><div id="CombatDonUnique">DON UNIQUE</div><div id="CombatDonUniqueDes">Décrivez ici un don unique à votre personnage, quelque chose qui est si spécial que ce n'est pas une abilité que n'importe qui pourrait avoir. Bien entendu, plus la capacité est puissante, plus il faudra une contre partie élevée pour y avoir droit.</div></div></div></li><li><input type="radio" name="TabCombatsCombat" id="TabCombat9"><label for="TabCombat9">Bonus</label><div id="TabCombat-content3" class="TabCombat-content animated fadeIn">dez,dezdozejdiozed</div></li></ul></div>
Merci encore de l'aide apportée ^^
Edit: je viens de voir ton edit xD.
Maais mersi quand même car ta consigne a arrangé encore un peu plus le soucis.
Je vais tenter de voir ce que j'peux toucher au .tabcombat, merci encore.
Re: Systèmes d'onglets sans Javascript
La fiche ne commence pas en haut de message cas vous avez appliqué une marge de 75px au dessus de la fiche :
Pour ce qui est de la hauteur, le contenu qui est en position absolute n'est pas pris en compte, il faut donc fixer la hauteur de la fiche :
- Code:
.TabCombatsCombat {
float: none;
list-style: none;
margin: 75px auto;
padding: 0;
position: relative;
width: 743px;
}
Pour ce qui est de la hauteur, le contenu qui est en position absolute n'est pas pris en compte, il faut donc fixer la hauteur de la fiche :
- Code:
.TabCombatsCombat {
float: none;
list-style: none;
margin: auto;
padding: 0;
position: relative;
width: 743px;
height: 520px;
}
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Systèmes d'onglets sans Javascript
Double post désolé, mais juste pour dire un énorme merci au soutien car le bug est maintenant réglé ^^'.
Donc au final c'était des soucis de saut de ligne et de marge... Oui MlleAlys, j'ai donc imposé une hauteur à la balise que tu m'a pointée et j'ai aussi notée cette marge auto de 75px, tu m'étonne qu'elle soit décalée la fiche.
Encore merci \o/ J'édite mon premier post pour dire que le problème est résolu ; )
edit: je viens de voir que tu m'a détaillé ce que tu voulais dire, bref, merci encore ^^.
Donc au final c'était des soucis de saut de ligne et de marge... Oui MlleAlys, j'ai donc imposé une hauteur à la balise que tu m'a pointée et j'ai aussi notée cette marge auto de 75px, tu m'étonne qu'elle soit décalée la fiche.
Encore merci \o/ J'édite mon premier post pour dire que le problème est résolu ; )
edit: je viens de voir que tu m'a détaillé ce que tu voulais dire, bref, merci encore ^^.
Sujets similaires
» Systèmes de Badges/Trophées (Succès ou Achievements) sans codage nécessaire
» Deux systèmes de points ?
» Comment Réinitialisé le Systèmes de Points?
» Suppression de compte sans intervention du pseudo et de l'administrateur et sans raison
» Javascript
» Deux systèmes de points ?
» Comment Réinitialisé le Systèmes de Points?
» Suppression de compte sans intervention du pseudo et de l'administrateur et sans raison
» Javascript
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum