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

Citation:

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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.

NoSmoking · 14/05/2011, 12h03

Citation:

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

la cause est ici

Code :

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

1
2
3
4
5
6
7
8
.articles .nimg {
	position:absolute;
	left:190px;
	top:0; right:0;
	border : 1px solid #f00;/*f0f080;*/
	background-color : #fff;
	padding : 1px;
}

je le répète la DIV ne sert à RIEN...

Citation:

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 ?)

regardes l'exemple que je t'ai donné...

Je ne peux plus rien pour toi !

apt · 14/05/2011, 12h20

J'ai éliminer la bordure est le probleme de l'image qui bouge est résolu

Je vais essayé d'utiliser ton exemple pour corriger la hauteur des titres.

apt · 15/05/2011, 15h50

Voila un code alléger, mais l'image suive le li survolé et ne s'affiche pas dans le même endroit :

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
<!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 : 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 {
	position : relative;
	margin: 0;
	cursor : pointer;
}
.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 : 37px;
  line-height : 10px;
}
.articles li a:hover{
	background-color: #99a6bd;
 
}  	
.articles .nimg {
	position:absolute;
	left:190px;
	top:0; right:0;
	background-color : #fff;
	padding : 1px;
}
.articles .imag {
    height: 128px;
    width: 162px;
	position:absolute;
	left:192px;
	top:0; right:0;
	background-color : #fff;
	padding : 0px;
}
.articles li img {
  display : none;
 
}
 
.articles li:hover img {
    display: block;
    z-index: 100;
	left: 190px;
    position: absolute;
    top:0; right:0;
}
 
.articles li:hover div {
  position : absolute;
  display : block;
}
.articles li a.selected {
	background-color: #bec6d5;
	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">
  <ul>
    <li><img class="imag" src="facebook.jpeg"><a class="selected" href="#">Facebook déclare ouvertement la guerre à Google</a></li>
    <li><img class="imag" src="numericable.jpeg"><a href="#">Numericable lance une offre mobile illimitée à 24,90 euros</a></li>
    <li><img class="imag" src="google.jpeg"><a href="#">Les ordinateurs portables Chromebooks de Google arriveront le 15 juin</a></li>
  </ul>
</div>
<br /><br />
 
</body>
</html>

NoSmoking · 15/05/2011, 16h06

les éléments en absolute se position par rapport au premier parent positionné.
comme tu as ajouté une position relative sur les LI, c'est celle ci qui devient référence, donc les images sont en absolute par rapport au LI et non plus à la DIV englobante.
il te faut donc corriger comme ci dessous

Code css :

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

1
2
3
4
5
.articles li {
/*	position : relative;/**/
	margin: 0;
	cursor : pointer;
}

apt · 15/05/2011, 18h14

Bien expliquer NoSmoking.

Maintenant les images apparaissent bien dans leur endroit voulu.

J'ai le premier titre sélectionné par défaut mais son image correspondante ne s'affiche pas.

Comment la faire apparaitre ?

NoSmoking · 16/05/2011, 08h08

je te mets une trame qui répond à ta question, simplement la gestion de l'apparition se fait, maintenant, grâce à la classe sur le LI afin que tu puisses muter facilement vers le javascript qui devient nécessaire compte tenu de ce que tu souhaites réaliser par la suite

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
<!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 : 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;
}
.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 : 37px;
  line-height : 10px;
}
.articles li a:hover{
  background-color: #99a6bd; 
}  	
.articles li img {
  position:absolute;
  display : none;
  height: 128px;
  width: 162px;
  left:190px;
  top:0; right:0;
  background-color : #fff;
  padding : 0px;
}
.articles li:hover img {
  position: absolute;
  display: block;
  z-index: 100;
  left: 190px;
  top:0; right:0;
}
.articles li.selected a{
  background-color: #bec6d5;
  border-right: #fff 1px solid;
  border-bottom: #fff 1px solid;
}
.articles li.selected img{
  display : block;
}
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div class="articles">
  <ul>
    <li class="selected"><img alt="image_1" src="facebook.jpeg"><a href="#">Facebook déclare ouvertement la guerre à Google</a></li>
    <li><img alt="image_2" src="numericable.jpeg"><a href="#">Numericable lance une offre mobile illimitée à 24,90 euros</a></li>
    <li><img alt="image_3" src="google.jpeg"><a href="#">Les ordinateurs portables Chromebooks de Google arriveront le 15 juin</a></li>
  </ul>
</div>
</body>
</html>

la feuille de style est simplifiable

PS : j'édite le premier exemple ou je viens de me rendre compte qu'il manque du style...

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

Citation:

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

Citation:

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 ?

12/05/2011, 16h39	#2
Ceddoc Membre éclairé Cédric Développeur Java / Web / .NET Inscription : janvier 2009 Messages : 327 Détails du profil Informations personnelles : Nom : Cédric Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Java / Web / .NET Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2009 Messages : 327 Points : 369 Points : 369	Quel est le problème exact? tu as essayé de régler le margin et padding des h3
	00

12/05/2011, 23h04	#5
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 933 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 933 Points : 4 756 Points : 4 756	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.
	00

13/05/2011, 16h30	#6
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	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.
	00

14/05/2011, 12h20	#10
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	J'ai éliminer la bordure est le probleme de l'image qui bouge est résolu Je vais essayé d'utiliser ton exemple pour corriger la hauteur des titres.
	00

15/05/2011, 18h14	#13
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	Bien expliquer NoSmoking. Maintenant les images apparaissent bien dans leur endroit voulu. J'ai le premier titre sélectionné par défaut mais son image correspondante ne s'affiche pas. Comment la faire apparaitre ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email