Problême de mise en application du code pour centrer mon site

Question

fbinfographie

18 Jul 2006 à 13:03

voilà J'ai essayé de réaliser mon site en css avec pour objectif de centrer mon site au milieu de la fenêtre des navigateurs. J'ai suivis les tutos, et dans un premier temps, je suis arrivé à quelque chose qui fonctionnais sur IE mais (pc) mais pas sous firefox (mac) ? En effet avec firefox (mac) un de mes boutons se retrouvait en haut à gauche de la fenêtre et deux de mes textes dans des places qui n'étaitent pas les leures. Je définissais alors pour chaque calques, l'emplacement avec left 50% height 50% et margin left et top. On m'a dis que c'était normal que celà ne marche pas qu'il fallais faire référence à mon calque conteneur (#global) et enlever les margin et les 50%. J'ai fais ça, mais maintenant, mes bouton ne suivent plus l'agrazndissement de la fenêtre, ils restent définitivement en place ! J'ai du oublier un truc ou mal appliquer le code? Donc voici mon code accompagné d'un gros "HELP" :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>marcynema</title>
<style type="text/css">
<!--
body {
	background-color: #212210;
	margin-left: 0%;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 0%;
}
#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 900px;
     height: 550px;
     margin-top: -275px; /* moitié de la hauteur */
     margin-left: -450px; /* moitié de la largeur */
	 border:1px none #000000;
     }
#bouton_program {
	position:absolute;
	left: 473px;
	top: 464px;
	width: 198px;
	height: 21px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:8;
}
#page_histoire {
	position:absolute;
	left: 475px;
	top: 94px;
	width: 156px;
	height: 21px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:9;
}
}
#edito_on_off {
	position:absolute;
	left: 380px;
	top: 94px;
	width: 82px;
	height: 21px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:10;
}
#comment_venir_on_off {
	position:absolute;
	left: 316px;
	top: 464px;
	width: 154px;
	height: 21px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:11;
}
#diaporama_on_off {
	position:absolute;
	left: 645px;
	top: 94px;
	width: 117px;
	height: 21px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:12;
}
#partenaires_on_off {
	position:absolute;
	left: 700px;
	top: 464px;
	width: 104px;
	height: 21px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:13;
}
#ou_manger_dormir {
	position:absolute;
	left: 124px;
	top: 464px;
	width: 189px;
	height: 21px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:14;
}
#logofbinfo {
	position:absolute;
	left: 875px;
	top: 490px;
	width: 63px;
	height: 69px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:15;
}
.fab01 {font-family: Arial, Helvetica, sans-serif; color: #82844f;}
#texte_developpement {	position:absolute;
	left: 567px;
	top: 552px;
	width:256px;
	height:14px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:16;
}
.fbinfo_webdesign_dev {
	font-size: 12px;
	font-weight: bold;
	color: #c9cc7a;
}
#liens_blog_boite {	position:absolute;
	left: 835px;
	top: 20px;
	width: 110px;
	height: 40;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:18;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
.Style4 {font-family: Arial, Helvetica, sans-serif; color: #82844f; font-size: 14px; }
.Style5 {font-size: 14px}
#pl_projo_prog_36 {
	position:absolute;
	left: 149px;
	top: 219px;
	width:69px;
	height:30px;
	background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jpg);
	z-index:19;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('boutons_on/histoire_on.jpg','boutons_on/edito_on.jpg','boutons_on/comment_venir_on.jpg','boutons_on/diaporama_on.jpg','boutons_on/partenaires_on.jpg','boutons_on/manger_dormir_on.jpg','boutons_on/fbinfographie_on.jpg','boutons_on/programme_36emes_on.jpg')">
