Sujet Précédent Sujet Suivant

Centrer mon bloc div avec mon image de fond

Fermé
harry - 16 janv. 2008 à 21:11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 17 janv. 2008 à 00:01
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 mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
16 janv. 2008 à 23:31
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 mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
16 janv. 2008 à 23:00
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
16 janv. 2008 à 23:07
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
16 janv. 2008 à 23:46
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 mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
16 janv. 2008 à 23:55
“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 mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
17 janv. 2008 à 00:01
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

Retrouver l'image originale après avoir fait des modifications ?
Raven -
Tainavictor -

9 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses
Fond d'écran qui devient noir
DjBuRnOuT -
alhuno1 -

6 réponses
Fond d'écran carousel xiaomi
Thomasg -
Albator -

4 réponses
problème de pixel
bernie33260 -
contrariness -

14 réponses