Aller au contenu

Centrage d'une div

Justine71

Par Justine71
dans (X)HTML et CSS

 Partager

Sujets conseillés

Justine71

Justine71

Posté
Posté (modifié)

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é par Justine71
Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

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;
}

Lien vers le commentaire
Partager sur d’autres sites
Justine71

Justine71

Posté
  • Auteur
Posté

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 !!!

Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Justine71

Justine71

Posté
  • Auteur
Posté

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 !

Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

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é ?

Lien vers le commentaire
Partager sur d’autres sites
Justine71

Justine71

Posté
  • Auteur
Posté

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...

Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

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;
}

Lien vers le commentaire
Partager sur d’autres sites
Justine71

Justine71

Posté
  • Auteur
Posté

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 !

Lien vers le commentaire
Partager sur d’autres sites
Justine71

Justine71

Posté
  • Auteur
Posté

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 !!!

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...