<div id="global"><img src="Base_image/page_type.jpg" width="900" height="550" /></div>
<div id="page_histoire"><a href="page_histoire.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('chaplin_on_off','','vignettes_on/chaplin_on.jpg','histoire','','boutons_on/histoire_on.jpg',1)"><img src="boutons_off/histoire_off.jpg" name="histoire" width="156" height="21" border="0" id="histoire" /></a></div>
<div id="edito_on_off"><a href="page_edito.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hitchcok','','vignettes_on/hitchcock_on.jpg','edito','','boutons_on/edito_on.jpg',1)"><img src="boutons_off/edito_off.jpg" name="edito" width="82" height="21" border="0" id="edito" /></a></div>
<div id="comment_venir_on_off"><a href="page_comment_venir.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('le_8','','vignettes_on/le_8_on.jpg','comment_venir','','boutons_on/comment_venir_on.jpg',1)"><img src="boutons_off/comment_venir_off.jpg" name="comment_venir" width="154" height="21" border="0" id="comment_venir" /></a></div>
<div id="diaporama_on_off"><a href="page_diaporama.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projo02','','vignettes_on/projecteur_02_on.jpg','diaporama','','boutons_on/diaporama_on.jpg',1)"><img src="boutons_off/diaporama_off.jpg" name="diaporama" width="117" height="21" border="0" id="diaporama" /></a></div>
<div id="partenaires_on_off"><a href="page_partenaire" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('on_tourne','','vignettes_on/on_tourne_on.jpg','partenaires','','boutons_on/partenaires_on.jpg',1)"></a><a href="page_partenaire.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','boutons_on/partenaires_on.jpg',1)"></a></div>
<div id="ou_manger_dormir"><a href="page_manger_dormir.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('flibust','','vignettes_on/flibustiere_on.jpg','manger_dormir','','boutons_on/manger_dormir_on.jpg',1)"><img src="boutons_off/manger_dormir_off.jpg" name="manger_dormir" width="189" height="21" border="0" id="manger_dormir" /></a></div>
<div id="logofbinfo"><a href="http|//spaces.msn.com/fbinfographie/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo_fbinfo','','boutons_on/fbinfographie_on.jpg',1)"><img src="boutons_off/fbinfographie_off.jpg" name="logo_fbinfo" width="63" height="69" border="0" id="logo_fbinfo" /></a></div>
<div id="texte_developpement">
  <p class="fab01"> <span class="fbinfo_webdesign_dev">Webdesign &amp; d&eacute;veloppement fBinfoghraphie</span></p>
</div>
<div class="fab01" id="liens_blog_boite">
  <div align="right">
    <p class="fab01"><a href="http://www.marcynema.org/blog" class="Style4">Blog marcyn&eacute;ma </a><span class="Style5"><a href="mailto:contact@marcynema.org" class="fab01">Nous &eacute;crire </a></span><span class="Style5"><a href="index.html" class="fab01">Retour accueil</a></span></span></p>
  </div>
  <a href="mailto:contact@marcynema.org" class="fab01">
  <label class="fab01"></label>
</a></div>
<div id="pl_projo_prog_36"><img src="plaques projo/plaque_projo_partenaires.jpg" width="158" height="34" /></div>
<div id="bouton_program"><a href="page_programme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('program','','boutons_on/programme_36emes_on.jpg',1)"><img src="boutons_off/programme_36emes_off.jpg" name="program" width="198" height="21" border="0" id="program" /></a></div>
</body>
</html>

Que faut-il que je fasse pour que tous se centre correctement ?

<modération: le même message, en sobre et plus lisible Smiley cligne

>[/i][/i][/i][/i][/i][/i]
Modifié par Laurent Denis (18 Jul 2006 - 13:09)

Sebastien D.

18 Jul 2006 à 14:40

Bonjour,

Je t'aurai bien aidé, surtout que je connais très très bien la région en question sur ce site internet, mais là n'est pas la question et le problème est doublement complexe :

- Le code est tout bonnement illisible pour un être humain, les layer1 et compagnie ne sont compréhensibles que par une folle bête nommée DreamWeaver ;
- Le plupart de tes éléments sont en position absolute... Ca n'aide pas vraiment pour les centrer.

L'idéal aurait été que tu disposes d'un div englobant le contenu (ici apparemment nommé Layer27) pour lequel il faudrait préciser :


#Layer27 {
     margin: 0 auto;
}

Ceci aurait pour effet de centrer le contenu d'après l'axe horizontal, il suffirait ensuite d'ajouter une marge supérieure à ce même bloc pour le centrer selon l'axe vertical.
J'ai essayé ceci sur ta page, mais cela ne donne rien, à cause, principalement, des positions absolute de tous les autres éléments...

fbinfographie

18 Jul 2006 à 21:58

