Décalage lors du survol menu

**vodiem** · 14/08/2009, 19h47

Bonjour,

sur un menu lorsqu'on applique un style sur l'événement élément:hover cela affecte le positionnement des éléments suivants.

je ne le souhaite donc pas.
je sais que je peux résoudre ce problème en affectant une largeur fixe (ou voir avec js) mais cela ne me convient pas car je souhaiterais intégrer le css dans un cms et je ne connais pas forcement la largeur que l'item prendra avec son style.

j'ai donc écris un css qui pourrait résoudre ce problème, cela marche mais j'aimerais pouvoir centrer horizontalement "les items dans le contenant". voici un exemple pour illustrer le problème:

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
<html>
<head>
<style type="text/css">
 
#menu {
font-family: arial, helvetica, sans-serif;
display: inline;
background-color: #e0f0f0;
margin: 0 1px;
padding: 2px 5px;
}
 
#menu span {
color: #5e0e5e;
background-color: #f0c0c0;
}
 
cache, #menu span:hover {
font-weight: bold;
color: white;
text-shadow: black 0px 0px 5px;
}
 
</style>
</head>
<body>
 
<ul>
	<li id="menu">
		<span style="position:absolute;">Texte exemple</span>
		<cache style="visibility:hidden;">Texte exemple</cache>
	</li>
	<li id="menu">
		<span style="position:absolute;">Texte 2</span>
		<cache style="visibility:hidden;">Texte 2</cache>
	</li>
</ul>
 
</body>
</html>

donc: comment centrer les rectangles rouges dans les bleus?

ps: je sais que ce code ne me le permet pas à cause de la position absolute mais c'est le seul résultat le plus proche que j'ai pu obtenir.

**vodiem** · 15/08/2009, 03h24

j'ai trouvé ça:

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
<html>
<head>
<style type="text/css">
 
#menu {
font-family: arial, helvetica, sans-serif;
background-color: #e0f0f0;
padding: 2px 5px;
text-align:center;
display:table-cell;
}
 
#menu div {
color: #5e0e5e;
background-color: #f0c0c0;
}
 
cache, #menu div:hover {
font-weight: bold;
color: white;
text-shadow: black 0px 0px 5px;
}
 
</style>
</head>
<body>
 
<div style="position:absolute;clip:rect(0px,400px,24px,0px);">
	<div id="menu">
		<div>Texte exemple</div>
		<cache style="visibility:hidden;">Texte exemple</cache>
	</div>
	<div id="menu">
		<div>Menu 2</div>
		<cache style="visibility:hidden;">Menu 2</cache>
	</div>
</div>
 
</body>
</html>

ca marche mais vous conviendrez que c'est pas l'idéal.

surtout si dans la suite il faut faire des sous menu.

je suis ouvert à toute proposition.

**vodiem** · 15/08/2009, 07h43

voilà un résultat probant:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<style type="text/css">
 
#menu {
font-family: arial, helvetica, sans-serif;
background-color: #e0f0f0;
padding: 2px 5px;
text-align: center;
display: inline-block;
}
 
#menu div {
color: #5e0e5e;
background-color: #f0c0c0;
height: 20px;
}
 
#cache {
line-height: 0;
}
 
#cache, #menu div:hover {
font-weight: bold;
color: white;
text-shadow: black 0px 0px 5px;
}
 
</style>
</head>
<body>
 
<div>
	<div id="menu">
		<div>Texte exemple</div>
		<span id="cache" style="visibility: hidden;">Texte exemple</span>
	</div>
	<div id="menu">
		<div>Menu 2</div>
		<span id="cache" style="visibility: hidden;">Menu 2</span>
	</div>
</div>
 
</body>
</html>

s'il y a d'autre solution, n'hésitez pas.

**vodiem** · 15/08/2009, 11h39

enfin presque... IE le digère pas bien...

**vodiem** · 15/08/2009, 19h40

bon voilà l'adaptation pour IE:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
 
<head>
<style type="text/css">
 
.menu {
font-family: arial, helvetica, sans-serif;
background-color: #e0f0f0;
padding: 2px 5px;
text-align: center;
display: inline-block;
vertical-align:top;
height: 18px;
}
 
.menu span {
color: #5e0e5e;
background-color: #f0c0c0;
}
 
.cache, .menu span:hover {
font-weight: bold;
color: white;
text-shadow: black 0px 0px 5px;
}
 
</style>
</head>
<body>
 
<div>
	<span class="menu">
		<span>Texte exemple</span></br>
		<span class="cache" style="visibility: hidden;">Texte exemple</span>
	</span>
	<span class="menu">
		<span>Menu 2</span></br>
		<span class="cache" style="visibility: hidden;">Menu 2</span>
	</span>
</div>
 
</body>
</html>

toujours pas d'autre proposition?

**vodiem** · 15/08/2009, 21h56

echoOOoo.... OOo... oo...

mouais, y personne par ici...

je vais continuer quand même mon monologue...

voilà j'ai trouvé plus élégant:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
.menu {
font-family: arial, helvetica, sans-serif;
background-color: #e0f0f0;
padding: 2px 5px;
text-align: center;
display: inline;
vertical-align:top;
height: 20px;
float:left;
}
 
.cache {
position:relative;top:-20px;
visibility:hidden;
}
 
.cache, .menu:hover {
font-weight: bold;
color: white;
text-shadow: black 0px 0px 5px;
}
 
</STYLE>
</HEAD>
<BODY>
<div>
	<div class="menu">Texte exemple<div class="cache">Texte exemple</div></div>
	<div class="menu">Menu 2<div class="cache">Menu 2</div></div>
</div>
</BODY>
</HTML>

qui marche avec ce que j'ai sous la main: FF et IE.

z'avez le droit de garder le silence, cela sera retenu contre vous...

Décalage lors du survol menu

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager