Centrage d'une div

Justine71 · 2 Novembre 2009

Bonsoir à tous

Après avoir fait pas mal de recherches sur le net, je vois que ma question revient très souvent... J'ai appliqué tout ce que j'ai trouvé, mais le résultat est toujours le même.... Mon bloc haut ne se centre pas....

Voici un extrait de mon code CSS :

.conteneur {

margin-left: auto;

margin-right: auto;

text-align: left;

}

body {

margin: 0;

text-align: center;

}

.bloc_haut

{

margin-left: auto;

margin-right: auto;

padding: 0;

position: absolute;

width: 673px;

margin-top: 40px;

text-align: left;

/*border-width: 1px;

border-style: solid;

border-color: black;*/

}

Et voici l'adresse où je fais mes essais ( ne vous fiez pas au bordel de la page, je commence juste mon alignement, et je suis bloquée par ce centrage de la bannière flash tout en haut a gauche )
/>http://site.voila.fr/milleetuneperles/index2.html

Merci d'avance de vos réponses, & très bonne soirée à vous

EDIT : Et merci aux personnes de ce forum qui m'ont conseillé d'utiliser des div au lieu des frames, c'est en effet bien mieux, et ca me facilite la vie, merci beaucoup =D

Modifié 2 Novembre 2009 par Justine71

**Dadou** · 2 Novembre 2009

Enlève le position absolute de ton bloc haut, il ne sert absolument a rien

Justine71 · 2 Novembre 2009

Daccord, merci Dadou du conseil, je l'ai enlever

La div n'est toujours pas centré, mais j'ai suivi ton conseil à la lettre, merci beaucoup

**Dadou** · 2 Novembre 2009

Je n'avais pas regardé ton code, mais effectivement, cela ne risque pas de fonctionner.

Justine, tu ne t'étonnes pas de fermer ta balise body avant de mettre du contenu dedans? Et ton div conteneur il sert à quoi? et aussi align="center" sur un div ne fonctionne pas.

Tu n'as pas besoin d'encadrer ton flash d'un div

En gros, tu dois faire ainsi


<div id="conteneur">
  <object id="bloc_haut" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="673" height="117" align="middle"> 
    <param name="allowScriptAccess" value="sameDomain" /> 
    <param name="movie" value="banhome.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <embed src="banhome.swf" quality="high" bgcolor="#000000" width="673" height="117" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
  </object> 

  ...
  ...
</div>

et le css



body { 
  margin: 0; 
} 

.conteneur { 
  margin-left: auto; 
  margin-right: auto; 
  width: 673px;
} 

.bloc_haut {
  margin-top: 40px;
}

Justine71 · 4 Novembre 2009

Après avoir suivi tes bon conseils dadou, mon site est tout bien centré..... mais avec safari seulement ! Pour IE et firefox, c'est tout décalé.....

Alors j'en appelle a votre aide, car je désespère de ne pas trouver de solution.... =)

voici l'adresse : http://www.kinouche.com/accueil.html

Et mon CSS :

body
{
    background-color:#000000;
	font-size: 14px;
	color: #A7B6C1;
	font-family: georgia, times, verdana, sans-serif; 
 	text-indent: 15px;
	list-style-type: circle;
	width:1020px;
        margin:0 auto;
	padding: 0 ; 
	text-align: center ;
}

#conteneur
{
	width:1020px;
	height:517px;
	margin: 0 auto ;
}

#haut
{
	position: absolute;
	height:117px;
	width: 1020px;
	margin-top: 10px;
	/*border-width: 1px;
	border-style: solid;
	border-color: black;*/
	background-image:url(haut.jpg);
}

#boutonhaut
{
	position: absolute;
	height:72px;
	width: 1020px;
	margin-top: 150px;
	/*border-width: 1px;
	border-style: solid;
	border-color: black;*/
}

#gauche
{
	position: absolute;
	height:297px;
	width:221px;
	margin-top: 192px;
	margin-left:0px;
	text-align: center;
	/*border-width: 1px;
	border-style: solid;
	border-color: black;*/
	background-image:url(gauche.jpg);
}

#droit
{
	position: absolute;
	height:300px;
	width:222px;
	margin-top: 191px;
	margin-left:798px;
	/*border-width: 1px;
	border-style: solid;
	border-color: black;*/
	background-image:url(droite.jpg);
}
#centre
{
	position: absolute;
	height: 295px;
	width: 577px;
	margin-top: 192px;
	margin-left: 221px;
	/*border-width: 1px;
	border-style: solid;
	border-color: black;*/
	overflow:auto ;
	background-image:url(contenu.jpg);

}

#boutonbas
{
	position: absolute;
	height: 71px;
	width: 1020px;
	margin-top: 485px;
        margin-left: auto;
	/*border-width: 1px;
	border-style: solid;
	border-color: black;*/
}

Merci d'avance !!!

**Dadou** · 4 Novembre 2009

Pourquoi des absolutes partout, tu empêches une mise en forme simple : épure ton css comme cela :


body {
        background-color:#000000;
	font-size: 14px;
	color: #A7B6C1;
	font-family: georgia, times, verdana, sans-serif; 
 	text-indent: 15px;
	list-style-type: circle;
	margin: 0 ; 
	padding: 0 ; 
}

#conteneur {
	width:1020px;
	margin: 0 auto ;
        padding: 10px 0px;
}

#boutonhaut {
        margin-top: 20px;
        text-align: center;
}

