[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
Bonjour à tous,

Je suis en train de faire un site pour apprendre à maîtriser le css (c'est pas gagné...).
Et là j'ai un soucis tout bête, j'explique :
Mon header est composé en 3 images qui sont collées, de manière à n'afficher qu'une seule image. Si c'est pas clair on comprend mieux avec le code :

<div class="header">

			<img src="images/haut-gauche.bmp" /><img src="images/haut-milieu.bmp" /><img src="images/haut-droit.bmp" />

</div>


(les images ne sont pas en jpg pour conserver la qualité tant que tout n'est pas fini...)
Bref, sur l'image du milieu (la 2e) j'ai prévu un espace pour mettre une bannière en .gif mais je ne sais pas placer une image sur une autre...

Je ne veux pas utiliser la position absolue car ça ne fonctionne que sur une seule résolution d'écran.
J'ai testé avec un tableau mais c'est galère : déjà quand je mets les images dans les cellules il y a un espace entre elles (même si je mets l'attribut border="0" ) et le problème de positionnement reste le même...

Est-ce que vous pourriez m'aider svp ?

Si ça peut être utile, voici mon css :

@charset "utf-8";

/* CSS Document */



body

{

background-color: #E7E7D2;

}



.header

{

margin: auto;

width: 762px;

}


(oui il est court, j'en suis qu'au début)
Merci d'avance
A voir également:

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
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 :
<!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 :-)
4
Utilisateur anonyme
6 nov. 2008 à 15:14
Tiens essaye avec le système "z-index": http://fr.html.net/tutorials/css/lesson15.asp
3
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
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
1
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
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 ?
1

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
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.
0
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
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.
0
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
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)
0