Décalage lors du survol menu

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

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, 04h24

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, 08h43

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, 12h39

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

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

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, 22h56

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...

**Macmillenium** · 16/08/2009, 14h01

Heuuu ....

Code :

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

1
2
<cache style="visibility:hidden;">Texte 2</cache>

**vodiem** · 16/08/2009, 17h00

salut Macmillenium

Heuuu ....
ben XHTML c'est de l'XML alors les balises on leur fait dire n'importe quoi...

bon je reconnais c'est pas très orthodoxe ni catholique

j'ai rectifié pour les âmes sensibles comme le tiens.

et corrigé l'erreur sur l'id qui doit être une class en plus d'un <DOCTYPE> pour être compris d'IE.

je reste surpris de n'avoir pas trouvé de sujet en parlant comme si tout le monde se contentait de contourner le pb (c'est sur qu'un <img> aurait été plus simple) à moins de n'avoir pas trouvé les mots clefs pour la recherche.

j'imagine de toute façon qu'il est difficile de prédéfinir automatiquement la largeur maximal entre un intitulé normal et un survolé.

**Macmillenium** · 16/08/2009, 20h23

Plop vodiem,

Tout d'abord, attention à ton doctype HTML4 Transitional incomplet qui bascule les navigateurs graphiques en mode de rendu Quirks (petite recherche sur le terme

).

Envoyé par vodiem

ben XHTML c'est de l'XML alors les balises on leur fait dire n'importe quoi...

Ce n'est pas faux mais dans ce cas il faut utiliser XML Schema plutôt que DTD

Ceci dit, tu ne peux pas inventer des éléments qui n'existent pas dans la DTD auquel se réfère les parsers pour analyser la syntaxe.

**vodiem** · 17/08/2009, 07h48

Yop Macmillenium

,

après m'être "culturé" comme le dit si bien père simpson...

Envoyé par Macmillenium

HTML4 Transitional incomplet

il manque seulement l'uri? à ce que j'ai lu ce n'est pas lu par la plupart de navigateur (?)

Envoyé par Macmillenium

mode de rendu Quirks

c'est mieux que rien voir du tout...

Envoyé par Macmillenium

tu ne peux pas inventer des éléments qui n'existent pas dans la DTD

ben parait que si: si je fais ma DTD... mais à choisir: je vais m'en passer surtout si l'uri n'est pas lu.

mais entre nous, mon objectif est surtout d'avoir un code CSS fonctionnel pour les tests car l'entête est géré par mon cms. ;p

merci pour ces précisions qui m'ont donné l'occasion de combler certaine lacune.

**Macmillenium** · 17/08/2009, 12h46

Envoyé par vodiem

il manque seulement l'uri? à ce que j'ai lu ce n'est pas lu par la plupart de navigateur (?)

Oui et ça pose problème sur tous les navigateurs graphiques.

Envoyé par vodiem

c'est mieux que rien voir du tout...

Enfaite, c'est comme si tu n'as rien du tout puisque tous les navigateurs sont basculés en mode Quirks.

Envoyé par vodiem

mais entre nous, mon objectif est surtout d'avoir un code CSS fonctionnel pour les tests car l'entête est géré par mon cms. ;p

Ok ça passe en CSS mais en JS impossible de manipuler le DOM avec des éléments qui n'existent pas dans la DTD !

Décalage lors du survol menu

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

Discussions similaires

Partager

Partager