Problème pour centrer avec z-index

Fermé

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013 - 18 mai 2013 à 14:33
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 - 18 mai 2013 à 20:43

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:

Problème pour centrer avec z-index
Code ascii de a à z - Guide
Cpu z pc - Télécharger - Informations & Diagnostic
Index téléphonique - Guide
Free z - Guide
Z zip - Télécharger - Compression & Décompression

12 réponses

Réponse 1 / 12

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
18 mai 2013 à 14:39

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.

Réponse 2 / 12

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 14:52

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

Réponse 3 / 12

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
Modifié par sisimin44 le 18/05/2013 à 14:54

Réponse 4 / 12

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
18 mai 2013 à 14:59

envois moi le code de ta page ce sera plus simple

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 dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 15:07

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>

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
18 mai 2013 à 15:28

quelles sont les dimensions de tes images ? ou quelles dimensions veux tu ?

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 15:34

je veux qu'elle soit dans une bordure de 810x500

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 15:35

avec un padding de 5 px

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 15:37

non plutot 850 x 500

Réponse 6 / 12

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
18 mai 2013 à 15:45

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>

Réponse 7 / 12

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 15:53

ouais c'est parfais sauf pour la résolution des deux images du dessous qui se sont agrandis

Réponse 8 / 12

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 15:54

l'image restaurant fait 300x225
et le terrain fait pareil

Réponse 9 / 12

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 15:56

c'est bon j'ai réussi j'ai juste modifier width et height dans le fichier html

encore merci pour tout

Réponse 10 / 12

sisimin44 Messages postés 35 Date d'inscription dimanche 19 août 2012 Statut Membre Dernière intervention 26 août 2013
18 mai 2013 à 15:58

sauf que la bordure n'est pas centrer

Réponse 11 / 12

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
18 mai 2013 à 20:31

quelle bordure ?

Réponse 12 / 12

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
Modifié par Atropa le 18/05/2013 à 20:44

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;
}

Discussions similaires

télécharger sur des sites comme index of

A quoi sert CPU-Z ?

Index+Equiv avec 3 critères

Samsung Z Flip 4 s'éteint lorsque je le plie.

Utilisation des méthodes de manipulations du DOM

Discussions similaires

Newsletters