[Résolu] Optimisation

Bonjour, j'ai essayé de reproduire une des colonnes du site du Parisien pour m'entraîner.
De manière à progresser plus vitre j'aimerais avoir votre avis sur le code que j'ai employé et sur la méthode.
Question méthode : j'ai juste besoin de faire des copier / coller du code HTMl pour faire les rubriques suivantes et changer la photo et la légende.
Dites-moi ce que vous en pensez.

<div id="module">
<p class="titre">FOOTBALL</p>
<img src="layer-bloccentral-fl.png" class="fleche"/>
<img src="can_eto.jpg" />
<p class="legende"><a href="#">Coupe d'Afrique des nations</a></p>
</div>

#module {
	width: 150px;
	background-color: #CCCCCC;
	position: relative;
	left: 0px;
	top: 0px;
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
}
.titre {
	width: 150px;
	background: url(degrade.png) repeat-x 0px 0px;
	color: #FFFFFF;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin: 0px;
	text-indent: 10px;
	line-height: 20px;
	position: absolute;
	left: 0;
	top: 0;	
}
.fleche {
	position: relative;
	margin: 20px 0 -10px 0;
}
.legende {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 10px 0 0 10px;
}
a {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #990000;
	text-decoration: underline;
}

Modifié par renato (27 Jan 2010 - 14:11)

Salut,

Sémantiquement, il vaudrait mieux que ton :

<p class="titre">FOOTBALL</p> 

soit un

<hn>Football</hn> 

Inutile alors de spécifier une classe car tu peux sélectionner ces titres par le biais du module.

Le classe sur le paragraphe est inutile aussi car tu peux sélectionner le paragraphe via le module encore une fois.

<div id="module"> 
<h3>Football</h3>
<img src="layer-bloccentral-fl.png" alt="" class="fleche"/> 
<img src="can_eto.jpg" alt="" /> 
<p><a href="#">Coupe d'Afrique des nations</a></p> 
</div> 

#module { 
 (...)
} 
#module h3 { 
 (...)   
} 
.fleche { 
 (...)
}
 #module p { 
 (...)
} 
a { 
 (...)
} 
a:hover { 
 (...)
} 

Autre précisions : n'oublie pas l'attribut alt sur les images, qui doit être vide dans le cas de ta flèche, et renseigné (je suppose) dans le cas de l'image illustrative au contenu.

Ta flèche n'étant d'ailleurs pas du contenu, elle pourrait peut être être remplacée par un background du module, ou du paragraphe selon où tu veux la disposer. Celà allégerait ton code html.

OK merci pour les conseils.

J'ai simplifié le code et en particulier j'ai supprimé les notions de position: absolute, etc.
Par contre, je suis obligé de faire un style de class pour la flèche (position: relative) pour qu'elle passe au-dessus de la photo (en index). Et j'ai fait également un style pour la photo de manière à la descendre de 10 pixels. Je ne vois pas comment faire autrement.

<div id="module">
<h1>FOOTBALL</h1>
<img src="layer-bloccentral-fl.png" class="fleche" />
<img src="can_eto.jpg" class="photo" />
<p><a href="#">Coupe d'Afrique des nations</a></p>
</div>

#module {
	width: 150px;
	background-color: #CCCCCC;
	margin-bottom: 10px;
}
h1 {
	width: 150px;
	background: url(degrade.png) repeat-x 0px 0px;
	color: #FFFFFF;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin: 0px;
	text-indent: 10px;
	line-height: 20px;
}
#module p {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 0px;
	padding: 10px 0 10px 9px;
}
a {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #990000;
	text-decoration: underline;
}
.photo {
	margin-top: -10px;
}
.fleche {
	position: relative;
}