[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Margin: auto ne marche pas > Lecture du sujet

Margin: auto ne marche pas

Vous devez être inscrit pour pouvoir poster des messages

Résolu Le problème de ce sujet a été résolu

Page : 1

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : 1

Masakatto

# Posté le 05/07/2008 à 23:13:20

Groupe : Membres

Bonsoir,

Débutant en programmation XHTML/CSS, beaucoup de problèmes apparaissent.
En effet, un nouveau problème viens de naître, le margin auto ne fonctionne pas sur ma div bannière.
Après plusieurs recherches, j'ai trouvé une autre solution utilisant le margin-left, mais un ami m'a fortement déconseiller d'utiliser le margin left et le margin top et plutôt utilisé le left et top.

Pour cette raison, j'aimerais qu'une personne charitable puisse m'aider et me conseiller.

Voici le code avec le margin auto:

Code : CSS

#Banniere
{
background-image: url("Banniere.png");
position: absolute;
margin: auto;
width: 850px;
height: 170px;
top: 0px;
}

Voici le code avec le margin-left:

Code : CSS

#Banniere
{
background-image: url("Banniere.png");
position: absolute;
margin: auto;
width: 850px;
height: 170px;
left: 50%;
top: 0px;
margin-left: -425px;
}

Merci pour votre aide.

nicko77

# Posté le 05/07/2008 à 23:47:56

what's up ?

Groupe : Membres

Euh ta div Banniere, elle se trouve comment dans ton site ?
Car normalement, c'est juste ton body que tu centres, pas chaque bloc vu que les blocs sont censés être inclus dans ton body ou un conteneur.

Donc commence par revoir la structure de ton site, car il me semble que tu es mal parti.

Masakatto

# Posté le 05/07/2008 à 23:59:50

Groupe : Membres

Ma div Bannière ce trouve entre les body.
De plus, j'ai fait un margin auto sur le body et html, et ça ne fonctionne pas non plus.

Peu être qu'avec tout le code, vous comprendriez mieux.

Code XHTML :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
   
   <div id="Fond_2">
   </div>
   
   <div id="Banniere">
   </div>
   
   </body>
</html>

Code CSS :
Code : CSS

html, body
{
background-image: url("Fond.png");
background-attachment: fixed;
background-repeat: repeat-y repeat-x;
margin: 0;
padding: 0;
height: 100%;
}

#Fond_2
{
background-image: url("Fond_2.png");
background-repeat: repeat-y;
margin: auto;
width: 850px;
height: 100%;
}

#Banniere
{
background-image: url("Banniere.png");
position: absolute;
margin: auto;
width: 850px;
height: 170px;
left: 50%;
margin-left: -425px;
top: 0px;
}

Merci.

Yano

# Posté le 06/07/2008 à 00:19:18

Groupe : Membres

Bonjour,

Citation : nicko77

commence par revoir la structure de ton site

+1

Il va t'expliquer.

(-:

Édité le 06/07/2008 à 00:32:05 par Yano

Si dans mes exemples des styles ou des scripts sont dans la page HTML,
sortez-les de là et placez-les dans des fichiers .css et .js externes.

Et testez votre site dans une fenêtre qui n'est pas en plein écran. Faites varier sa taille.

nicko77

# Posté le 06/07/2008 à 00:27:56

what's up ?

Groupe : Membres

Bon Yano m'a encore volé la vedette, je te laisse à ses soins...

Yano

# Posté le 06/07/2008 à 00:30:04

Groupe : Membres

Désolé…

Je supprime.

Jean-Mich

# Posté le 06/07/2008 à 00:34:20

Groupe : Membres

Citation : Yano

Désolé…

Je supprime.

Ça c'est super (pas) malin ...

Yano

# Posté le 06/07/2008 à 00:43:05

Groupe : Membres

Ce post est un quasi chat.
Il fallait être ici il y a quelques minutes…

++
Je saurai expliquer à nouveau, avec les mêmes mots exactement, si nécessaire.

Édité le 06/07/2008 à 00:43:56 par Yano

Masakatto

# Posté le 06/07/2008 à 00:53:50

Groupe : Membres

Mon problème à été résolu.
Dommage que la solution soit supprimée, elle aurait pu aider certaines personnes dans le même cas.

Merci à vous, je garde en tête vos conseils et ce qui m'a été appris ici.

Merci encore et à bientôt.

nicko77

# Posté le 06/07/2008 à 00:59:42

what's up ?

Groupe : Membres

C'est malin j'ai effacé mes explications :S

Bon j'le refais alors.

Voilà la structure que devrait avoir ton site :

Code : HTML

<html>

<body>

<div id="global"> /*voici un conteneur global. Ca permet beaucoup de choses.*/

<div id="banniere">
</div>

</div>

</body>
</html>

Enfin le CSS. Bon Yano te l'avait intégré cash dans le HTML pour un seul code, mais c'est pareil hein

Code : CSS

body
{
background-image: url("Fond.png");
margin: auto;
}

#global
{
position: absolute;
background-image: url("Fond_2.png");
background-repeat: repeat-y;
width: 850px;
left: 50%;
margin-left: -425px;
}

#Banniere
{
background-image: url("Banniere.png");
height: 170px;
}

Si j'ai bien compris ce que tu cherchais à faire ca devrait etre correct.
Est-ce bon Yano ? Car malgré tout tu restes la référence dans le HTML/CSS, j'ai appris beaucoup en lisant tes réponses.

Edit : J'ai de la chance ce soir avec mes explications, j'suis trop long à écrire :S

Edit 2 : Oui en fait j'suis allé encore trop vite. C'est le global qu'on positionne et non le body... J'le sais en plus. Je corrige et j'donne ce que j'utilise en plus.
Maintenant explications. J'aime ce positionnement de base car il me permet de me servir des position absolute quand j'ai la flemme de faire autrement sans pourtant avoir un code crade

Édité le 06/07/2008 à 01:05:43 par nicko77

Yano

# Posté le 06/07/2008 à 01:01:23

Groupe : Membres

Dommage surtout que toi tu ne donnes pas ta solution )-:

Elle aurait été utile aussi.

Voilà ce que j'indiquais (kif-kif nicko77) :

<je me cite à rebours>
Si j'ai bien compris, tu cherches à positionner la banière en haut et au milieu.

Tu peux faire ça sans toutes ces complications.

Mets-la dans le Fond_2 (son nom est mal touvé, changes-en) et supprime tout ce qui te sert actuellement à le positionner.

Ensuite, tu pourras aussi y ajouter tous les blocs de ta page et il seront centrés aussi.
Sans avoir à compenser la marge haute pour le 1er bloc que tu y mettras.

Essaye

Code : HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  <style type="text/css">
    html, body {
    background: url("fond.png") fixed repeat;
      margin: 0;
      padding: 0;
      height: 100%;
      }
    #global {
    background: url("fond_2.png") repeat-y;
    margin: 0 auto;
      width: 850px;
      height: 100%;
      }
    #banniere {
      background-image: url("banniere.png");
  /*      position: absolute;
      left: 50%;
      margin-left: -425px;
      top: 0px;
      margin: auto;
      width: 850px;*/
      height: 170px;
      }
  </style>
