Sujet Précédent Sujet Suivant

Superposer des images site internet

Fermé
gigigigi_1842 Messages postés 6 Date d'inscription dimanche 13 janvier 2019 Statut Membre Dernière intervention 20 mai 2019 - Modifié le 17 janv. 2019 à 10:38
 retmas - 17 janv. 2019 à 19:25
Bonjour,
Je programme un de mes premiers site internet (html et css), pour présenter des travaux d'artistes.
L'idée est qu'il y a une image de fond qui simule une affiche, et sur laquelle viennent se superposer plusieurs petites images qui qui présentent les différents travaux (quand on clique sur une des petites images cela renvoit à la page de l'artiste en question). Le soucis est que je ne parvient pas à superposer les petites images sur l'image de fond (l'affiche) tout en pouvant aussi modifier la taille des petites images (ça me les affiche en immense sur toute la page).
j'ai essayé avec z-index ou de mettre l'affiche en background.
Voilà où en est arrivé mon code à l'heure actuelle: 


<html>
 <head>
  <title>Studio Schoupspif-Portfolio</title>
  <meta charset="Utf-8">
  <style type="text/css" media="screen">
   body {
   background:url("Portfolio_accueil.png") no-repeat;
   color: #ff9759;
   font-family: eczar;
   }
    #vermillon_sand {
    height: 10vw;
    width: auto;
    top:20vw;
    left:0vw;
    }
  </style>
 </head>
 <body>

  <img src="couv vermillon sand.jpg" id="vermillion_sand">

 </body>
</html>


Désolée que ça l'affiche d'une manière aussi crade...
Merci de votre aide !
A voir également:

2 réponses

Réponse 1 / 2
bazfile Messages postés 53682 Date d'inscription samedi 29 décembre 2012 Statut Modérateur, Contributeur sécurité Dernière intervention 24 avril 2024 18 470
Modifié le 17 janv. 2019 à 11:49
Bonjour,
Tu as ceci: 
<img src="couv vermillon sand.jpg" id="vermillion_sand">

Il essaie cela:
Tu réduis la photo couv vermillon sand.jpg à la proportion que tu souhaites, ensuite remplace la ligne précédente par celle-ci:
<a href="Ici tu mets l'adresse internet de la page de l'artiste"><img src="couv vermillon sand.jpg" alt="Vermillon" title="Aller sur le site de l'artiste" /></a>

Évite de mettre le code CSS mélangé dans le code HTML fait deux fichiers distincts pour les mettre en relation dans le code HTML dans <head> tu rajoutes ceci:
<link rel="stylesheet" href="ici tu mets le nom du fichier .css par exemple fichier.css" />

0
Réponse 2 / 2
retmas
Modifié le 17 janv. 2019 à 19:28
Salut , ce que vous voulez c'est pas forcément de la superposition.
En HTML n'importe quelle balise destiné à un contenu peut être imbriqué dans une autre(bien sûr il y a des exceptions, vous ne mettez pas un texte dans une image ou un autre contenu dans une balise indiquant un son...ce sont des balises de médias donc à contenu hypertextes qui forcément ne peuvent rien contenir d'autre qu'eux même). Imbriquée et non superposée.

Par exemple en lieu et place de mettre l'image directement dans le body vous pouvez(devez même car HTML sert SURTOUT à la description sémantique du contenu par ce biais là) utiliser une balise en container qui regroupe la ou les images à afficher.
Ensuite en CSS vous définissez un fond pour le container avec la propriétés de style background-image 


<body html>
<article><!-- cet balise article définit un ... article autrement dit une partie de votre page destinée à afficher les images quand le body lui est un élément(devenu facultatif mais par convention à utiliser) qui contient toute la page -->
<img src=urlimage.jpg />
</article>
</body>

Avec le css suivant par exemple: 
article{background-image:imagedefond.jpg;}/** notez que vous pouvez positionner l'imahgge de fond avec les autres propriétés du fond de la balise et noté en notation raccourcie par background: ...*/
/** et pour redimensionner les images, attention ne tient pas compte du positionnement de celles ci où vous pouvez utiliser la méthode que vous utilisez le plus souvent pour cela(en float, en position absolue/relative par rapport au haut/gauche , marges etc...)*/
article img{/** cette notation indique toutes les balises imags contenus directement dans une balise article, vous pouvez(recommandé) faire mieux en utilisant class et id etc...*/
width:18%;
height:18%;
}
0
retmas
17 janv. 2019 à 19:21
Allez voir aussi les bases de HTML5 notamment les règles de table des matières des balises section , article et la présence nécessaire d'un titre.
Le HTML es un langage descriptif très simple, bien sûr c'est voulu car ainsi il est aisé de décrire un page internet et son contenu. Il faut toutefois être très rigoureux sur le choix des balises. La description faite par HTML n'a pas comme but unique unique de créer la page mais bel et bien de désigner la nature de ce contenu. Cela s'appelle la sémantique dans tout langage et permet aux programmes de déterminer plus que des contenus à afficher mais la nature de ces contenus à afficher. Ne pas le faire c'es(t simplement ne pas écrire un HTML juste et bien sûr ne pas pouvoir être référencé.

exemples ici: https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
0
retmas
Modifié le 17 janv. 2019 à 19:26
Dernière précision , pour la superposition d'éléments (vous devez le faire vous même par le positionnement de vos éléments/balises dans la page) il faut utiliser la propriété CSS z-index qui détermine 'manuellement' à quelle 'profondeur' chaque élément correspond. Mais comme dit précédemment dans votre cas il ne s'agit pas de superposition qui suppose de définir le comportement des balises autrement que leur comportement usuel (en forçant plusieurs éléments au même endroit par le positionnement) mais une simple imbrication qui est la base du principe de SGML, XML et bien sûr HTML.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
0

Discussions similaires

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
senda -

8 réponses