j'ai enfin compris et résolu une partie de mon problême. Je n'avais pas saisie comment on magnait lers notions de contenu et de contenant dans dreamweaver. J'ai donc bien fais comme tu me l'avais dis sans oublier de placer les calques de contenu dans le contener grace à la liste des calques de dreamweaver et oh magie ! tout m'est apparu plus clair ! Et surtout ça marche. Sauf : pour les calques de texte "webdesigne et développement" et "blog marcynéma nous écrire". Ils ne reste pas en place dèsque l'on est sous firefox mac par exemple alors que sous IE sur PC, aucun problêmes . Il doit y avoir une ligne de code qui me manque pour parrer à celà, mais laquelle ? Help !
voilà le code comprenant les calques de texte :
............
#ou_manger_dormir {
position:absolute;
left: 20px;
top: 445px;
width: 189px;
height: 21px;
background-image:url(accueil%202006%20off%20%20pour%20fond.jp g);
layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jp g);
z-index:14;
}
#logofbinfo {
position:absolute;
left: 780px;
top: 472px;
width: 63px;
height: 69px;
background-image:url(accueil%202006%20off%20%20pour%20fond.jp g);
layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jp g);
z-index:15;
}
.fab01 {font-family: Arial, Helvetica, sans-serif; color: #82844f;}
#texte_developpement { position:absolute;
left: 464px;
top: 532px;
width:256px;
height:14px;
background-image:url(accueil%202006%20off%20%20pour%20fond.jp g);
layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jp g);
z-index:16;
}
.fbinfo_webdesign_dev {
font-size: 12px;
font-weight: bold;
margin: opx;
color: #c9cc7a;
}
#liens_blog_boite { position:absolute;
left: 733px;
top: 5px;
width: 110px;
height: 25px;
line-height:5%g
background-image:url(accueil%202006%20off%20%20pour%20fond.jp g);
layer-background-image:url(accueil%202006%20off%20%20pour%20fond.jp g);
z-index:17;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.Style4 {font-family: Arial, Helvetica, sans-serif; color: #82844f; font-size: 14px; margin: 0px}
.Style5 {font-size: 14px; margin: 0px}
-->
</style>
<script type="text/javascript">

</script>
</head>
<body onload="MM_preloadImages('vignettes_on/vignettes_centrales_on.jpg','vignettes_on/le_8_on.jpg','vignettes_on/chaplin_on.jpg','vignettes_on/projecteur_02_on.jpg','vignettes_on/flibustiere_on.jpg','vignettes_on/hitchcock_on.jpg','vignettes_on/on_tourne_on.jpg','boutons_on/programme_36emes_on.jpg','boutons_on/histoire_on.jpg','boutons_on/edito_on.jpg','boutons_on/comment_venir_on.jpg','boutons_on/diaporama_on.jpg','boutons_on/partenaires_on.jpg','boutons_on/manger_dormir_on.jpg','boutons_on/fbinfographie_on.jpg')">
<div id="global""Layer1">
<div class="fab01" id="liens_blog_boite">
<div align="right">
<p class="fab01"><a href="http://www.marcynema.org/blog" class="Style4">Blog marcynéma </a><span class="Style5"><a href="mailto:contact@marcynema.org" class="fab01">Nous écrire</a></span></p>
</div>
<a href="mailto:contact@marcynema.org" class="fab01">
<label class="fab01"></label>
</a></div>
<div id="texte_developpement">
<p class="fab01"> <span class="fbinfo_webdesign_dev">Webdesign & développement fBinfoghraphie</span></p>
</div>
<div id="logofbinfo"><a href="#http://spaces.msn.com/fbinfographie/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo_fbinfo','','boutons_on/fbinfographie_on.jpg',1)"><img src="boutons_off/fbinfographie_off.jpg" name="logo_fbinfo" width="63" height="69" border="0" id="logo_fbinfo" /></a></div>
<div id="ou_manger_dormir"><a href="page_manger_dormir.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('manger_dormir','','boutons_on/manger_dormir_on.jpg','flibust','','vignettes_on/flibustiere_on.jpg',1)"><img src="boutons_off/manger_dormir_off.jpg" name="manger_dormir" width="189" height="21" border="0" id="manger_dormir" /></a></div>
.....
donc help me please ? Là je vois plus ?[/i][/i][/i][/i][/i]

Vero

19 Jul 2006 à 00:31

Bonjour à toi aussi fbinfographie et bienvenue parmi nous !

Tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

En l'état, le topic est illisible !

Je te remercie par avance de bien vouloir éditer ton dernier message afin de le rendre conforme à cette règle. Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

Problême de mise en application du code pour centrer mon site