#boutonhaut a {
        margin: 0px 5px;
}

#boutonhaut a img{
        border: none;
}

#gauche {
	height:297px;
	width:221px;
	margin-top: 10px;
	margin-left:0px;
	background-image:url(gauche.jpg);
        float: left;
}

#droit {
	height:300px;
	width:222px;
	margin-top: 10px;
	background-image:url(droite.jpg);
        float: right;
}
#centre {

	height: 295px;
	width: 577px;
	margin-top: 10px;
        overflow:auto ;
	background-image:url(contenu.jpg);
}

#boutonbas {
	height: 71px;
	margin-top: 10px;
        text-align: center;
}

#boutonbas a {
        margin: 0px 5px;
}

#boutonbas a img{
        border: none;
}

et ton html :


<html>
  <head>
    <title>Kinouche</title>
      <link rel="stylesheet" type="text/css" href="design.css">
  </head>

  <body> 
    <div id="conteneur">
      <object id="haut" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="643" height="87" align="middle">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="movie" value="banhome.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#000000" />
        <embed src="banhome.swf" quality="high" bgcolor="#000000" width="673" height="117" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
      </object>

      <div id="boutonhaut">
        <a href=""><img src="boutonpres2.jpg"></a>
        <a href=""><img src="boutoncollec2.jpg"></a>
        <a href=""><img src="boutoncomma2.jpg"></a>
        <a href=""><img src="boutonnews2.jpg"></a>
      </div>

      <div id="droit"></div>
      <div id="gauche"></div>

      <div id="centre">
        test
      </div>

      <div id="boutonbas">
        <a href=""><img src="boutoncontact2.jpg"></a>
        <a href=""><img src="boutonlivre2.jpg"></a>
        <a href=""><img src="boutonpoints2.jpg"></a>
      </div>
    </div>
  </body>
</html>

Cela doit se rapprocher de ce que tu veux, et tu remarqueras que c'est plus facile à lire comme code html. Et normalement, pas besoin de feuille de style spécifique à IE ni de mode de compatibilité IE7

Justine71 · 5 Novembre 2009

Merci beaucoup Dadou ! Alors j'ai appliqué ce que tu m'a dis, en effet, c'est bien mieux, et beaucoup plus facile a lire =)

Cependant le problème de compatibilité demeure présent...

Avec Safari, la bannière flash du haut est décalé vers la gauche alors que le reste est tout bien centré

& avec IE, tout est aligné sur la gauche et le "centre" est tout seul, tout en bas....

Je vais m'arracher les cheveux lol =)

Quelqu'un a une solution à mon problème ?

Merci d'avance et merci encore dadou pour cette réponse =D

Bonne journée à vous tous !

**Dadou** · 5 Novembre 2009

Avec Safari, la bannière flash du haut est décalé vers la gauche alors que le reste est tout bien centré

il manque juste dans le CSS


#haut {
  margin: 0 auto;
}

& avec IE, tout est aligné sur la gauche et le "centre" est tout seul, tout en bas....

Je vais m'arracher les cheveux lol =)

Tu as publié ?

Justine71 · 5 Novembre 2009

Oui j'ai publié, désolée, j'ai oublié de donner la nouvelle adresse ...
/>http://www.kinouche.com/accueil2.htm

Merci encore =)

**Dadou** · 5 Novembre 2009

Je pense que c'est un problème de marge pour IE, donc le bloc n'a pas la place pour s'intercaler.

Essais en agrandissant le width de ton conteneur

Justine71 · 5 Novembre 2009

Super !! Les problème du "centre" est réglé !

Donc la situation actuelle ( je suis trop contente, c'est beaucoup mieux qu'au début ! =) )

- Sous safari : design tout bien centré sauf la bannière flash qui s'obstine a rester sur la gauche ( j'ai rajouté le morceau "haut" du css que tu m'a donné )

- Sous IE : design tout aligné sur la gauche, et pareil pour la bannière flash...

**Dadou** · 5 Novembre 2009

Hum,

pour la bannière essaie ça :

#haut {
  margin: 0 auto;
  text-align: center;
}

et pour IE

#conteneur {
        width:1020px;
        margin: 0 auto ;
        padding: 10px 0px;
        text-align: center;
}

Justine71 · 5 Novembre 2009

Wahou ! Pour safari, c'est parfait !!!!

Pour IE la bannière flash s'est bien centrée par rapport au design, mais le tout est encore aligné sur la gauche...

Je suis trop contente, je commençais à perdre espoir ! Merci merci merciii !

Justine71 · 5 Novembre 2009

Après avoir chercher une bonne partie de l'après-midi, je ne trouve toujours pas de solution pour que mon design soit centré sous IE.... Donc si quelqu'un a une idée... =D

Bonne soirée & merci d'avance !!!

Justine71 · 6 Novembre 2009

C'est résolu =D

Il suffisait juste d'ajouter un doctype tout en haut de la page

Merci beaucoup à Dadou qui m'a énormément aidé !!

**Dadou** · 6 Novembre 2009

Oui sans doctype, IE a tendance a passer en mode quirks, et donc il fait un peu n'importe quoi

Connexion

Centrage d'une div

Sujets conseillés

Justine71

Dadou

Justine71

Dadou

Justine71

Dadou

Justine71

Dadou

Justine71

Dadou

Justine71

Dadou

Justine71

Justine71

Justine71

Dadou

Veuillez vous connecter pour commenter

Parcourir

Activité