Alléger un code html

apt · 11/05/2011, 15h48

Bonjour à tous,

Citation:

Envoyé par danielhagnoul

Bonsoir

Sans le JavaScript il n'y a pas de jQuery et pas d'animation. Donc...

La lourdeur est au niveau de la conception de la page dans sa totalité. Alors qu'il n'y a de la place que pour une image à la fois dans la division ayant la classe articles on réserve de la place à coups de divisions pour trois.

Une page web doit être un ensemble harmonieux, si votre code HTML et CSS est inutilement complexes les méthodes JavaScript le seront probablement aussi.

Il faudrait reprendre cette page à partir de zéro; mais je n'ai pas le temps pour cela.

Mais je ne sais pas comment faire pour alléger ma page est avoir un code plus claire selon les consignes de Daniel Hagnoul.

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
<!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" xml:lang="fr" lang="fr"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>Tab verticales</title> 
	<meta name="description" lang="fr" content="Essais de tabs verticales accessibles avec jquery" /> 
	<style type="text/css" media="screen"> 
		body {
			font-size: 90%;
			font-family: arial, helvetica, sans-serif;
		}
		h1 {text-align: center; color: #f00;}
		h3 {
		text-align: left;
		color: #f00;
		font-size: 12px;
	}
	.articles {
		position : relative;
		border: 1px solid #000;
		width: 352px; height : 123px;
	}
		.articles h3, .articles h3 a {color: #ebfff3; }
		/*.hasJS .articles {min-height:200px;}*/
		.hasJS .articles h3 {
			cursor: pointer;
			background-color: #36425a;
			margin: 0;
			padding: 5px;
			border-bottom:  #fff 1px solid;
			border-right:  #fff 1px solid;
			width:190px;
			height:30px;
		}
		.hasJS .articles h3.selected {
		background-color: #7385a3;
		border-right: #fff 1px solid;
		border-bottom: #fff 1px solid;
 
	}
 
 
		.hasJS .articles div div.montre {position: absolute; top: 0; right: 0; left: 196px; }
		.hasJS .articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
		.imag {	width:150px; height:122px;}
		a:link, a:visited, a:active{text-decoration: none;color: #333333;}
	</style> 
	<script type="text/javascript"> 
		document.documentElement.className+=" hasJS";
	</script> 
</head> 
<body> 
	<h1>Tab verticales</h1> 
	<h2>Une série de h3 en tab horizontales</h2> 
	<div id="articles_1" class= "articles"> 
		<div class="article"> 
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3> 
			<div class="montre"> 
				<img class="imag"src="news1.jpg" alt="Figure 1" /> 
			</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3> 
			<div> 
				<img class="imag" src="news2.jpg" alt="Figure 2" /> 
			</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3> 
			<div> 
				<img class="imag" src="news3.jpg" alt="Figure 3" /> 
			</div> 
		</div> 
	</div> 
	<br /><br /> 
	<div id="articles_2" class= "articles"> 
		<div class="article"> 
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3> 
			<div class="montre"> 
				<img class="imag"src="news1.jpg" alt="Figure 1" /> 
			</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3> 
			<div> 
				<img class="imag" src="news2.jpg" alt="Figure 2" /> 
		</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3> 
			<div> 
				<img class="imag" src="news3.jpg" alt="Figure 3" /> 
			</div> 
		</div> 
	</div> 
 
	<script charset="utf-8" src="jquery-1.6.min.js"></script>
	<script type="text/javascript"> 
        $(function(){
            $(".article").children("h3").mouseenter(function(){
                var objParentArticles = $(this).closest(".articles");
 
                objParentArticles.find("div.montre").removeClass("montre");
                objParentArticles.find("h3.selected").removeClass("selected");
 
                $(this).next("div").addClass("montre");
                $(this).addClass("selected");
            });
        });
	</script> 
</body> 
</html>

Merci d'avance.

insane1 · 11/05/2011, 18h15

Commencer pas mettre ton css dans une feuille de style ?

apt · 11/05/2011, 18h37

Bonjour insane1,

C'est fait :

Code :

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

<link rel="stylesheet" href="style.css" type="text/css" />

Mais mon problème situe dans les DIV's.

NoSmoking · 11/05/2011, 20h14

Bonjour,
tu pourrais faire cela avec de liste UL LI, voir peut être http://www.developpez.net/forums/d10...trement-mysql/
penses à bien tout lire, il y a eu des loupés de copier/coller, si besoin je le reconstituerais.

apt · 11/05/2011, 20h41

Bonjour NoSmoking,

A première vu, c'est le même principe

voila mon nouveau code, mais il reste la hauteur des li ainsi que l'emplacement de la div image qui cache le text des titres

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
<!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;
}
#conteneur {
  font-size : 13px;
  position : relative;
  border : 1px solid #e0e0e0;
  width : 360px;
  height : 150px;
  margin : auto;
  padding : 2px;
}
#conteneur li {
  cursor : pointer;
}
#conteneur .info {
  top : 0px;
  left : 200px;
  width : 150px;
  /*height : 250px;*/
  border : 1px solid #f0f080;
  background-color : #fff;
  padding : 5px;
}
#conteneur li div {
  display : none;
}
#conteneur .where{
  position : absolute;
  color : #e0e0e0;
  font-weight : bold;
  background-color : #fff;
  border : 1px solid #e0e0e0;
}
#conteneur li:hover div {
  position : absolute;
  display : block;
}
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div id="conteneur">
  <div class="where info">
  <img src="../news1.jpg" width="80" height="80">
  </div>
  <ul>
    <li><div class="info"><img src="../news1.jpg" width="80" height="80"></div>Massacre aux Philippines: le clan a tué 200 autres personnes</li>
    <li><div class="info"><img src="../news2.jpg" width="80" height="80"></div>Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</li>
    <li><div class="info"><img src="../news3.jpg" width="80" height="80"></div>Johnny Hallyday hospitalisé à Los Angeles</li>
  </ul>
