Systèmes d'onglets sans Javascript

3 participants

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

Résolu Systèmes d'onglets sans Javascript

Message par SarkenHS Mer 17 Sep 2014 - 15:00

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
avatar

SarkenHS
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 01/01/2008

http://tontonhs.joueurs-rpg.com/
SarkenHS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Systèmes d'onglets sans Javascript

Message par [Nihil] Mer 17 Sep 2014 - 15:07

Hello Smile

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 Wink

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;
}
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

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

Résolu Re: Systèmes d'onglets sans Javascript

Message par SarkenHS Mer 17 Sep 2014 - 15:15

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 ^^'.
avatar

SarkenHS
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 01/01/2008

http://tontonhs.joueurs-rpg.com/
SarkenHS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Systèmes d'onglets sans Javascript

Message par [Nihil] Mer 17 Sep 2014 - 15:23

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à ^^
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

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

Résolu Re: Systèmes d'onglets sans Javascript

Message par SarkenHS Mer 17 Sep 2014 - 15:27

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
avatar

SarkenHS
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 01/01/2008

http://tontonhs.joueurs-rpg.com/
SarkenHS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Systèmes d'onglets sans Javascript

Message par MlleAlys Mer 17 Sep 2014 - 15:32

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 ?
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

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

Résolu Re: Systèmes d'onglets sans Javascript

Message par SarkenHS Mer 17 Sep 2014 - 15:45

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:
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.
avatar

SarkenHS
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 01/01/2008

http://tontonhs.joueurs-rpg.com/
SarkenHS a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Systèmes d'onglets sans Javascript

Message par MlleAlys Mer 17 Sep 2014 - 15:53

La fiche ne commence pas en haut de message cas vous avez appliqué une marge de 75px au dessus 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

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

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

Résolu Re: Systèmes d'onglets sans Javascript

Message par SarkenHS Mer 17 Sep 2014 - 15:56

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 ^^.
avatar

SarkenHS
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 01/01/2008

http://tontonhs.joueurs-rpg.com/
SarkenHS 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