Réglage hauteur des titres

**apt** · 12/05/2011, 11h41

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>

**Ceddoc** · 12/05/2011, 16h39

Quel est le problème exact?

tu as essayé de régler le margin et padding des h3

**apt** · 12/05/2011, 17h34

Envoyé par Ceddoc

Quel est le problème exact?

Il y a un grand espace entre les titres, ce qui les fait sortir de leur conteneur.

**Ceddoc** · 12/05/2011, 17h37

Envoyé par Ceddoc

tu as essayé de régler le margin et padding des h3

**NoSmoking** · 12/05/2011, 23h04

attention tu retombes dans tes travers d'alourdissement de code

Code :

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

<li><img class="imag" src="../news1.jpg"><a class="selected" href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></li>

devrait être suffisant en adaptant les style de chacun.

**apt** · 13/05/2011, 16h30

Un lien de test :

http://majallati.comli.com/test/ul3h...st_tab_v-2.php

Reste les problèmes suivants :

1 - Le premier titre n'est pas sélectionné automatiquement avec la classe "selected"

2 - Quand on survol le premier titre, l'image en face descend; quand on enlève le pointeur de la souris en dehors, l'image saute vers le haut

3 - les hauteurs des titres ne sont pas encore uniformisés (le dernier titre dépasse la limite bas du conteneur) (comment faire attribué une auteur fixe pour tous les titres ?)

Merci.

**NoSmoking** · 13/05/2011, 21h30

attention quand même le tout CSS a ses limites, certaines choses risquent de demander une pincée de javascript.

Un regard rapide pour un constat, allège le code

exemple :

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
<!DOCTYPE html>
<html>
<head>
<title>CSS hover</title>
<style type="text/css">
/*-- DEBUT OUBLI STYLE --*/
* {
	font-family : Verdana, Arial;
}
#titre {
	width : 400px;
	margin : auto;
} 
.articles {
	font-size : 13px;
	position : relative;
	border : 1px solid #e0e0e0;
	width : 352px;
	height : 128px;
	margin : auto;
	padding : 1px;
}
.articles ul{
	width:190px;
	height:128px;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	margin : 0 ;
	visibility: visible;
}
.articles li {
	margin: 0;
	cursor : pointer;
}
/*-- FIN OUBLI --*/
 
.articles ul, li, a, img{
  margin : 0;
  padding : 0;
} 
.articles li {
  background-color : #7385a3;
} 
.articles li img{
  display : none;
  position : absolute;
  left : 210px;
  top : 0;
} 
.articles li:hover img {
  display : block;
  z-index : 100;
}
.articles li .visible{
  display : block;
  z-index : 1;
} 
.articles li:hover {
  width : 220px;
}
.articles li a {
  text-decoration : none;
  color : #ebfff3;  
  font-size : 13px;  
  background-color : #7385a3;
  border : 1px solid #7385a3;
  border-right: #fff 1px solid;
  border-bottom: #fff 1px solid; 	
  display : block;
  padding : 2px;
  height : 60px;
  line-height : 20px;
}
.articles li a:hover {
  background-color : #a0b0e0;
  border : 1px solid #e0e0ff;
  font-weight : bold;  
}  	
</style>
</head>
<body>
<div id="titre"><h2>Hover en CSS</h2></div>
<div class="articles">
  <ul>
    <li><img class="visible" src="images/image_1.jpg"><a class="selected" href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></li>
    <li><img src="images/image_2.jpg"><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis suivent</a></li>
    <li><img src="images/image_3.jpg"><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></li>
  </ul>
</div>
</body>
</html>

**apt** · 14/05/2011, 11h05

1 - Le premier titre n'est pas sélectionné automatiquement avec la classe "selected"

Ça c'est du javascript/jquery

Il reste ces deux points en CSS, et j'aimerais avoir de l'aide pour les corriger

2 - Quand on survol le premier titre, l'image en face descend, quand on enlève le pointeur de la souris en dehors, l'image saute vers le haut

3 - les hauteurs des titres ne sont pas encore uniformisés (le dernier titre dépasse la limite basse du conteneur) (comment faire attribuer une auteur fixe pour tout les titres ?)

Merci.

**apt** · 16/05/2011, 13h18

Bonjour NoSmoking,

La première image est affichée à l'aide de first-child :

Code :

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

1
2
3
4
5
6
7
.articles li:hover img , 
.articles li:first-child img {  
    display: block;
   left: 190px;
    position: absolute;
    top:0; right:0;
}

Maintenant s'il n'y a pas des trucs CSS à ajouter, je vais essayer de trouver une solution avec jquery pour le problème de la sélection/désélection des li.

Merci.

**NoSmoking** · 16/05/2011, 14h12

La première image est affichée à l'aide de first-child :

dans le cas ou c'est la 1st qui est sélectionnée bien sûr.

Le passage au javascript, jQuery ou non, va t'obliger à revoir ton CSS, il faut en être conscient.

**apt** · 16/05/2011, 23h13

Envoyé par NoSmoking

dans le cas ou c'est la 1st qui est sélectionnée bien sûr.

Le passage au javascript, jQuery ou non, va t'obliger à revoir ton CSS, il faut en être conscient.

Tu veux dire que la sélection ne se fera pas avec du CSS, mais avec jquery ?

Réglage hauteur des titres

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager