Modification d'un attribut display

**laurentSc** · 30/10/2015, 16h48

Bonjour,

mon souci est que le fichier CSS n'est pas pris en compte sur le serveur cible de mon code et avec le navigateur par défaut (internet explorer). Ca marche bien avec Firefox sur ce serveur et avec tous les navigateurs en local ; puis-je faire quelque chose ?

**laurentSc** · 31/10/2015, 22h42

Bonsoir,

c'est sûr que c'était un peu court, mais c'est la déception et la longueur du code qui m'avaient conduit à écrire ça. Incapable de trouver une solution moi-même, je tente une autre solution, mais le résultat sera moins bien, et même cette solution plus simple, pas gagné...Comme je voudrais faire tourner ça dans la semaine qui vient, une aide sur le code qui ne tourne que avec Firefox (ou Chrome) mais pas avec IE (sur le serveur en question) serait bienvenue. Le code qui marche mal est un menu à 2 niveaux (les sous-menus du 2e niveau apparaissant sur hover). Ce qui marche mal, c'est que le hover ne fonctionne pas (Quand je survole, les menus de niveau 2 n'apparaissent pas). Je suis presque sûr que le problème a une solution dans le CSS mais aucune idée où ; donc voici le code :

Code html :

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
<?php
header('Content-type: text/html; charset=UTF-8');
session_start();
 
include $_SERVER['DOCUMENT_ROOT'].'eis/eis/config/config.php';
---
?>
 
<nav class="page">
<ul class="menu">
 
<li class="item_menu home"><a href="<?php echo SITE_URL_HTTP;?>/index.php?page=index.inc&lang=<?php echo $lang;?>" title="Accueil"><?php echo $str[2];?></a></li> 
	...
 
<li ><a href="#"><?php echo $str[320];?></a>
	<ul>
	<li class="item_menu item_menu_border spiceportal"><a href="---" title="---" target="_blank">
Spice Portal</a></li>
	...	
	</ul>
</li>
...
</ul>
</nav>

Code css :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
body {
	margin: 0px;
}
 
a {
	color: #333;
}
 
.page{
  font: normal 2em Arial, Helvetica, sans-serif;
  font-size : 1.2em;
  margin: 0 auto;
  width:60em;
}
 
.page h1{
  color:#006699;
  text-shadow:1px 1px 0 #fff;
  vertical-align:middle;
}
.page h1 img{
  vertical-align:middle;
  margin:0 1em 0 0;
}
.colorbackground {
background-color:#e1e4f2;
}	
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#EEE;
  background:#e1e4f2;
  border: 1px solid #48B;
  /*line-height:2em;*/
  height:7em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  /*top:3.0em; /* hauteur du bandeau principal = hauteur + padding */*/
  line-height:1.5em;
}
.menu li {
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:center;
}
.menu li div {
float : left;
color:black;
padding:0.2em;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
  background:#4D90FE;
 
  color:#FFF;
}
.menu li:hover > ul{
  display: block;/**/
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF;
  border-width:1px 1px 1px 1px;
  border:1px solid  #48B;
  border-width:1px;
  border-bottom:1px solid  #48B;
}
/* position et dimension des sous menus */
.menu ul li {
  margin:0;
  width:10em;
}
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
}
 
 
.item_menu {
  height:150px;
  background-position: left center;
  background-size: 80px 60px;
  background-repeat: no-repeat;
  padding-left: 0px; /* Adjust according to image size to push text across. */
}
.item_menu_border {
  border: 3px solid #e1e4f2;
}
 
.home {
  background-image: url('http://localhost/eis/eis/images/home.jpg');
}
 
.spiceportal {
  background-image: url('http://localhost/eis/eis/images/spiceLogo.png');
}
 
.spiceportal:hover{
	border: 3px solid red;
}

**laurentSc** · 01/11/2015, 15h04

Je viens d'avancer (un peu) ; j'étais en train de mettre au point un menu plus simple. Tout seul, il marche bien sur le serveur mais je viens de l'intégrer sur le site et il présente le même défaut que le premier ; il y a donc un conflit. Il ne reste "plus" qu'à trouver où...

**laurentSc** · 01/11/2015, 17h17

J'ai l'intention de faire plus simple, vu qu'il y a peu de chance que je trouve le conflit ; plutôt que faire un hover, par défaut la liste qui fait le menu de niveau 2 est à display=none et quand on clique sur le menu de niveau 1, je compte passer le display à block en javascript. Par contre la page qui va faire ça ne connait pas l'autre, donc comment peut-elle accéder aux éléments de l'autre page ?
Le code, qui ne marche pas pour le moment, de la page qui doit manipuler l'élément de l'autre page est :

menu_tools.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php
session_start();
include $_SERVER['DOCUMENT_ROOT'].'eis/eis/config/config.php';
?>
<script>
getElementById('menu_tools').style.display="block";
</script>
<?php
 
header('Location: '.SITE_URL_HTTP.'/index.php?&lang='.$_SESSION['lang']);
?>

sachant que menu_tools est l'id de la liste à faire apparaître :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<li class="colorbackground"><a href="menu_tools.php"><?php echo $str[320];?></a>
	<ul class="colorbackground" id="menu_tools">
...

**laurentSc** · 01/11/2015, 20h18

Bonsoir,

je viens d'avoir une idée pour rester sur la page du menu, mais ça ne marche pas et je comprends pas pourquoi (la liste de id menu_tools ne s'affiche quand on clique) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<li class="colorbackground"><a href="#" onclick="javascript:getElementById('menu_tools').style.display='block';"><?php echo $str[320];?></a>
	<ul class="colorbackground" id="menu_tools">
...

EDIT : j'ai modifié le titre de la discussion vu que le titre initial n'était plus valable du tout.

**laurentSc** · 01/11/2015, 21h53

Bonsoir,

petit complément d'info : cet élément de niveau 1 du menu appartient à une liste de classe CSS menu et on a

Code css :

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
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  /*top:3.0em; /* hauteur du bandeau principal = hauteur + padding */*/
  line-height:1.5em;
}
.menu li {
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:center;
  width:100px;
}

EDIT : comme le besoin est de modifier du CSS par du javascript, il est peut-être plus judicieux de placer la discussion dans le forum javascript . Si tel est le cas, je laisse faire un modo.

**NoSmoking** · 03/11/2015, 12h08

Bonjour,
quand je vois

EDIT : j'ai modifié le titre de la discussion vu que le titre initial n'était plus valable du tout.

puis

EDIT : comme le besoin est de modifier du CSS par du javascript, il est peut-être plus judicieux de placer la discussion dans le forum javascript ...

on peut légitimement se poser la question mais qu'est ce que tu veux VRAIMENT faire ?

**laurentSc** · 03/11/2015, 22h54

Comme je l'ai déjà dit par ailleurs, le hover ne fonctionne pas sur le serveur cible ; de plus le onclick du post #5 qui ne marche pas non plus, c'est peut-être la même raison ; donc du coup, mon idée est que, le menu de niveau 2 étant une liste (<ul>), par défaut celle-ci est placée en display=none, et quand on clique sur le lien de niveau 1, cette liste est mise en display=block.

**NoSmoking** · 04/11/2015, 14h16

Comme je l'ai déjà dit par ailleurs, le hover ne fonctionne pas sur le serveur cible

le serveur n'a rien à voir la dedans, c'est le navigateur et son moteur de rendu qui fait le boulot.

...de plus le onclick du post #5 qui ne marche pas non plus...

Je ne saisie pas où est le problème, cela fonctionne avec ce code simple, quelles retouches faites quand même

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul>
  <li class="colorbackground"><a href="#" onclick="document.getElementById('menu_tools').style.display='block';">Ouvre</a>
    <ul class="colorbackground" id="menu_tools">
      <li>11111111111</li>
      <li>22222222222</li>
    </ul>
  </li>
</ul>

et le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#menu_tools {display:none}

**laurentSc** · 08/11/2015, 13h03

Je m'aperçois que j'ai oublié de répondre, mais ça marche avec

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="id_tools=getElementById('menu_tools');id_tools.style.display=(id_tools.style.display=='block')?'none':'block';">

Modification d'un attribut display

CSS

Discussions similaires

Partager

Partager