Question sur le dispaly:none
Theophile76
Messages postés
1817
Date d'inscription
Statut
Membre
Dernière intervention
-
Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention -
Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai un problème au niveau d'un attribue, et je ne sais pas si c'est normal ou pas.
Voilà en fait quand je mes l'atribue "display:none" dans ma feuille de style, il n'est pas prix en compte alors que quand il est mis directement dans le code html ( style="display:none;" )
là il est prix en compte.
Je ne comprend pas pourquoi c'est comme ça et comme j'aime bien que ma page html soit la plus propre possible je me pose la question :D
Donc si vous savez pourquoi ... merci ;)
j'ai un problème au niveau d'un attribue, et je ne sais pas si c'est normal ou pas.
Voilà en fait quand je mes l'atribue "display:none" dans ma feuille de style, il n'est pas prix en compte alors que quand il est mis directement dans le code html ( style="display:none;" )
là il est prix en compte.
Je ne comprend pas pourquoi c'est comme ça et comme j'aime bien que ma page html soit la plus propre possible je me pose la question :D
Donc si vous savez pourquoi ... merci ;)
7 réponses
tu peut mettre le bout du code HTML du balise que tu essaye de la rend invisible
est sa partie CSS aussi
est sa partie CSS aussi
Salut,
Quel est code que tu as mis dans ta CSS?
(Puis un petit effort sur l'orthographe, ça serait sympa ;-))
A+,
Quel est code que tu as mis dans ta CSS?
(Puis un petit effort sur l'orthographe, ça serait sympa ;-))
A+,
Merci.
HTML
Y'a pas de CSS car ça marche pas mais j'ai essayé en mettant ce code dans ma feuille de style et rien. :
PS : on est pas tous bon en orthographe x) et en plus j'en ai pas fait tant que ça oO
On s'ennuie pas avec l'informatique :)
HTML
<script language="javascript" type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
...
<td style="background-image:url(icon/modifier.png)" id="modifier" OnClick="javascript:visibilite('entre');">Modifier</td>
...
<tr id="entre" style="display:none"><td>blablabla</td></tr>
Y'a pas de CSS car ça marche pas mais j'ai essayé en mettant ce code dans ma feuille de style et rien. :
tr#entre
{
display:none;
}
PS : on est pas tous bon en orthographe x) et en plus j'en ai pas fait tant que ça oO
On s'ennuie pas avec l'informatique :)
Ok merci.
Donc j'ai essayé ce que tu m'a proposé :
Pour le CSS ça ne fonctionne toujours pas. De plus j'ai vue dans de nombreux code source ce le "display:none" directement dans la page html, c'est peut être car ils ont le même problème que moi.
Pour le javascript je l'ai fait mais du coup ça deviens plus large et ça se décale un peu, ça ne faisait pas ça avant.
Et puisque tu me parle du code javascript, serais tu comment faire pour que la ligne "tr" se déroule progressivement et non pas "d'un coup" ?
Et aussi, est-il possible de changer le contenu de ma case "Modifier" pour qu'au moment où con clique dessus, un "fermer" apparaisse ?
Donc j'ai essayé ce que tu m'a proposé :
Pour le CSS ça ne fonctionne toujours pas. De plus j'ai vue dans de nombreux code source ce le "display:none" directement dans la page html, c'est peut être car ils ont le même problème que moi.
Pour le javascript je l'ai fait mais du coup ça deviens plus large et ça se décale un peu, ça ne faisait pas ça avant.
Et puisque tu me parle du code javascript, serais tu comment faire pour que la ligne "tr" se déroule progressivement et non pas "d'un coup" ?
Et aussi, est-il possible de changer le contenu de ma case "Modifier" pour qu'au moment où con clique dessus, un "fermer" apparaisse ?
Alors pour le déroulement progressif je ne sais pas du tout, par contre pour le changement de modifier en ferme il faut faire :
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "block" ;
document.getElementById('modifier).innerHTML = "fermer";
} else {
targetElement.style.display = "none" ;
document.getElementById('modifier).innerHTML = "modifier";
}
}
Ouais bizarre tout ça...
J'assume que tu as mis ton CSS directement sur ta page HTML pour faire tes tests ? Sinon c'est sûr que ça pourrait être une erreur d'appel de la feuille de style externe... Mais je lis ta dernière question, et je ne vois pas comment le CSS peut être "moins bon" parce qu'il est mis directement sur une page HTML. Je le fais couramment pour des pages uniques, et je n'ai jamais de problème. Tant que tu as ta balise
Pour répondre à tes dernières questions :
Pour faire en sorte que le tr se déroule, je te recommande d'utiliser des bibliothèques Javascript telles que YUI. Ils ont des fonctions pour ça qui sont assez assurées de bien fonctionner ;)
Et pour changer le bouton modifier, je te conseille de mettre deux boutons, un Modifier, un Fermer, dont l'un est à display:none; et pas l'autre. Tu alternes les display quand on appuie sur un bouton ou l'autre.
Et aussi, tu ne devrais pas mettre ton tr à display:block; pour le rendre visible. Mets-le plutôt à display:table-row; qui est son display par défaut, sinon il ne se comportera pas comme un tr mais comme un div et ta table va planter.
J'assume que tu as mis ton CSS directement sur ta page HTML pour faire tes tests ? Sinon c'est sûr que ça pourrait être une erreur d'appel de la feuille de style externe... Mais je lis ta dernière question, et je ne vois pas comment le CSS peut être "moins bon" parce qu'il est mis directement sur une page HTML. Je le fais couramment pour des pages uniques, et je n'ai jamais de problème. Tant que tu as ta balise
<style type="text/css">...</style>dans on <head>, il ne peut rien se passer de si bizarre...
Pour répondre à tes dernières questions :
Pour faire en sorte que le tr se déroule, je te recommande d'utiliser des bibliothèques Javascript telles que YUI. Ils ont des fonctions pour ça qui sont assez assurées de bien fonctionner ;)
Et pour changer le bouton modifier, je te conseille de mettre deux boutons, un Modifier, un Fermer, dont l'un est à display:none; et pas l'autre. Tu alternes les display quand on appuie sur un bouton ou l'autre.
Et aussi, tu ne devrais pas mettre ton tr à display:block; pour le rendre visible. Mets-le plutôt à display:table-row; qui est son display par défaut, sinon il ne se comportera pas comme un tr mais comme un div et ta table va planter.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je pense à ça...
Essaie de préciser ton CSS autant que possible.
Au lieu de pointer à tr#entre, supposons que tu as le code suivant :
Mets :
C'est peut-être juste un conflit dans la hiérarchie de ton CSS. Ce serait bizarre vu que d'habitude les ID ont priorité, mais ça peut arriver...
Essaie de préciser ton CSS autant que possible.
Au lieu de pointer à tr#entre, supposons que tu as le code suivant :
<div id="contenu"> <div class="cadre"> <table> <tr id="entre"></tr> </table> </div> </div>
Mets :
#contenu .cadre table tr#entre { display:none; }
C'est peut-être juste un conflit dans la hiérarchie de ton CSS. Ce serait bizarre vu que d'habitude les ID ont priorité, mais ça peut arriver...
Merci pour vos réponse, donc pour le bouton modifier, j'ai fait comme proposé et ça fonctionne : DIV qui s'intervertissent en DISPLAY:NONE.
Par contre j'ai une petite question sur ça, y-a t-il un moyen de raccourcir ceci :
En quelle que chose de ce genre (bien sur ça ne fonctionne pas mon code hein ^^) :
Pour le problème du CSS DISPLAY:NONE j'ai laissé tombé, ça me prend de temps finalement tant que ça fonctionne, c'est l'important.
Même si ta solution est peut être viable Coeus, je suis encore novis en la matière et j'ai pas envie de trop bidouiller mon code lol
Pour le déroulement TR, je vais chercher grâce à vos piste :)
merci.
Par contre j'ai une petite question sur ça, y-a t-il un moyen de raccourcir ceci :
<div OnClick="javascript:visibilite('ligne'); javascript:visibilite('annuler'); javascript:visibilite('modifier');" id="valider">Valider</div>
En quelle que chose de ce genre (bien sur ça ne fonctionne pas mon code hein ^^) :
<div OnClick="javascript:visibilite('ligne, annuler, modifier'');id="valider">Valider</div>
Pour le problème du CSS DISPLAY:NONE j'ai laissé tombé, ça me prend de temps finalement tant que ça fonctionne, c'est l'important.
Même si ta solution est peut être viable Coeus, je suis encore novis en la matière et j'ai pas envie de trop bidouiller mon code lol
Pour le déroulement TR, je vais chercher grâce à vos piste :)
merci.
Pour simplifier ton code, tu peux simplement faire :
Ou alors, faire :
Ou encore mieux, je ne sais pas à quoi ressemble ta fonction visibilite, mais dedans, tu peux faire :
Un petit lien pour t'aider à visualiser la bouclew for in :
www.w3schools.com/js/js_loop_for_in.asp
Et pour le déroulement de tes TR, si tu emploies des bibliothèques genre YUI, je veux juste t'avertir que ça peut être compliqué pour quelqu'un qui se prétend "novice". Loin de moi l'idée de te décourager, mais aie dans l'idée de passer du temps là-dessus, sinon tu risques d'être déçu. Et n'hésite pas à redemander de l'aide ! ;)
<div onclick="visibilite('ligne'); visibilite('annuler'); visibilite('modifier');" id="valider">Valider</div>
Ou alors, faire :
<div onclick="visibilite_tout();" id="valider">Valider</div>
<script>
function visibilite_tout() {
visibilite('ligne');
visibilite('annuler');
visibilite('modifier');
}
</script>
Ou encore mieux, je ne sais pas à quoi ressemble ta fonction visibilite, mais dedans, tu peux faire :
function visibilite() {
var liste = ["ligne","annuler","modifier"];
for (x in liste) {
// le reste de ta fonction, tu remplaces "ligne","annuler" ou "modifier" par liste[x].
}
}
Un petit lien pour t'aider à visualiser la bouclew for in :
www.w3schools.com/js/js_loop_for_in.asp
Et pour le déroulement de tes TR, si tu emploies des bibliothèques genre YUI, je veux juste t'avertir que ça peut être compliqué pour quelqu'un qui se prétend "novice". Loin de moi l'idée de te décourager, mais aie dans l'idée de passer du temps là-dessus, sinon tu risques d'être déçu. Et n'hésite pas à redemander de l'aide ! ;)