creation site web sous word + utilisation HTML + CSS

**ericdev67** · 08/02/2012, 22h28

bonjour,

J'ai un code HTML + CSS que je mets dans WORD :
HTML :

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
<HTML><HEAD>
<link rel="stylesheet" type="text/css" href="sty.css">
</HEAD>
<BODY>
 
<DIV id=monmenu style="PADDING-LEFT: 5px">
 
 
<UL class=niveau1>
  <LI>Niveaux
  	<UL class=niveau2 style="LEFT: 0px; TOP: 22px">
    		<LI>Niveau 1
    			<UL class=niveau3>
      				<LI>Niveau 1-1
 
 
 
				<LI>Niveau 1-2
    					<UL class=niveau4> 
      						<LI><A href="Doc/E2.xlsx">Niveau 1-2-1</A></LI>
						<LI><A href="Doc/E2.xlsx">Niveau 1-2-2</A></LI>
					</UL>
				<LI>Niveau 1-3
 
						</LI>
						</LI>
						</LI>
 
			</UL>
		</LI>
	</UL>
  </LI>
</UL>
 
 
</DIV>
</BODY>
</HTML>

code CSS :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<STYLE type=text/css>#monmenu {
	FONT-WEIGHT: bold; FONT-SIZE: 80%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL {
	BORDER-RIGHT: #b0b0b0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0b0b0 1px solid; DISPLAY: none; PADDING-LEFT: 0px; LEFT:164px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #b0b0b0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #b0b0b0 1px solid; POSITION: absolute; TOP: -1px
}
#monmenu LI {
	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 160px; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #e0e0e0
}
#monmenu LI:hover {
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI.sfhover {
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI A {
	TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI:hover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI LI LI:hover UL.niveau4 {
	DISPLAY: block
}
#monmenu LI.sfhover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI LI LI.sfhover UL.niveau4 {
	DISPLAY: block
 
}
</STYLE>
<!--[if lt IE 7]>
<SCRIPT type=text/javascript>
// Fonction destinée à remplacer le "LI:hover" pour IE 6
sfHover = function() {
var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</SCRIPT>
 
<STYLE type=text/css>#monmenu LI {
	WIDTH: 164px
}
</STYLE>

(excusez si le code n'est pas "propre", mais j'ai essayé de compiler 2-3 trucs trouvé sur le net....

J'inclus ce code dans Word, je l'enregistre en page web, j'ouvre avec mon explorateur, tout fonctionne nickel.

Par contre, je souhaite faire des changements, donc j'ouvre mon document en faisant "modifier avec Word", je mets mes changements, j'enregistre, et lorsque je l'ouvre dans mon explorateur, cela ne fonctionne plus : mes menus déroulants ne se déploient plus.....

Pourquoi ?
Quelle est la solution ??

Une piste, une explication ?

Merci,
A+

**Heureux-oli** · 08/02/2012, 23h29

Salut,

Word est le plus mauvais éditeur WEB que tu puisses utiliser.

Il va ajouter plein de chose dans ton code et par la même occasion en supprimer lors de l'édition.

Passer par un autre logiciel me semble être un bon choix.

**ericdev67** · 08/02/2012, 23h44

Merci HEUREUX-OLI,

Je te remercie, ça me rassure de comprendre pourquoi ça ne fonctionne pas normalement.
Comme tu le vois, j'avais posté un post sur les listes déroulante (auquel tu avais répondu et je t'en remercie) et puis, je me suis dit que pour éviter (ou peut-être connaitre un nouveau language), j'allais me mettre au HTLM et/ou le CSS....

Mais je vois que Word pose problème.....A tout hasard, tu pourrais me conseiller un autre logiciel puisque Word ne convient pas ? (gratuit ou libre ?, j'ai essayé Nvu & Cie, openoffice, sans succès, même problème....)

En fait, je souhaiterais faire un menu déroulant (=mon code), dans une page Web, et que des collègues puissent alimenter : par exemple, je vais mettre un texte défilant, et je souhaite qu'ils puissent modifier et/ou ajouter du texte. c'est pourquoi je pensais à utiliser Word : commun à tous et toutes, ils ouvrent la page web avec Word, modifient le texte, la referme.....

Et c'est là où se situe mon problème....: lorsqu'ils l'ouvrent et modifient 1 truc, lorsqu'ils l'enregistrent, je n'ai plus mon menu déroulant actif....

Tu as une idée ? une piste ?

Merci,
A+

**Sepia** · 10/02/2012, 03h22

Salut ericdev67,

Essaie de vrais éditeurs HTML en WYSIWYG comme Dreamweaver. Si c'est ponctuel, tu es des versions d'éval. sinon ça coute dans 500 € ou regarde du côté des softs libres (KompoZer, le remplaçant non-officiel de NVu)

@+

**ericdev67** · 10/02/2012, 09h32

Merci Sepia,

J'ai suivi tes conseils : j'ai pris dreamweaver en demo et je vais me débrouiller avec ça

Merci,

A+ pour de prochaines aventures......

creation site web sous word + utilisation HTML + CSS

Word

Discussions similaires

Partager

Partager