Centrer mon bloc div avec mon image de fond

harry -  
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,
Je souhaite afficher sur mon site le meme fond et meme text suivant les differentes resolutions d ecrans.

J ai bien galeré avant de reussir a trouver la solutions avec les balises div.
Mainteant il me reste plus que a savoir comment centrer mon bloc.
Exemple de code:


<html>
<head>
<title>Superposition</title>
<style type="text/css">
.dlayer { position:relative;}
.dlayera { position:absolute; top:0px; left:0px; visibility:show; z-index:0; }
.dlayerb { position:absolute; top:20px; left:56px; visibility:show; z-index:1;}
.dlayerc { position:absolute; top:0px; left:0px; visibility:show; z-index:2;}
</style>
</head>
<body>
<tt>Images superposées :</tt>

<div class="dlayer" style="margin:auto " >


<div class="dlayera"><img src="jpeg/fond.jpg" /></div>

<div class="dlayerb"><img src="jpeg/bouton.jpg" /></div>
<div class="dlayerc"><img src="img/map/04.gif" /></div>
</div>

</body>
</html>

en gros commment voir le fond centrer dans le navigateur avec le bouton a un endroit precs sur le fond qui ne bouge pas suivant la resolutioon de lecran.merci
A voir également:

5 réponses

Réponse 1 / 5
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Merci de penser à utiliser le bouton indiqué.

Continue à définir tes styles dans la <style>.
N'en parsème pas ton code.
Pas de “<div class="dlayer" style=" …” alors que “dlayer” est déjà défini.

Trouve des noms plus explicites pour tes styles.

Les dimensions réclament une unité de valeur.
N'oublie pas les “px” (ou autres).

N'oublie pas de refermer tes définitions.
Il manque le " dans
margin-top: -225px;" >

Pour voir, essaye (j'ai mis un fond coloré différent à chaque <div> !)
<html>
<head>
  <meta content="HTML Tidy, see www.w3.org" name="generator">
  <style type="text/css">
body {
  text-align : center;
  }
.dlayer {
  position:relative;
  margin : 0 auto;
  width:900px;
  height:550px;
  background : #f5f5dc url(jpeg/fond.jpg) left top no-repeat; /*beige*/
  }
.dlayera {
  position:absolute;
  top:0px;
  left:0px;
  visibility:show;
  z-index:0;
  background-color : #f0e68c; /*jaune*/
  }
.dlayerb {
  position:absolute;
  top:20px;
  left:56px;
  visibility:show;
  z-index:1;
  background-color : #e9967a; /*saumon*/
  }
.dlayerc {
  position:absolute;
  top:120px;
  left:0px;
  width:135px;
  height:200px;
  min-height: 200px;
  max-height: 200px;
  visibility:show;
  z-index:2;
  background-color : #8fbc8f; /*vert*/
  }
  </style>

  <title>Un titre</title>
</head>

<body>
  <div class="dlayer">
    <div class="dlayera"></div> 

    <div class="dlayerb">
      <img src="jpeg/bouton.jpg" alt="">
    </div>
  
    <div class="dlayerc">
      "salutsalutsalutsalutsalutsalutsalutsalut"
    </div>
  </div>
</body>
</html>

--
2
Réponse 2 / 5
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Bonjour,

Un peu plus de clarté s'impose.

Dans le code que tu montres, aucune image n'est utilisée en fond.

“le bouton a un endroit precs”. Quel bouton ? “bouton.jpg” ?
Il est déjà positionné précisément.

Quel bloc veux-tu centrer ?
Si tu veux centrer quelque chose, il faut lui donner des dimensions.
Quelles sont les dimensions de “fond.jpg” ?


--
0
Réponse 3 / 5
harry
 
Bonjour,
tout d'abord merci de repondre

voici le code actuel




<html>
<head>

<style type="text/css">
.dlayer { position:relative; top:auto; left:auto; margin-top:auto; margin-bottom:auto;}
.dlayera { position:absolute; top:0px; left:0px; visibility:show; z-index:0; }
.dlayerb { position:absolute; top:20px; left:56px; visibility:show; z-index:1;}
.dlayerc { position:absolute; top:120; left:0px; width:135; height:200; min-height: 200px;
max-height: 200px; visibility:show; z-index:2;}
</style>
</head>
<body>


<div class="dlayer" style=" width:900; height:550;
position: absolute;
left: 50%;
top: 50%;
margin-left: -450px; /* moitié de width */
margin-top: -225px; >


<div class="dlayera"><img src="jpeg/fond.jpg" /></div>

<div class="dlayerb"><img src="jpeg/bouton.jpg" /></div>
<div class="dlayerc"> "salutsalutsalutsalutsalutsalutsalutsalut"</div>
</div>

</body>
</html>
l

Mon fond c'est fond.jpg utilisé dans "dlayera" j'aimerais maintenant centrer le tout donc horizontalement et verticalement selon les resolutions
Merci
0
Réponse 4 / 5
harry
 
Tout d'abord Gihef merci beaucoup de me consacrer du temps .
Je prends note de tous les conseils sur les unités et les noms de style.
Cependant moi mon Fond.jpg rempli tout le cadre de 900*550 donc je ne vois que le div vert.
On a le meme resultat le truc qu'il me manque c est le centrage vertical aussi.
Jespere qu tu comprends en attendant merci encore.
0

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

Posez votre question
Réponse 5 / 5
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
“mon Fond.jpg rempli tout le cadre de 900*550 donc je ne vois que le div vert”
C'est-à-dire ?

centrage vertical. Faut le dire (-;
Éviter la méthode 4-

--
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Peut-être que “je ne vois que le div vert” à cause des positions ?
<html>
<head>
  <meta content="HTML Tidy, see www.w3.org" name="generator">
  <style type="text/css">
  body {
  text-align : center;
  }
  .dlayer {
  position:relative;
  margin : 0 auto;
  width:900px;
  height:550px;
  background : #f5f5dc url(jpeg/fond.jpg) left top no-repeat; /*beige*/
  }
  .dlayera {
  position:absolute;
  top:0px;
  left:0px;
  visibility:show;
  z-index:0;
  background-color : #f0e68c; /*jaune*/
  }
  .dlayerb {
  position:absolute;
  top:420px;
  left:56px;
  visibility:show;
  z-index:1;
  background-color : #e9967a; /*saumon*/
  }
  .dlayerc {
  position:absolute;
  top:120px;
  left:0px;
  width:135px;
  height:200px;
  min-height: 200px;
  max-height: 200px;
  visibility:show;
  z-index:2;
  background-color : #8fbc8f; /*vert*/
  }
  </style>

  <title>Un titre</title>
</head>

<body>
  <div class="dlayer">
    <div class="dlayera">&nbsp;----------&nbsp;</div>

    <div class="dlayerb">
      <img src="jpeg/bouton.jpg" alt="" width="50" height="50">
    </div>

    <div class="dlayerc">
      "salutsalutsalutsalutsalutsalutsalutsalut"
    </div>
  </div>
</body>
</html>

--
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Fond d'écran qui devient noir
DjBuRnOuT -
alhuno1 -

6 réponses
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses