Problème pour centrer avec z-index

sisimin44 Messages postés 41 Statut Membre -  
Atropa Messages postés 2051 Statut Membre -
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;}

12 réponses

  1.
    Atropa Messages postés 2051 Statut Membre 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
  2. sisimin44 Messages postés 41 Statut Membre
     
    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
  3. sisimin44 Messages postés 41 Statut Membre
     
    <img src="images/site.png" alt="" />
    0
  4. Atropa Messages postés 2051 Statut Membre 274
     
    envois moi le code de ta page ce sera plus simple
    0

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

    Posez votre question
  6. sisimin44 Messages postés 41 Statut Membre
     
    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
    1. Atropa Messages postés 2051 Statut Membre 274
       
      quelles sont les dimensions de tes images ? ou quelles dimensions veux tu ?
      0
    2. sisimin44 Messages postés 41 Statut Membre
       
      je veux qu'elle soit dans une bordure de 810x500
      0
    3. sisimin44 Messages postés 41 Statut Membre
       
      avec un padding de 5 px
      0
    4. sisimin44 Messages postés 41 Statut Membre
       
      non plutot 850 x 500
      0
  7. Atropa Messages postés 2051 Statut Membre 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
  8. sisimin44 Messages postés 41 Statut Membre
     
    ouais c'est parfais sauf pour la résolution des deux images du dessous qui se sont agrandis
    0
  9. sisimin44 Messages postés 41 Statut Membre
     
    l'image restaurant fait 300x225
    et le terrain fait pareil
    0
  10. sisimin44 Messages postés 41 Statut Membre
     
    c'est bon j'ai réussi j'ai juste modifier width et height dans le fichier html

    encore merci pour tout
    0
  11. sisimin44 Messages postés 41 Statut Membre
     
    sauf que la bordure n'est pas centrer
    0
  12. Atropa Messages postés 2051 Statut Membre 274
     
    quelle bordure ?
    0
  13. Atropa Messages postés 2051 Statut Membre 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

Télécharger sur index of
khitty -
mikesophie -

26 réponses