</head>
<body>

  <div id="global">
    <div id="banniere">banniere</div>
<!--
    <div id="menu_haut></div>
    <div id="menu_gauche></div>
    <div id="corps></div>
    <div id="pieddepage></div>
-->
  </div> <!-- fin de global -->

</body>
</html>

</je me cite à rebours>

Et j'ajoute, évite les majuscules.
Ça t'évitera des problèmes.

Édité le 06/07/2008 à 01:09:03 par Yano

Si dans mes exemples des styles ou des scripts sont dans la page HTML,
sortez-les de là et placez-les dans des fichiers .css et .js externes.

Et testez votre site dans une fenêtre qui n'est pas en plein écran. Faites varier sa taille.

Jean-Mich

# Posté le 06/07/2008 à 01:39:52

Groupe : Membres

Citation : Yano

Ce post est un quasi chat.
Il fallait être ici il y a quelques minutes…

++
Je saurai expliquer à nouveau, avec les mêmes mots exactement, si nécessaire.

J'y étais ... d'où mon message.
Au final, tu réécris la même chose et vous multipliez les posts ...

Masakatto

# Posté le 06/07/2008 à 01:46:40

Groupe : Membres

J'ai de nouveau un problème, j'ai changer en fonction de ce que vous m'avez dit, tout marche à merveille mais j'ai ajouté une nouvelle div "sous_menu" dans la div "globale" pour qu'elle soit automatiquement centré.
Le problème est là, ça ne marche pas.
(Je suis vraiment maudit en ce moment)

Pouvez-vous de nouveaux m'aider ?

Code XHTML:

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
   
   <div id="globale">
      <div id="banniere"></div>
	  <div id="sous_menu"></div>
   </div>
  
   </body>
</html>

Code CSS:

Code : CSS

html,body
{
background: url("Fond.png") fixed repeat;
margin: 0;
padding: 0;
height: 100%;
}
	
#globale 
{
background: url("Globale.png") repeat-y;
margin: 0 auto; /*Centre chaque div qu'il contient*/
width: 850px;
height: 100%;
}
	
#banniere 
{
background-image: url("Banniere.png");
height: 170px;
}

#sous_menu
{
background-image: url("Sous_Menu.png");
width: 739px;
height: 106px;
}

Merci encore une fois, c'est très gentil de votre part.

Yano

# Posté le 06/07/2008 à 13:52:30

Groupe : Membres

margin: 0 auto; /* Centre chaque div qu'il contient */
margin: 0 auto; /* Se centre lui-même */

Le contenu de globale se trouvera centré sur la page s'il a la même largeur que ce globale.

Pour des blocs de taille inférieure, il faut à nouveau leur appliquer du auto pour qu'ils soient eux-mêmes centrés dans le globale.

Code : CSS

