rss
Ils ont besoin de votre aide Tous les messages sans réponse
Les règles à respecter
 Réserver un accueil cordial aux nouveaux utilisateurs.
 Poster son message dans le thème le plus approprié.
 Respecter la législation en vigueur.
 Faire usage de formule de politesse et échanger avec courtoisie.
 Ne pas poster de message à vocation commerciale.
 Rédiger les messages dans un langage clair sans abréviations, style télégraphique ou mode SMS
Le cas échéant, expliquer de manière pédagogique les règles du forum
Lire le texte complet de la charte
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Centrer mon bloc div avec mon image de fond

Posté par harry, le mercredi 16 janvier 2008 à 21:11:05
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
Configuration: Windows XP
Internet Explorer 6.0
Répondre à harry  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le mercredi 16 janvier 2008 à 23:00:39
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” ?


--
   
Répondre à Gihef

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
harry, le mercredi 16 janvier 2008 à 23:07:38
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
   
Répondre à harry

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le mercredi 16 janvier 2008 à 23:31:01
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>

--
   
Répondre à Gihef

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
harry, le mercredi 16 janvier 2008 à 23:46:29
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.
   
Répondre à harry

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le mercredi 16 janvier 2008 à 23:55:33
“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-

--
   
Répondre à Gihef

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Gihef, le jeudi 17 janvier 2008 à 00:01:41
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;&­lt;/div>

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

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

--
   
Répondre à Gihef
Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Mega Bloc Notes 5.3Mega Bloc Notes - Mega Bloc Notes est un éditeur de texte (TXT/RTF/XLS/DOC/MCW/HTM...) possédant une multitudes de fonctions originales telles...Catégorie: Traitement de texte
Licence: Freeware/gratuit
Télécharger AdBlock Plus 0.7.5.5AdBlock Plus - AdBlock Plus est l'une des extensions classiques de Firefox ,celui-ci bloque déjà en standard les fenêtre popup: AdBlock va...Catégorie: Extensions Firefox
Licence: Open Source
Télécharger Ript Public BetaRipt - Travaillez en s'amusant, c'est encore possible. Si vous voulez : créer une liste de tâches à faire, déchirer une...Catégorie: Graphisme
Licence: Freeware/gratuit
Télécharger Image Resizer 1Image Resizer - Petit utilitaire (PowerToy) basique, très simple, permettant de réduire la taille d'une image, dans le but, notamment, de...Catégorie: Graphisme
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « centrer mon bloc div avec mon image de fond »