Bonjour à tous,

Dans le code qui suit, j'ai un problème de réglage du hauteur des titres h3.

S'il y a d'autres corrections a faire, merci de me le faire savoir

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
  font-family : Verdana, Arial;
}
#titre {
  width : 600px;
  margin : auto;
}
h3 {
		text-align: left;
		color: #f00;
		font-size: 12px;
	}
.articles {
  font-size : 13px;
  position : relative;
  border : 1px solid #e0e0e0;
  width : 352px;
  height : 123px;
  margin : auto;
  padding : 1px;
}
.articles {
    border: 1px solid #000000;
    height: 128px;
    position: relative;
    width: 352px;
}
 
.articles ul{
	width:190px;padding:0;list-style-type:none;list-style-position:outside;position:relative;/*line-height:1.5em;*/margin-top: 0;    margin-right: 1px;    margin-bottom: 0;margin-left: 0;visibility: visible;
	}
.articles li h3 a{text-decoration:none; color:#ebfff3; background-color: #7385a3;display:block; padding:1px 2px;} 
.articles li{float:left; margin:1px;background-color: #fff;height:60px;} 
.articles li h3 a:hover{background-color: #7385a3;
		border-right: #fff 1px solid;
		border-bottom: #fff 1px solid}  	
 
.articles li {
  cursor : pointer;
}
.articles .info {
  top : 0px;
  left : 200px;
  width : 150px;
  height : 250px;
  border : 1px solid #f0f080;
  background-color : #fff;
  padding : 5px;
}
.articles .nimg {
	position:absolute;
	left:190px;
	top:0; right:0;
	border : 1px solid #f0f080;
	background-color : #fff;
	padding : 1px;
}
.articles .imag {
    height: 120px;
    width: 150px;
}
.articles li div {
  display : none;
}
.articles .where{
  position : absolute;
  color : #e0e0e0;
  font-weight : bold;
  background-color : #fff;
  border : 1px solid #e0e0e0;
}
.articles li:hover div {
  position : absolute;
  display : block;
}
.articles h3.selected {
		background-color: #7385a3;
		border-right: #fff 1px solid;
		border-bottom: #fff 1px solid;
 
	}
 
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div class="articles">
  <div class="where nimg">
  <img class="imag" src="../news1.jpg">
  </div>
  <ul>
    <li><div class="nimg"><img class="imag" src="../news1.jpg"></div><h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</h3></a></li>
    <li><div class="nimg"><img class="imag" src="../news2.jpg"></div><h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis suivent</h3></a></li>
    <li><div class="nimg"><img class="imag" src="../news3.jpg"></div><h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</h3></a></li>
  </ul>
</div>
<br />
<div  class="articles">
  <div class="where nimg">
  <img class="imag" src="../news1.jpg">
  </div>
  <ul>
    <li><div class="nimg"><img class="imag" src="../news1.jpg"></div><h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</h3></a></li>
    <li><div class="nimg"><img class="imag" src="../news2.jpg"></div><h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis suivent</h3></a></li>
    <li><div class="nimg"><img class="imag" src="../news3.jpg"></div><h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</h3></a></li>
  </ul>
</div>
<br /><br />
<b>Attention</b> :
<br /><i>ne fonctionne pas sur IE6</i>
 
</body>
</html>