[Résolu] ça ne se passe pas du tout comme prévu

(reprise du message précédent)

Merci Zelena, tu as su expliquer mieux que moi.

Blinkix a écrit :
Il serait donc plus judicieux de mettre dans mon div l'image avec la balise <img> ?

Oui, mettre l'image directement dans le code html. Et non, pas dans le div plutôt comme ça:

<a href="ici/le/lien/une/page.html"><img src="/lien/image/blabla.jpg" width="325" alt="" class="images image1"></a>
<a href="ici/le/lien/une/page.html"><img src="/lien/image/blabla.jpg" width="325" alt="" class="images image2"></a>

À mon avis, le div est inutile ici.
Évite également d'utiliser des id, privilégier les class. L'avantage c'est que tu peux mettre plusieurs class sur un même élément. pas possible avec un id qui en plus, doit être unique dans une page.

Autre recommandation. Je regarde ton code css. Essaie d'évité les répétitions et combinant ce qui est pareil. Par exemple:

#image1{
	width:280px;
	box-shadow: 4px -4px 10px #DEDEDE;
	height:266px;
	margin-bottom : 30 px;
	margin-top: 50px;
	border-top-left-radius : 100px;
	border-top-right-radius : 100px;
	border-bottom-left-radius : 100px;
	border-bottom-right-radius : 100px;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/formation_disciplinaire.jpg");
}

#image2{
	width:280px;
	height:266px;
	margin-bottom : 30px;
	margin-top: 50px;
	border-top-left-radius : 100px;
	border-top-right-radius : 100px;
	border-bottom-left-radius : 100px;
	border-bottom-right-radius : 100px;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/Formation_Transversales.jpg");
}

images 1 et 2 sont pratiquement identique, alors on combine, et vivement les class!

.images{
	width: 280px;
	height: 266px;
	margin: 50px 0 30px;
	border-radius: 100px;

}
.image1{
	box-shadow: 4px -4px 10px #DEDEDE;
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/formation_disciplinaire.jpg");
}

.image2{
	background-image: url("http://192.168.0.4/CNFETP/wp-content/uploads/2016/Formation_Transversales.jpg");
}

C'est beaucoup plus léger ainsi.

Blinkix a écrit :
Donc a votre avis je dois parer cette éventualité ou pas nécessairement ?

Toujours, on ne sait pas ce qui peux arrivé du côté de l'utilisateur.
la navigateur a buggé, manque de bande passante, l'utilisateur utilise un lecteur écran, etc. Tous des cas où le css est susceptible d'être inutile ou pas loader.
Modifié par juliesunset (01 Jun 2016 - 16:08)

Zelena a écrit :
Je pensais que ce n'était pas sémantique de mettre des éléments block dans un élément inline mais apparemment c'est devenu possible avec HTML5 d'englober des éléments block avec la balise <a>

Tout à fait, et cet étonnement revient régulièrement de la part des inté "vieux de la vieille" ayant tenu pour acquit l'ancienne méthode.

Rien n'est immuable en ce bas monde

Homophone

Homophone toi-même

merci beaucoup juliesunset c'est 1000 fois plus propre.
En effet je ne connaissaient pas les classes c'est plus clair et plus simple avec ce système qui ressemble un peu à de l'héritage.
Après j'ai fais des div parce que je ne voyais pas mettre pour mettre cette image en dur dans le code HTML.
J'ai ducoup repris tout ton code que j'ai un peu modifier a ma sauce ducoup mais merci c'est parfait !!


EDIT:
Mais alors je suis obligé de faire une div si je veux mettre du texte dessous ?
Modifié par Blinkix (02 Jun 2016 - 10:07)

Blinkix a écrit :

Mais alors je suis obligé de faire une div si je veux mettre du texte dessous ?

Un <figcaption> est plus approprié.

Merci je ne connaissait pas du tout cette méthode !

.





















.
Modifié par Blinkix (06 Jun 2016 - 11:04)