Menu qui chevauche le texte

**pihug12** · 09/10/2005, 18h58

Bonjour tout le monde !!

Ce post est un peu la suite de celui-ci.

J'ai installé ce menu avec succés mais le menu déborde sur le texte :

Est-ce qu'en modifiant la première partie du script je pourrais arranger ça ??

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
<!--
#master {position:absolute; width: 200px; top: 10px; left: -120px; z-index:2; visibility:visible;}
#menu {position:absolute; width: 18px; top: 0px; left: 120px; z-index:5; visibility:visible;}
#top {position:absolute; width: 120px; top: 0px; left: 0px; z-index:5; visibility:visible;}
#liens {position:absolute; width: 120px; top: 6px; left: 0px; z-index:5; visibility:visible;}
.NavJump {font-family: arial; font-size: 10pt; color: #808080; text-decoration: none;}
a:link.NavJump {color : #808080;}
a:visited.NavJump {color : #808080;}
a:active.NavJump {text-decoration: none; color: #C0C0C0;}
a:hover.NavJump {text-decoration: none; color: #C0C0C0;}
-->
</style>

Merci de votre aide !!
pihug12 8)

**ThitoO** · 09/10/2005, 22h05

Envoi tout le code source de ton menu, pas seulement la CSS. On peut pas voir a koi correspond les diferents ID de ton css.
Merci

ThitoO

**pihug12** · 10/10/2005, 17h41

Bonjour ThitoO !

Pour voir le script complet il fallait cliqué sur le lien juste au-dessus du screenshot

Mais je poste tout quand même :
* Entre <head> et </head>

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
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
129
130
<style type="text/css">
<!--
#master {position:absolute; width: 200px; top: 10px; left: -120px; z-index:2; visibility:visible;}
#menu {position:absolute; width: 18px; top: 0px; left: 120px; z-index:5; visibility:visible;}
#top {position:absolute; width: 120px; top: 0px; left: 0px; z-index:5; visibility:visible;}
#liens {position:absolute; width: 120px; top: 6px; left: 0px; z-index:5; visibility:visible;}
.NavJump {font-family: arial; font-size: 10pt; color: #808080; text-decoration: none;}
a:link.NavJump {color : #808080;}
a:visited.NavJump {color : #808080;}
a:active.NavJump {text-decoration: none; color: #C0C0C0;}
a:hover.NavJump {text-decoration: none; color: #C0C0C0;}
-->
</style>
<script language = "javascript">
<!--
 
/*
Script amélioré, mis à jour pour NS6+ - Mozilla 1+ et commenté par le site WEB Creation.
Non testé pour NS4 mais devrait fonctionner.
D'autres scripts ?
>> http://www.web-creation-fr.com
Merci de laisser ces commentaires.
*/
 
// On définit 3 variables, selon les propriétés de calques gérées par le navigateur
var ie = document . all ? 1 : 0
var ns = document . layers ? 1 : 0
var ns6 = document.getElementById && !document.all ? 1 : 0
 
// Position en hauteur une fois le menu ouvert
var topOpen = 10;
// Position en hauteur lorsque le menu est fermé
var topClosed = 10;
 
var master = new Object("element")
master . curLeft = -120; // Position de départ du calque
master . curTop = 10; // Hauteur de départ du calque
master . gapLeft = 0;
master . gapTop = 0;
master . timer = null;
 
function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop)
{
    clearTimeout(eval(layerName) . timer);
 
    if (eval(layerName) . curLeft != fromLeft) {
	    // Calcul position horizontale
        if ((Math . max(eval(layerName) . curLeft, fromLeft) - Math . min(eval(layerName) . curLeft, fromLeft)) < paceLeft) {
            eval(layerName) . curLeft = fromLeft;
        } else if (eval(layerName) . curLeft < fromLeft) {
            eval(layerName) . curLeft = eval(layerName) . curLeft + paceLeft;
        } else if (eval(layerName) . curLeft > fromLeft) {
            eval(layerName) . curLeft = eval(layerName) . curLeft - paceLeft;
        } 
        // Définition de la position horizontale du menu
        if (ie) {
            document . all[layerName] . style . left = eval(layerName) . curLeft;
        } 
        if (ns) {
            document[layerName] . left = eval(layerName) . curLeft;
        } 
        if (ns6) {
            document . getElementById(layerName) . style . left = eval(layerName) . curLeft;
        } 
    } 
 
    if (eval(layerName) . curTop != fromTop) {
	    // Calcul position verticale
        if ((Math . max(eval(layerName) . curTop, fromTop) - Math . min(eval(layerName) . curTop, fromTop)) < paceTop) {
            eval(layerName) . curTop = fromTop;
        } else if (eval(layerName) . curTop < fromTop) {
            eval(layerName) . curTop = eval(layerName) . curTop + paceTop;
        } else if (eval(layerName) . curTop > fromTop) {
            eval(layerName) . curTop = eval(layerName) . curTop - paceTop;
        } 
        // Définition position verticale du menu
        if (ie) {
            document . all[layerName] . style . top = eval(layerName) . curTop;
        } 
        if (ns) {
            document[layerName] . top = eval(layerName) . curTop;
        } 
        if (ns6) {
            document . getElementById(layerName) . style . top = eval(layerName) . curTop;
        } 
    } 
    eval(layerName) . timer = setTimeout('moveAlong("' + layerName + '",' + paceLeft + ',' + paceTop + ',' + fromLeft + ',' + fromTop + ')', 30)
 
} // Fin function MoveAlong
 
function setPace(layerName, fromLeft, fromTop, motionSpeed)
{
    eval(layerName) . gapLeft = (Math . max(eval(layerName) . curLeft, fromLeft) - Math . min(eval(layerName) . curLeft, fromLeft)) / motionSpeed;
    eval(layerName) . gapTop = (Math . max(eval(layerName) . curTop, fromTop) - Math . min(eval(layerName) . curTop, fromTop)) / motionSpeed;
    // Ouvre le menu
    moveAlong(layerName, eval(layerName) . gapLeft, eval(layerName) . gapTop, fromLeft, fromTop)
} 
 
// Définition du menu à "fermé" lors de l'arrivée sur le site
var expandState = 0;
 
// Fonction Expand ()
function expand()
{
    if (expandState == 0) { // si le menu est fermé
        // Passe les paramètres d'ouverture à la fonction setPace qui contient la fonction d'ouverture "moveAlong()"
        // setPace ("nom du calque", "position par rapport à la gauche", "position en hauteur", "vitesse d'ouverture")
        setPace("master", 0, topOpen, 10); 
        // Modification de l'image "menu" :
        if (ie) {
            document . menutop . src = "7/menub.gif";
        } else if (ns6) {
            document . getElementById("img_menu") . innerHTML = "<img src=\"7/menub.gif\" border=\"0\" width=\"18\" height=\"70\">";
        } 
        expandState = 1; // définition de l'état à "ouvert"
    } else { // Si le menu est ouvert
        setPace("master", -120, topClosed, 10); // Referme le menu
        // Modification de l'image "menu" :
        if (ie) {
            document . menutop . src = "7/menu.gif";
        } else if (ns6) {
            document . getElementById("img_menu") . innerHTML = "<img src=\"7/menu.gif\" border=\"0\" width=\"18\" height=\"70\">";
        } 
        expandState = 0; // définition de l'état à "fermé"
    } 
} 
 
 
//-->
</script>

* Entre <body> et </body>

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
62
63
64
65
66
67
68
69
70
<div id="master">
	<div id="menu">
	<table border="0" width="18" cellspacing="0" cellpadding="0">
		<tr>
			<td width="100%">
			<a href="javascript:expand()" onfocus="this.blur()">
			<div id="img_menu">
			<img name="menutop" border="0" src="7/menu.gif" width="18" height="70">
			</div>
			</a>
			</td>
		</tr>
	</table>
	</div>
 
	<div id="top">
	<table border="0" width="120" cellspacing="0" cellpadding="0">
		<tr>
			<td width="100%"><img border="0" src="7/top.gif" width="120" height="6"></td>
		</tr>
	</table>
	</div>
 
	<div id="liens">
	<table border="0" width="120" cellspacing="0" cellpadding="5">
		<tr>
			<td width="100%">
			<table border="0" width="100%" bgcolor="#808080" cellspacing="0" cellpadding="0">
				<tr>
					<td width="100%">
					<table border="0" width="100%" cellspacing="1" cellpadding="5">
						<tr>
							<td width="100%" bgcolor="#FFFFFF">
							<a href="#" class="NavJump"><b>Lien 1</b></a><br>
							<a href="#" class="NavJump"><b>Lien 2</b></a><br>
							<a href="#" class="NavJump"><b>Lien 3</b></a><br>
							<a href="#" class="NavJump"><b>Lien 4</b></a><br>
							</td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
			</td>
		</tr>
	</table>
	</div>
</div>
 
<script language = "javascript">
<!--
if (ie) { var sidemenu = document . all . master; }
if (ns) { var sidemenu = document . master; } 
if (ns6) { var sidemenu = document . getElementById("master"); } 
 
// Fonction pour que le menu reste toujours visible lors du scroll
function FixY()
{
    if (expandState == 0) {
        if (ie || ns6) { sidemenu . style . top = document . body . scrollTop + topClosed; } 
        if (ns) { sidemenu . top = window . pageYOffset + topClosed; } 
    } else {
        if (ie || ns6) { sidemenu . style . top = document . body . scrollTop + topOpen; } 
        if (ns) { sidemenu . top = window . pageYOffset + topOpen; } 
    } 
} 
// Fonction setInterval qui appelle toutes les 100 ms la fonction FixY qui détecte la position du menu et le remet en place s'il y a scroll
setInterval("FixY()", 100);
//-->
</script>

Ca fait un peu long je trouve quand même

+++
pihug12 8)

**pihug12** · 11/10/2005, 19h52

S'ils vous plait !!

Aidez-moi !!

C'est si difficile que ça ??

pihug12 8)

**dasdeb** · 11/10/2005, 20h05

En fait, si ton menu gauche reste fixe quand on scroll, il faut que tu définisses une marge gauche d'au moins la largeur de l'onglet qui dépasse en permanence pour tout ton site. Ainsi ce menu ne passera par-dessus le contenu de ton site que lorsqu'il sera déployé, ce qui est normal.

Le plus simple est peut-être que tu définisse un div global en lui donnant un padding-left de la largeur de ton onglet plus un ou deux pixels.

**pihug12** · 11/10/2005, 20h40

Salut !

Envoyé par dasdeb

Le plus simple est peut-être que tu définisse un div global en lui donnant un padding-left de la largeur de ton onglet plus un ou deux pixels.

Euh... peut-être... oui !!
Tu peux pas me donner une ligne de code parce que la je me sens tout largué.

Si je comprend bien cette ligne est à mettre dans la partie "style" (CSS) du script ??

Merci de ton aide précieuse !
pihug12 8)

**pihug12** · 12/10/2005, 13h45

J'ai cherché un peu sur Google, mais c'est compliqué et je ne comprend pas tout.
Je suis sur que ca se fait en deux lignes.
Personne peut me dire comment on fait ??

_______________________________________________
EDIT :
Il faut que je mette ca :

Code :

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

1
2
3
.conteneur {
  padding-top: 200px;
}

dans un CSS et ça :

Code :

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

1
2
3
4
5
<div class="conteneur">
 
   texte bla bla bla
   ....
</div>

dans le HTML ??
Comment faire pour que ca s'applique à tout le document ??
_______________________________________________

Merci !
pihug12 8)

**dasdeb** · 12/10/2005, 21h33

Je suppose que le contenu principal de ton site vient après

Code :

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

1
2
3
4
// Fonction setInterval qui appelle toutes les 100 ms la fonction FixY qui détecte la position du menu et le remet en place s'il y a scroll
setInterval("FixY()", 100);
//-->
</script>

Donc ton

Code :

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

1
2
3
4
5
<div class="conteneur">
 
   texte bla bla bla
   ....
</div>

vient après et entoure tout le reste de ton site.
Et dans le CSS, tu ajoute

Code :

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

1
2
3
.conteneur {
  padding-left: 20px;
}

Essaye déjà ça et dis-nous ce que ça donne.

**pihug12** · 13/10/2005, 19h50

Bonjour tout le monde !!

Le résultat est la :

Je trouve que c'est plutot pas mal (je pense que je vais mettre 18 à la place de 20 pixels qaund même

).
Le seul truc "un peu pénible", c'est ca :

Code :

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

1
2
3
<div class="conteneur">   
   texte bla bla bla 
</div>

Il n'y a pas un moyen pour que ce style soit appliqué à tout le reste du document ??

+++
pihug12 8)

Menu qui chevauche le texte

HTML

Vue hybride

Discussions similaires

Partager

Partager