5568 sujets

Sémantique web et HTML

[Résolu] Album-photos en HTML

Bonjour,
J'ai un code pour un album de 4X4 images (150X120PX).
Quand je clique sur une image, celle-ci apparaît dans un grand format sur fond noir, avec un pavé de texte à droite de la photo.
Je désire que la grande image fasse 600x600 px et le texte en format 12.
J'ai fait la première partie de l'album, et j'en suis à la deuxième partie.
Mais là je n'arrive pas à dimensionner l'image en grand format.
Quelqu'un peut-il m'aider ?
Voici le code de la 2ème partie qui me cause problème :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
#images {
	width: 600px;

	margin: 0 auto;
}
#images p {
	background: #6699FF;
	overflow: hidden;
	padding: 10px;
}
#images img {
	margin: 10px;
}
.left {
	float: left;
}
.right {
	float: right;
}
</style>
</head>
<body>
<div id="images">
	<p class="images"><img class="left" src="image1.jpg" alt="image à gauche" />Sed mollis, tortor eget gravida rhoncus, sapien ipsum faucibus neque, sit amet tincidunt risus sem luctus ante. Nulla porttitor semper erat. Proin eget urna in nunc vehicula porta. Nulla mattis posuere odio. Aenean id lorem. Donec sit amet eros.</p>
</div>
</body>
</html>
salut,
il te suffit d'indiquer les dimensions avec les attributs width et height. Tu peux aussi les dimensionner en CSS.
Bonjour,
Merci d'avoir pris le temps de me répondre.
J'ai ajouté les dimensions comme tu me l'as indiqué, mais je dois encore me tromper, j'ai ce résultat :


upload/1542814749-73322-essai.png
Suite :
J'ai oublié de mettre le code, désolé :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
#images {
	width: 600px; height: 400 px;

	margin: 0 auto;
}
#images p {
	background: #6699FF;
	overflow: hidden;
	padding: 110px;
}
#images img {
	margin: 10px;
}
.right {
	float: left;
}
.right {
	float: right;
}
</style>
</head>
<body>
<div id="images">
	<p class="images"><img class="left" src="C:\Users\Jack\Desktop\large0" alt="image à gauche" />Sed mollis, tortor eget gravida rhoncus, sapien ipsum faucibus neque, sit amet tincidunt risus sem luctus ante. Nulla porttitor semper erat. Proin eget urna in nunc vehicula porta. Nulla mattis posuere odio. Aenean id lorem. Donec sit amet eros.</p>
</div>
</body>
</html>
je parlais d'attributs HTML et non de propriétés CSS. Les attributs width et height vont directement sut la balise <img>. Cela dit, si tu souhaites le faire en CSS, tu dois d'abord cibler l'image que tu désires dimensionner (là les dimensions s'appliquent au conteneur div#images.
Sans être un spécialiste, je note dans ton deuxième code que tu appelles une image de classe "left", mais que tu as défini 
.right {
	float: left;
}
.right {
	float: right;


Essaie déjà la bonne définition. Par ailleurs, je ne saurais trop te conseiller de prendre le temps de passer à html5 et css3 : les tutos d'Alsacréations sont à la portée de tous (j'en sais quelque chose) et tu regagneras ce temps au centuple.
Courage !
Bonsoir,
J'ai trouvé.
Il s'agissait d'un mauvais chemin utilisé lors de l'édition de la page.
Erreur de débutant
Merci à ceux qui ont pris la peine de me conseiller.
Jack.
Sujet clos
Aller à