Changer la couleur d'un <div> au passage de la souris sur un autre <div>

**X260SH** · 12/07/2013, 12h28

Excusez-moi, je vous semble peut-être lourd, mais je voulais dire un centrage horizontal.

**rodolphebrd** · 12/07/2013, 13h54

Pas de problèmes ^^

IL y a la FAQ qu'il ne faut pas hésiter à consulter.

**X260SH** · 12/07/2013, 16h09

Je dois vraiment être bête, mais je n'y arrive pas...
J'ai mis dans le #ul_menu {text-align:center;} et dans le #ul_menu li {margin-left:auto; margin-right:auto;}, mais ça ne change rien. Le menu est toujours aligné verticalement mais pas horizontalement...

**rodolphebrd** · 12/07/2013, 16h14

Voulez-vous :
- un centrage horizontal : égale distance à droite et à gauche;
et/ou
- un centrage vertical : égale distance au sommet et à la base.

**X260SH** · 12/07/2013, 16h20

Je souhaiterai un centrage horizontal, donc égale distance à droite et à gauche, puisque j'ai déjà le centrage vertical.

**rodolphebrd** · 12/07/2013, 16h56

Je vous l'ai donné ici non ?
Je viens de le tester de nouveau...

**X260SH** · 12/07/2013, 17h43

Un dernier problème, et après, j’essayerai de ne plus vous embêter.
Dans les <div> des <li>, j'ai mis un <ul> et d'autres <li>. Par conséquent, ces seconds <li> sont légèrement décaler vers la droite, et donc, ce n'est plus tout a fait centrer. Y-a-t-il moyen de corriger ce léger soucis ?

En tout cas, merci beaucoup de votre rapidité, de votre patiente et de vos conseils avisés. Merci.

**rodolphebrd** · 12/07/2013, 17h49

Postez la totalité de votre code pour voir.

**X260SH** · 12/07/2013, 17h59

Voici mes code intégrales :

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
46
47
48
<doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="styles.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
    <ul id="ul_menu" class="center">
      <li><a href="#">Présentation</a>
      </li>
      <li><a href="#">Mes liste</a>
        <div>
			<ul>
				<li class="classe">A</li>
				<li><a href="#">A.1</a></li>
				<li><a href="#">A.2</a></li>
				<li><a href="#">A.3</a></li>
				<li><a href="#">A.4</a></li>
				<li><a href="#">A.5</a></li>
				<li class="classe">B</li>
				<li><a href="#">B.1</a></li>
				<li><a href="#">B.2</a></li>
			</ul>
        </div>
      </li>
      <li><a href="#">Téléchargements</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Espace Membre</a>
        <div>
			<ul>
				<li><a href="#">Se connecter</a></li>
				<li><a href="#">S'inscrire</a></li>
			</ul>
		</div>
      </li>
    </ul>
</nav>
 
	<div id="texte"><p>In reprehenderit in voluptate duis aute irure dolor cupidatat non proident. Velit esse cillum dolore consectetur adipisicing elit, lorem ipsum dolor sit amet. Eu fugiat nulla pariatur. In reprehenderit in voluptate mollit anim id est laborum.</p>
    <p>Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt cupidatat non proident, duis aute irure dolor. Velit esse cillum dolore ullamco laboris nisi ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p>
    <p>Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, quis nostrud exercitation eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt consectetur adipisicing elit, excepteur sint occaecat. Duis aute irure dolor velit esse cillum dolore ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, ullamco laboris nisi qui officia deserunt. Sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Sunt in culpa.</p>
    <p>Velit esse cillum dolore ut enim ad minim veniam, in reprehenderit in voluptate. Sunt in culpa eu fugiat nulla pariatur. Quis nostrud exercitation mollit anim id est laborum.</p></div>
</body>
</html>

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
body {
  margin : 0px; 
  padding : 0px; 
}
 
#ul_menu {
  position:relative;
  width:100%;
  padding:0;
  margin:0;
  height:60px;
  background-color: #000000;
  font-family:"Segoe UI", Arial;
  color:#ffffff;
  text-align:center;
}
 
#ul_menu li {
  display:inline-block;
  min-width:8em;
  line-height:60px;
  text-align:center;
}
 
#ul_menu a {  
	font-family:"Segoe UI", Arial;
	color:#ffffff;
	text-decoration:none;}
 
#ul_menu li div {
  position:absolute;
  left:0;
  top:0;
  right:0;
  margin-top:60px;
  padding:0;
  display:none;
  color:white;
  font-weight:normal;
  text-align:center;
  line-height:1.5em;
  background-color:#000000;
}
 
#ul_menu li:hover div {
  display:block;
}
#ul_menu li:hover {
  background-color: #191919;
}
 
#ul_menu li div li.classe {
cursor:default;
font-weight:bold;}
 
#ul_menu li div li.classe:hover {
background-color:#000000;
color:#e6e6e6;}
 
#texte {
margin:5px;}

**rodolphebrd** · 12/07/2013, 18h17

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 <li><a href="#">Mes liste</a>
        <div >
			<ul style="padding:0;">
				<li><a href="#">A.1</a></li>
				<li><a href="#">A.2</a></li>
				<li><a href="#">A.3</a></li>
				<li><a href="#">A.4</a></li>
				<li><a href="#">A.5</a></li>
				<li><a href="#">B.1</a></li>
				<li><a href="#">B.2</a></li>
			</ul>
        </div>
      </li>

**X260SH** · 12/07/2013, 19h41

Bon, bin... Merci énormément !

Résolu.

Changer la couleur d'un <div> au passage de la souris sur un autre <div>

CSS

Discussions similaires

Partager

Partager