[html/css] Placer une image sur une autre
Fermé
Kopros
Messages postés
595
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
-
6 nov. 2008 à 14:26
Kopros Messages postés 595 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 - 7 nov. 2008 à 16:32
Kopros Messages postés 595 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 - 7 nov. 2008 à 16:32
A voir également:
- Image on image css
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Image iso windows 10 - Guide
- Comment agrandir une image - Guide
7 réponses
Kopros
Messages postés
595
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
7 nov. 2008 à 11:23
7 nov. 2008 à 11:23
Voilà ça marche tout bien comme je voulais. Je pense que mettre mon code vaut mieux qu'une explication chaotique, donc le voici dans son intégralité :
HTML :
CSS :
Avec ce code, mes 3 images du header sont collées correctement, et la bannière se place sur l'image du milieu à l'emplacement prévu, et ce quelle que soit la résolution de l'écran.
Encore merci pour les conseils :-)
HTML :
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Raztafouine - Ze ouèbe saïte</title> <link href="razta.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header"> <img id="hg" src="images/haut-gauche.bmp" /><img id="ban" src="images/ban-razta.gif" /><img id="hm" src="images/haut-milieu.bmp" /><img id="hd" src="images/haut-droit.bmp" /> </div> </body> </html>
CSS :
@charset "utf-8";
/* CSS Document */
body
{
background-color: #E7E7D2;
}
.header
{
margin: auto;
padding: 0px;
width: 762px;
}
#hg
{
z-index:0;
}
#ban
{
position:absolute;
top:33px;
z-index:1;
}
#hm
{
z-index:2;
}
#hd
{
z-index:3;
}
Avec ce code, mes 3 images du header sont collées correctement, et la bannière se place sur l'image du milieu à l'emplacement prévu, et ce quelle que soit la résolution de l'écran.
Encore merci pour les conseils :-)
Utilisateur anonyme
6 nov. 2008 à 15:14
6 nov. 2008 à 15:14
Tiens essaye avec le système "z-index": http://fr.html.net/tutorials/css/lesson15.asp
Thread
Messages postés
298
Date d'inscription
lundi 20 octobre 2008
Statut
Membre
Dernière intervention
9 juin 2009
35
6 nov. 2008 à 14:33
6 nov. 2008 à 14:33
Superposé des images : impossible ;)
Enfin à ma connaissance. Je te conseil de placer la bannière sur l'image en utilisant un logiciel de retouche (photoshop ou paint hein ^^). Après tu places le résultat (donc plus qu'une image) dans ta page web ;)
Pour ce qui est des espaces entre les images, je t'invites à te renseigner sur les attributs padding et margin de ton css ;)
Mais là tu vas te heurter à la joie du développement web, incompatibilité en tout genre bonjour ! xD
Enfin à ma connaissance. Je te conseil de placer la bannière sur l'image en utilisant un logiciel de retouche (photoshop ou paint hein ^^). Après tu places le résultat (donc plus qu'une image) dans ta page web ;)
Pour ce qui est des espaces entre les images, je t'invites à te renseigner sur les attributs padding et margin de ton css ;)
Mais là tu vas te heurter à la joie du développement web, incompatibilité en tout genre bonjour ! xD
Kopros
Messages postés
595
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
6 nov. 2008 à 14:52
6 nov. 2008 à 14:52
Ho bah je me suis déjà heurté aux problèmes d'incompatibilité avec le padding et le margin !
Pour la bannière, le soucis c'est qu'elle animée (sinon je me prendrais pas la tête)...
T'es sûr que c'est pas possible de pouvoir supperposer des images ?
Pour la bannière, le soucis c'est qu'elle animée (sinon je me prendrais pas la tête)...
T'es sûr que c'est pas possible de pouvoir supperposer des images ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Thread
Messages postés
298
Date d'inscription
lundi 20 octobre 2008
Statut
Membre
Dernière intervention
9 juin 2009
35
6 nov. 2008 à 15:00
6 nov. 2008 à 15:00
Il me semble qu'on ne peut faire que de la superposition de textes et d'images :s
Mais tu dois pouvoir intégrer ton animation sur ton image via un truc un peu plus costaud que paint, genre photoshop si tu peux te permettre ou gimp (il paraît qu'on peut faire des trucs avec ça, j'suis pas convaincu mais bon^^)
Pour les espaces, un margin:0px devrait régler l'affaire.
Mais tu dois pouvoir intégrer ton animation sur ton image via un truc un peu plus costaud que paint, genre photoshop si tu peux te permettre ou gimp (il paraît qu'on peut faire des trucs avec ça, j'suis pas convaincu mais bon^^)
Pour les espaces, un margin:0px devrait régler l'affaire.
Kopros
Messages postés
595
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
6 nov. 2008 à 17:34
6 nov. 2008 à 17:34
Merci pour les conseils !
Pour le margin, je viens de me rendre compte que je le faisais avec une erreur de syntaxe et c'est sûrement pour ça que ça ne marchait pas(j'avais oublié de mettre "px" après la 0, boulet que je suis...).
Je vais mettre tout dans un tableau (sans espace cette fois ^^) et je vais tester avec le z-index, même si j'y crois pas trop à la position absolue, pour le problème des résolutions.
Au pire, je sépare l'image du milieu en 2 images qui encadreront la bannière, et je remets tout en place avec un tableau un peu plus complexe.
Là tout de suite j'ai pas le temps de le faire, mais dès que je peux j'essaie ça et je dirai après si ça marche ou pas.
Pour le margin, je viens de me rendre compte que je le faisais avec une erreur de syntaxe et c'est sûrement pour ça que ça ne marchait pas(j'avais oublié de mettre "px" après la 0, boulet que je suis...).
Je vais mettre tout dans un tableau (sans espace cette fois ^^) et je vais tester avec le z-index, même si j'y crois pas trop à la position absolue, pour le problème des résolutions.
Au pire, je sépare l'image du milieu en 2 images qui encadreront la bannière, et je remets tout en place avec un tableau un peu plus complexe.
Là tout de suite j'ai pas le temps de le faire, mais dès que je peux j'essaie ça et je dirai après si ça marche ou pas.
Kopros
Messages postés
595
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
7 nov. 2008 à 16:32
7 nov. 2008 à 16:32
Je fais appel une nouvelle fois à vos conseils avisés (je ne crée pas de nouveau topic étant donné que c'est aussi pour un problème d'image, et c'est avec le même code que j'ai donné à mon précédent message).
Donc pour le header, pas de problème, tout se passe bien.
Je m'attaque au contenu et je commence par le background. Mon image pour le bg c'est juste une ligne que je répète autant de fois que nécessaire (avec un background-repeat).
Donc j'ai mon header et juste en dessous je commence le bg qui se répète. Le problème c'est que j'ai un décalage de quelques pixels entre les deux et je ne comprends pas d'où ça vient...
Voici le CSS du bg :
.content
{
padding: 0px;
padding-top: 100px;
padding-bottom: 200px;
width: 762 px;
margin: auto;
background-image:url(images/bg.bmp);
background-repeat:repeat-y;
background-position:center;
}
Le code du header :
.header
{
margin: auto;
padding: 0px;
width: 762px;
background-position:center;
}
et l'html :
<div class="header">
<img id="hg" src="images/haut-gauche.bmp" /><img id="ban" src="images/ban-razta.gif" /><img id="hm" src="images/haut-milieu.bmp" /><img id="hd" src="images/haut-droit.bmp" />
</div>
<div class="content">
</div>
Voyez-vous pourquoi y'a un décalage entre le header et le bg ? (ça doit faire 4 ou 5 pixels)
Donc pour le header, pas de problème, tout se passe bien.
Je m'attaque au contenu et je commence par le background. Mon image pour le bg c'est juste une ligne que je répète autant de fois que nécessaire (avec un background-repeat).
Donc j'ai mon header et juste en dessous je commence le bg qui se répète. Le problème c'est que j'ai un décalage de quelques pixels entre les deux et je ne comprends pas d'où ça vient...
Voici le CSS du bg :
.content
{
padding: 0px;
padding-top: 100px;
padding-bottom: 200px;
width: 762 px;
margin: auto;
background-image:url(images/bg.bmp);
background-repeat:repeat-y;
background-position:center;
}
Le code du header :
.header
{
margin: auto;
padding: 0px;
width: 762px;
background-position:center;
}
et l'html :
<div class="header">
<img id="hg" src="images/haut-gauche.bmp" /><img id="ban" src="images/ban-razta.gif" /><img id="hm" src="images/haut-milieu.bmp" /><img id="hd" src="images/haut-droit.bmp" />
</div>
<div class="content">
</div>
Voyez-vous pourquoi y'a un décalage entre le header et le bg ? (ça doit faire 4 ou 5 pixels)