#sous_menu {  /* sous_menu sans menu ?  */
  background-image: url("sous_menu.png");
  width: 739px;
  height: 106px;
margin : auto;
  }

Édité le 06/07/2008 à 14:51:36 par Yano

Masakatto

# Posté le 06/07/2008 à 14:32:36

Groupe : Membres

D'accord, je comprends mieux maintenant.
Merci.

J'ai une autre, question:
Est-ce normale que mon sous-menu (C'est une image qui va être sous le menu, le menu viendra après

) ce place en dessous de ma bannière ? (En effet, j'ai cru comprendre qu'avec la div globale qui l'entoure, il serait automatiquement placé au top 0, peu être faut-il la même largeur encore une fois ?)

Je peux effectivement mettre une position relative et mettre top à 0 et ça marche, mais , est ce que c'est une bonne solution ?
(Si vous voulez, je peux mettre un screen pour vous puissiez mieux comprendre.)

Yano

# Posté le 06/07/2008 à 14:55:20

Groupe : Membres

Évite de croire. Vérifie (-;

Le sous_menu arrivant après le banniere, il se place en dessous.
C'est le fonctionnement normal de HTML.

Actuellement, tu as ça

Code : HTML

<div id="globale">
  <div id="banniere"></div>
  <div id="sous_menu"></div>
</div>

Essaye

Code : HTML

<div id="globale">
  <div id="sous_menu"></div>
  <div id="banniere"></div>
</div>

ou

Code : HTML

<div id="globale">
  <div id="banniere">
    <div id="sous_menu"></div>
  </div>
</div>

Oui, fais voir.

++
On ne connaît toujours pas la solution que tu avais trouvée.

Édité le 06/07/2008 à 14:59:30 par Yano

Masakatto

# Posté le 06/07/2008 à 15:23:29

Groupe : Membres

Solution trouvé, comme tu me l'a suggéré, il fallait utiliser ce code XHTML :

Code : HTML

<div id="globale">
  <div id="banniere">
    <div id="sous_menu"></div>
  </div>
</div>

Voici le screen ou j'en suis actuellement :

http://img398.imageshack.us/img398/164 [...] nternewt7.png

Voilà à quoi doit ressembler le site une fois finit :

http://img363.imageshack.us/img363/205 [...] inale3so5.png

Pour la solution, je vous met mon code CSS et mon code XHTML :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
   
   <div id="globale">
      <div id="banniere">
	     <div id="sous_menu"></div>
	  </div>
   </div>
  
   </body>
</html>

Code : CSS

html,body
{
background: url("Fond.png") fixed repeat;
margin: 0;
padding: 0;
height: 100%;
}
	
#globale 
{
background: url("Globale.png") repeat-y;
margin: 0 auto;
width: 850px;
height: 100%;
}
	
#banniere 
{
background-image: url("Banniere.png");
height: 170px;
}

#sous_menu
{
background-image: url("Sous_Menu.png");
width: 739px;
height: 106px;
margin: auto;
}

Voilà.

Pour la suite, je ne sais pas par ou continuer, doit-je commencer le menu déroulant ? ou doit-je continué avec la partie du bas ?

KorangaR

# Posté le 06/07/2008 à 15:43:58

Groupe : Membres

Tu sembles être atteint de la divite.

Code : CSS

html,body
{
background: url("Fond.png") fixed repeat;
margin: 0;
padding: 0;
height: 100%;
}

Jvois pas l'intérêt d'appliquer ces styles à html, body suffit.

Yano

# Posté le 06/07/2008 à 15:46:09

Groupe : Membres

C'est une autre question.

Pour la suite, il faudra que tu crées un nouveau post.
Sinon on ne va plus s'y retrouver.

Repose la nouvelle question en donnant éventuellement un lien vers cette partie.
Redonne les liens vers tes images.
Précise ce qu'est réellement “Banniere.png”

Il serait même préférable que la page soit en ligne et que tu donnes son adresse.
Nous aurons ainsi accès au code et aux images.
Plus pratique.

Masakatto

# Posté le 06/07/2008 à 16:21:53

Groupe : Membres

Pour le html, si je ne le met pas, ma bande de fond n'apparait plus.
En faite, ce que je voulais faire, c'est avoir une bande de fond qui prennent 100% de la page en hauteur, 850 px de largeur et qui soit centré.

J'utilisais ce code, mais il marchait pas, l'image ne prenait jamais 100% de la page en hauteur:

Code : CSS

#globale 
{
background: url("Globale.png") repeat-y;
width: 850px;
height: 100%;
}

j'ai donc trouver un code sur internet, et le problème à été résolu, c'est pour cela que j'ai laissé ainsi.

Si vous trouvez cela vraiment pas correct comme programmation, je peux recommencer à zéro s'il le faut, mais je ne serais pas comment obtenir ce résultat autrement.

Je vais poster un autre sujet pour ma question, et je vais essayer de mettre la page en ligne.

Merci pour votre aides, grâce à vous , je reste calme et je ne m'énerve pas devant mon ordinateur , c'est super .

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Margin: auto ne marche pas