</div>
<br />
<div id="conteneur">
  <div class="where info">
  <img src="../news1.jpg" width="80" height="80">
  </div>
  <ul>
    <li><div class="info"><img src="../news1.jpg" width="80" height="80"></div>Massacre aux Philippines: le clan a tué 200 autres personnes</li>
    <li><div class="info"><img src="../news2.jpg" width="80" height="80"></div>Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</li>
    <li><div class="info"><img src="../news3.jpg" width="80" height="80"></div>Johnny Hallyday hospitalisé à Los Angeles</li>
  </ul>
</div>
<b>Attention</b> :
<br><i>ne fonctionne pas sur IE6</i>
 
</body>
</html>

NoSmoking · 11/05/2011, 22h38

Citation:

Envoyé par apt

... mais il reste la hauteur des li ainsi que l'emplacement de la div image qui cache le text des titres

c'est également une histoire de CSS.

apt · 12/05/2011, 11h52

J'ai ajouté un post au section CSS pour avoir de l'aide sur mes probleme se style

http://www.developpez.net/forums/d10...s/#post5977572

polymorphisme · 16/05/2011, 21h54

Bonjour apt,

à moins que tu ais un graphisme qui nécessite la balise div :

Code :

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

<div id="titre"><h2>Hover en CSS</h2></div>

je ne vois pas son utilité, tout comme l'identifiant id, tu pourrais simplifier ton code ainsi :

Code :

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

<h2>Hover en CSS</h2>

... et tu as plusieurs fois ce cas dans ton fichier.

De la même façon que tu as utilisé une feuille de style CSS, tu peux isoler ton Javascript dans un autre fichier grace à la balise script.

Au niveau de la notation, tu écrit "articles_2" c'est pas faux du tout, mais en écrivant "article2", tu simplifie et tu adopte la même convention que pour tes nouvelles : news1, news2, ...

Eventuellement, tu peux peut être remplacer les images associées aux entrées de tes listes :

Code :

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

<div class="info"><img src="../news1.jpg" width="80" height="80"></div>

par des styles CSS.

En CSS, la dernière déclaration d'une règle peux ne pas être suivie d'une virgule; on pourra simplifier par exemple :

Code :

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

h1{text-align:center; color:#f00}

En bonus :

Code :

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

1
2
<b>Attention</b> :
<br><i>ne fonctionne pas sur IE6</i>

Tout le monde le sait déjà, c'est vraiment inutile

apt · 16/05/2011, 23h09

Citation:

Envoyé par polymorphisme

Bonjour apt,

Bonsoir polymorphisme.

Citation:

à moins que tu ais un graphisme qui nécessite la balise div :

Code :

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

<div id="titre"><h2>Hover en CSS</h2></div>

je ne vois pas son utilité, tout comme l'identifiant id, tu pourrais simplifier ton code ainsi :

Code :

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

<h2>Hover en CSS</h2>

... et tu as plusieurs fois ce cas dans ton fichier.

Je ne savais pas que les div sont utilisés surtout dans les graphismes

Citation:

Eventuellement, tu peux peut être remplacer les images associées aux entrées de tes listes :

Code :

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

<div class="info"><img src="../news1.jpg" width="80" height="80"></div>

par des styles CSS.

Pas bien compris

Citation:

En bonus :

Code :

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

1
2
<b>Attention</b> :
<br><i>ne fonctionne pas sur IE6</i>

Tout le monde le sait déjà, c'est vraiment inutile

En fait, tu as raison .. je l'ai éffacer en tout cas

11/05/2011, 18h15	#2
insane1 Membre confirmé Inscription : février 2009 Messages : 317 Détails du profil Informations forums : Inscription : février 2009 Messages : 317 Points : 209 Points : 209	Commencer pas mettre ton css dans une feuille de style ?
	10

11/05/2011, 18h37	#3
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	Bonjour insane1, C'est fait : Code : Sélectionner tout - Visualiser dans une fenêtre à part <link rel="stylesheet" href="style.css" type="text/css" /> Mais mon problème situe dans les DIV's.
	00

11/05/2011, 20h14	#4
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	Bonjour, tu pourrais faire cela avec de liste UL LI, voir peut être http://www.developpez.net/forums/d10...trement-mysql/ penses à bien tout lire, il y a eu des loupés de copier/coller, si besoin je le reconstituerais.
	00

12/05/2011, 11h52	#7
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 ajouté un post au section CSS pour avoir de l'aide sur mes probleme se style http://www.developpez.net/forums/d10...s/#post5977572
	00

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