IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Affichage qui se déforme


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Février 2006
    Messages
    41
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Février 2006
    Messages : 41
    Par défaut Affichage qui se déforme
    Bonjour,
    Je suis actuellement sur un code avec lequel j'obtiens une erreur que je ne comprends pas... Pourtant, j'ai un code similaire juste au dessus, qui fonctionne parfaitement... ^^
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <table id="tablenote">
    	<tr>
    		<th class="headern">Domaine</th>
    		<th class="headern">Note</th>
    	</tr>
    	<tr>
    		<td class="domainn1">Graphisme</td>
    		<td class="noten1">15</td>
    	</tr>
    	<tr>
    		<td class="domainn2">Gameplay</td>
    		<td class="noten2">17</td>
    	</tr>
    	...
    </table>
    <table id="note_mod">
    	<tr>
    		<th class="headern">Domaine</th>
    		<th class="headern">Note</th>
    	</tr>
    	<tr>
    		<td class="domainn1">Graphisme</td>
    		<td class="noten1">
    			<select name="note[]"  class="champN" size="" title="Graphisme">
    				<option value="1">1 / 20</option>
    				<option value="2">2 / 20</option>
    				...
    				<option value="19">19 / 20</option>
    				<option value="20">20 / 20</option>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td class="domainn2">Gameplay</td>
    		<td class="noten2">
    			<select name="note[]"  class="champN" size="" title="Gameplay">
    				<option value="1">1 / 20</option>
    				<option value="2">2 / 20</option>
    				...
    				<option value="20">20 / 20</option>
    			</select>
    		</td>
    	</tr>
    	...
    </table>
    (Code légèrement abbrégé... ^^)
    Et voici le CSS qui va avec...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #tablenote {
    	border: thin solid #000000;
    	border-collapse: collapse;
    	border-spacing: 0px;
    	width: 300px;
    	color: #000000;
    	margin: auto;
    }
    #note_mod {
    	border: thin solid #000000;
    	border-collapse: collapse;
    	border-spacing: 0px;
    	width: 300px;
    	color: #000000;
    	margin: auto;
    	display:none;
    }
    Le code css des cellules n'est normalement pas primodiale pour l'erreur... Il est relativement basique juste avec des définitions de couleurs ou autres...
    Et mon problème, c'est que je fais apparaître un seul des 2 tableaux à la fois. Lorsque je charge la page, le premier tableau s'affiche, et il s'affiche correctement...
    Ensuite, j'ai un bouton pour faire apparaitre le 2e tableau et cacher le premier, et là, les problèmes commencent... En effet, il semble qu'il ne prend plus les largeurs en considération, ni les marges! Ce qui fait que j'obtiens des tableaux à la largeur minimale, et sans marge latérale, ce qui fait qu'il n'est plus centré sur la page...
    Et à partir de ce moment, que j'affiche le premier tableau (qui fonctionnait bien) ou le 2e, aucun des 2 ne s'affiche juste...

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    il eut été plus intéressant que tu nous montras la fonction qui affiche/masque les tableaux.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Février 2006
    Messages
    41
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Février 2006
    Messages : 41
    Par défaut
    Elle est tout ce qu'il y a de plus simple... ^^ Je teste la visibilité du premier élément, si elle est sur visible, je commute les 2, puis l'inverse sinon... Ce qui donne ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function change(id1,id2)
    {
    	if(document.getElementById(id1).style.display == 'none')
    	{
    		document.getElementById(id1).style.display = 'inline';
    		document.getElementById(id2).style.display = 'none';
    	}
    	else
    	{
    		document.getElementById(id1).style.display = 'none';
    		document.getElementById(id2).style.display = 'inline';
    	}
    }
    Mais sincèrement, je doute que ca vienne de là, car tous les autres endroits ou la fonction est lancée, je n'ai aucuns bugs... Mais bon, sait-on jamais... ^^

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Citation Envoyé par 47-47 Voir le message
    Mais sincèrement, je doute que ca vienne de là, car tous les autres endroits ou la fonction est lancée, je n'ai aucuns bugs... Mais bon, sait-on jamais... ^^
    mets block à la place de inline, une table est un élément block et non inline par défaut

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Février 2006
    Messages
    41
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Février 2006
    Messages : 41
    Par défaut
    oops.. et si j'ai peu d'éléments tableaux, pour les autres parties, ca risque de poser problème?! ^^

    Il s'agit de balises "section" principalement pour les autres éléments... Mais on y trouve également des spans, et 2-3 autres balises je crois... ^^

    En attendant une éventuelle réponse, j'ai cherché un peu sur le web... Et malgré que je n'ai pas trouvé de réponse claire et nette, j'ai trouvé ma solution!

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    function change(id1,id2)
    {
    	if(document.getElementById(id1).nodeName == "TABLE")
    	{
    		if(document.getElementById(id1).style.display == 'none')
    		{
    			document.getElementById(id1).style.display = 'table';
    			document.getElementById(id2).style.display = 'none';
    		}
    		else
    		{
    			document.getElementById(id1).style.display = 'none';
    			document.getElementById(id2).style.display = 'table';
    		}
    	}
    	else
    	{
    		if(document.getElementById(id1).style.display == 'none')
    		{
    			document.getElementById(id1).style.display = 'inline';
    			document.getElementById(id2).style.display = 'none';
    		}
    		else
    		{
    			document.getElementById(id1).style.display = 'none';
    			document.getElementById(id2).style.display = 'inline';
    		}
    	}
    }
    A noter que j'ai utilisé l'attribut "table" pour le display, qui correspond encore mieux au résultat attendu...

  6. #6
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Nettement plus simple : sans tester le type d'élément, sache que si tu attribues une chaine vide à la propriété style.display, le moteur rétablit l'élément dans son mode de rendu "par défaut" ^^
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function onOff(elem) {
       if (elem.style.display == "none") elem.style.display = "";
       else elem.style.display = "none";
    }
    Pour les éléments "block" et "inline", ça marche nickel. A voir éventuellement si tout est OK pour l'ensemble des modes de rendu sur tous les différents navigateurs, mais jusqu'ici je n'ai pas eu de problème avec cette méthode.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AC-2007] Total Lignes s/s Formulaire Affichage qui disparait
    Par symbabeauchat dans le forum IHM
    Réponses: 9
    Dernier message: 07/07/2011, 10h56
  2. Affichage qui bug sous IE
    Par joboy84 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 18/12/2009, 11h37
  3. [Forum] Affichage qui ne suit pas
    Par Yuki_Hime dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 3
    Dernier message: 08/06/2009, 15h19
  4. [Drag & Drop]affichage qui se fige
    Par nanourene dans le forum AWT/Swing
    Réponses: 0
    Dernier message: 29/08/2008, 15h47
  5. Affichage qui rame :(
    Par jomree dans le forum Windows Forms
    Réponses: 4
    Dernier message: 08/06/2007, 14h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo