Problème pour centrer avec z-index

sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention   -  
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   -
bonjour, j'ai utiliser la propriété z-index pour mettre des images les une sur les autres avec une bordure autour mais je ne sais pas comment les mettre au centre de la page, elle se trouve tout a gauche

voici mon code html:

<div id="photo">
<div id="test1"><img src="images/piscine.jpg" alt="" /></div>
<div id="test2"><img src="images/mobilome.jpg" alt="" /></div>
<div id="test3"><img src="images/terrain.jpg" alt="" /></div>
<div id="test4"><img src="images/restaurant.jpg" alt="" /></div>
</div>

et mon code css:

#photo {text-align: center; height: 656px; width: 1210px; border: 1px black solid;}

div#test1 {position: absolute; z-index: 2;}
div#test2 {position: relative; left: 670 px; top: 20px; z-index: 3;}
div#test3 {position: absolute; left: 150px; top: 270px; z-index: 1;}
div#test4 {position: relative; right: 20px; z-index: 4;}
A voir également:

12 réponses

Réponse 1 / 12
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
Bonjour,

il faut toujours donner les dimensions d'une images dans la balise avec les attributs width et height

par exemple : 
<img class="image1" href="image.jpg" alt="image" width="240" height="500" />

le z index si je me souviens bien ne fonctionne que pour les position fixed et absolute.

pour centrer l'image 

.image1 {
position:absolute;
z-index:2;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -250px;
}


ce n'est qu'un exemple il faut que tu l'adaptes mais le principe est le même.
0
Réponse 2 / 12
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
ce que tu me dit ne marche pas
mes images sont parfaite bien l'une sur les autres comme je le veux
mes l'ensemble des images reste a gauche
j'ai mis un balise div pour englober tout sa et faire un
text-align: center; mais sa ne marche pas
dans mon code, il y a : width: 1210px; border: 1px black solid; et pourtant la bordure de fait pas 1210 px de largeur mais beaucoup plus
0
Réponse 3 / 12
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
<img src="images/site.png" alt="" />
0
Réponse 4 / 12
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
envois moi le code de ta page ce sera plus simple
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
CSS:

/* Définition des polices personnalisées */

@font-face
{
font-family: 'BallparkWeiner';
src: url('polices/ballpark.eot');
src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
url('polices/ballpark.woff') format('woff'),
url('polices/ballpark.ttf') format('truetype'),
url('polices/ballpark.svg#BallparkWeiner') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face
{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}

body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
margin: auto;
background: #f0f0f0;
}

#photo
{
text-align: center;
height: 656px;
width: 1210px;
border: 1px black solid;
}

div#test1
{
position: absolute; z-index: 2;
}

div#test2
{
position: relative; left: 670 px; top: 20px; z-index: 3;
}

div#test3
{
position: absolute; left: 150px; top: 270px; z-index: 1
}

div#test4
{
position: relative; right: 20px; z-index: 4;
}

code html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles_1.css" />
<title>photos</title>
</head>

<body>
<div id="bloc_page">

<div id="photo">
<div id="test1"><img src="images/piscine.jpg" alt="" /></div>
<div id="test2"><img src="images/mobilome.jpg" alt="" /></div>
<div id="test3"><img src="images/terrain.jpg" alt="" /></div>
<div id="test4"><img src="images/restaurant.jpg" alt="" /></div>
</div>

</div>

</body>
</html>
0
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
quelles sont les dimensions de tes images ? ou quelles dimensions veux tu ?
0
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
je veux qu'elle soit dans une bordure de 810x500
0
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
avec un padding de 5 px
0
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
non plutot 850 x 500
0
Réponse 6 / 12
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
c'est genre ça que tu veux ?

(enlève les background-color des images c'était pour les simuler)
si tu ne veux pas de superposition il suffit de supprimer les margin-*

il faudra aussi que tu adaptes les dimensions dans les balises images 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles_1.css" />
<title>photos</title>
<style type="text/css">
/* Définition des polices personnalisées */

@font-face
{
font-family: 'BallparkWeiner';
src: url('polices/ballpark.eot');
src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
url('polices/ballpark.woff') format('woff'),
url('polices/ballpark.ttf') format('truetype'),
url('polices/ballpark.svg#BallparkWeiner') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face
{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}

body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
margin: auto;
background: #f0f0f0;
}

#photos
{
text-align: center;
height: 656px;
width: 1210px;
border: 1px black solid;
position: relative;
}

#photos .im1 {
z-index: 4;
position: absolute;
right: 50%;
bottom: 50%;
margin-right: -20px;
margin-bottom: -0px;
background-color: red;
}

#photos .im2 {
z-index: 3;
position: absolute;
left: 50%;
bottom: 50%;
margin-left: -0px;
margin-bottom: -20px;
background-color: blue;
}

#photos .im3 {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -0px;
background-color: green;
}

#photos .im4 {
z-index: 1;
position: absolute;
right: 50%;
top: 50%;
margin-right: -0px;
margin-top: -20px;
background-color: yellow;
}

</style>


</head>

<body>
<div id="bloc_page">

<div id="photos">
	<img class="im1" src="images/piscine.jpg" alt="" width="450" height="250" />
	<img class="im2" src="images/mobilome.jpg" alt="" width="450" height="250" />
	<img class="im3" src="images/terrain.jpg" alt="" width="450" height="250" />
	<img class="im4" src="images/restaurant.jpg" alt="" width="450" height="250" />
</div>

</div>

</body>
</html>
0
Réponse 7 / 12
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
ouais c'est parfais sauf pour la résolution des deux images du dessous qui se sont agrandis
0
Réponse 8 / 12
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
l'image restaurant fait 300x225
et le terrain fait pareil
0
Réponse 9 / 12
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
c'est bon j'ai réussi j'ai juste modifier width et height dans le fichier html

encore merci pour tout
0
Réponse 10 / 12
sisimin44 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
sauf que la bordure n'est pas centrer
0
Réponse 11 / 12
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
quelle bordure ?
0
Réponse 12 / 12
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
c'est genre ça que tu veux ?

(remplace dans ton css) 
#photos {
text-align: center;
height: 650px;
width: 1210px;
border: 1px black solid;
position: absolute;
left: 50%;
top:50%;
margin-left: -606px;
margin-top: -326px;
}
0

Discussions similaires

A quoi sert CPU-Z ?
mathilde15 -
fabul -

1 réponse
Samsung Z Flip 4 s'éteint lorsque je le plie.
BOBJENNY -
Tinoon -

4 réponses
Télécharger sur index of
khitty -
mikesophie -

26 réponses
CPU-Z fiable ou pas?
gg80 -
echibal -

1 réponse