Centrer une page web

Résolu
nichevi Messages postés 86 Date d'inscription   Statut Membre Dernière intervention   -  
 stylyroper -
Bonjour,
J'ai centrer mes pages web mais il y un problème à l'affichage.Le contenu n'ait pas centrer, c'est seulement la bannière et le pied de page qui sont centrer.
Merci pour votre aide.
Configuration: Windows XP
Internet Explorer 7.0

4 réponses

  1. P@ Messages postés 1137 Date d'inscription   Statut Membre 185
     
    tu peux nous montrer le code stp ?
    où une adresse où on pourrait consulter ??
    ca aiderai
    0
    1. nichevi Messages postés 86 Date d'inscription   Statut Membre Dernière intervention   6
       
      je vs envoie les codes


      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <HEAD>
      <TITLE>Photos</TITLE>
      <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
      <META NAME="Generator" CONTENT="NetObjects Fusion 8 for Windows">
      <SCRIPT>
      <!--
      function F_loadRollover(){} function F_roll(){}
      //-->
      </SCRIPT>
      <SCRIPT LANGUAGE="JavaScript1.2" SRC="file:///D:/Program Files/NetObjects/NetObjects Fusion 8/NetObjects System/rollover.js"></SCRIPT>
      <LINK REL=STYLESHEET TYPE="text/css" HREF="file:///C:/site+/site2/sadet/Preview/style.css">
      <LINK REL=STYLESHEET TYPE="text/css" HREF="file:///C:/site+/site2/sadet/Preview/site.css">
      <STYLE></STYLE><NOLAYER>
      <STYLE ID="NOF_STYLE_SHEET">
      <!--
      #Layer1 {
      position:absolute;
      left:7px;
      top:160px;
      width:504px;
      height:37px;
      z-index:1;
      }
      #Layer2 {
      position:absolute;
      left:1px;
      top:157px;
      width:473px;
      height:64px;
      z-index:1;
      }
      #Layer3 {
      position:absolute;
      left:572px;
      top:372px;
      width:163px;
      height:180px;
      z-index:2;
      }
      #Layer4 {
      position:absolute;
      left:425px;
      top:249px;
      width:105px;
      height:126px;
      z-index:2;
      }
      .Style1 {color: #51A72C}
      a:link {
      color: #316AC5;
      }
      a:visited {
      color: #316AC5;
      }
      a:hover {
      color: #990099;
      }
      #Layer5 {
      position:absolute;
      left:45px;
      top:279px;
      width:362px;
      height:216px;
      z-index:3;
      }
      .Style2 {font-size: 12px}
      .Style3 {font-size: 12; }

      -->
      </STYLE>

      </NOLAYER>
      </HEAD>
      <BODY NOF="(MB=(DefaultMasterBorder, 274, 66, 157, 10), L=(PhotosLayout, 624, 594))" TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
      <div id="Layer2">
      <div align="center"><img src="pub2.jpg" width="728" height="90"></div>
      </div>
      <div id="Layer4">
      <div align="center">
      <table width="348" border="1">
      <tr>
      <th width="206" scope="col"><span class="Style1">BUREAUTIQUE</span></th>
      <th width="108" scope="col"> </th>
      </tr>
      <tr>
      <td scope="row"><a href="bureaux.html">Bureaux</a></a>,<a href="siege1.html">Sièges et Fauteuils</a>,<a href="canon.html">Photocopieurs</a>,Machines à écrire,<a href="mach calc.html">Machine à calculer</a>,<a href="scanners.html">Scanners</a>...  </td>
      <td><img src="pub.1.gif" width="100" height="73"> </td>
      </tr>
      <tr>
      <th scope="row"><span class="Style1">GALERIE ART-DECO </span></th>
      <td> </td>
      </tr>
      <tr>
      <td scope="row"><strong>DECORATION</strong>
      </p>
      </strong>
      <p><a href="mob mais.html">Maisons</a>, <a href="mob bur.html">Bureaux</a>,<a href="bougie1.html">Bougies</a>,<a href="vase1.html"><a href="vase1.html">Vases</a> </td>
      <td><img src="pub.2.gif" width="100" height="75"> </td>
      </tr>
      <tr>
      <th scope="row"><span class="Style1">INFORMATIQUE</span></th>
      <td> </td>
      </tr>
      <tr>
      <td scope="row"><strong>ORDINATEUR DE MARQUE
      </p>
      </strong>
      <p><a href="hp_dell.html">HP,Dell</a>,<a href="canon.html">Brother,Canon.</a>.. </td>
      <td><img src="ordired.jpg" width="100" height="48"> </td>
      </tr>
      <tr>
      <th scope="row"><span class="Style1">FABRICANT</span></th>
      <td> </td>
      </tr>
      <tr>
      <td scope="row"><a href="mob bur1.html">Mobilier de bureaux
      </a>
      <p><a href="mob mais1.html">Mobilier de maison</a></p>
      <p><a href="mob hotel1.html">Mobilier pour hôtels  </a></p></td>
      <td><img src="burRed.jpg" width="100" height="73"> </td>
      </tr>
      </table>
      </div>
      </div>
      <div id="Layer5">
      <div class="Style2" id="Layer10">
      <p align="center" class="Style17 Style3"><strong>FABRICANT</strong></p>
      <p align="center" class="Style2">La société BORRO FRERES dispose en son sein une grande usine de fabrication de mobilier (<a href="mob bur.html">Mobilier de bureau</a> et de maison) ; Borro est parmi les meilleurs et les plus grand <a href="mob mais.html">fabricant de mobilier</a>. Depuis plus de 40 ans Borro fabrique des <a href="bureaux.html">bureaux</a> de qualités avec du vrai bois de chez nous c'est-à-dire la Côte d’Ivoire.<br />
      BORRO FRERES fabrique sur commande spéciales. </p>
      <p align="center"> </p>
      </div>
      </div>
      <div align="center">
      <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 NOF=LY>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD WIDTH=780>
      <TABLE ID="Table78" BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%">
      <TR HEIGHT=77>
      <TD WIDTH=780 STYLE="background-color: rgb(255,255,255);">
      <H1><IMG ID="Banner1" HEIGHT=120 WIDTH=780 SRC="bannière.jpg" VSPACE=0 HSPACE=0 ALIGN="TOP" BORDER=0 ALT="Your Title Here" TITLE="Your Title Here" NOF=B_H></TD>
      </TR>
      <TR HEIGHT=30>
      <TD STYLE="background-image: url('file:///C:/site+/site2/sadet/Styles/Champion - Rust/images/navbar_bg.gif');">
      <H1>
      <TABLE WIDTH=781 BORDER=0 CELLSPACING=0 CELLPADDING=0 ALIGN=LEFT NOF=TE>
      <TR>
      <TD width="781">
      <TABLE ID="NavigationBar1" BORDER=0 CELLSPACING=0 CELLPADDING=0 NOF=NB_FYHPNY120 WIDTH=780>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD WIDTH=130><A HREF="./index.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton1','',0);F_roll('NavigationButton1',1)" onMouseOut="F_roll('NavigationButton1',0)"><IMG ID="NavigationButton1" NAME="NavigationButton1" HEIGHT=30 WIDTH=130 SRC="Autogen/Home_Nregular_1.gif" onLoad="F_loadRollover(this,'Home_NRregularRollover_1.gif',0)" BORDER=0 ALT="Home" TITLE="Home"></A></TD>
      <TD WIDTH=130><A HREF="./contact_us.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton2','',0);F_roll('NavigationButton2',1)" onMouseOut="F_roll('NavigationButton2',0)"><IMG ID="NavigationButton2" NAME="NavigationButton2" HEIGHT=30 WIDTH=130 SRC="Autogen/Contact_Us_Nregular_1.gif" onLoad="F_loadRollover(this,'Contact_Us_NRregularRollover_1.gif',0)" BORDER=0 ALT="Contact Us" TITLE="Contact Us"></A></TD>
      <TD WIDTH=130><A HREF="./services.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton3','',0);F_roll('NavigationButton3',1)" onMouseOut="F_roll('NavigationButton3',0)"><IMG ID="NavigationButton3" NAME="NavigationButton3" HEIGHT=30 WIDTH=130 SRC="Autogen/Services_Nregular_1.gif" onLoad="F_loadRollover(this,'Services_NRregularRollover_1.gif',0)" BORDER=0 ALT="Services" TITLE="Services"></A></TD>
      <TD WIDTH=130><A HREF="./events.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton4','',0);F_roll('NavigationButton4',1)" onMouseOut="F_roll('NavigationButton4',0)"><IMG ID="NavigationButton4" NAME="NavigationButton4" HEIGHT=30 WIDTH=130 SRC="Autogen/Events_Nregular_1.gif" onLoad="F_loadRollover(this,'Events_HRhighlightedRollover_1.gif',0)" BORDER=0 ALT="Events" TITLE="Events"></A></TD>
      <TD WIDTH=260 HEIGHT=30><IMG ID="NavigationButton5" NAME="NavigationButton5" HEIGHT=30 WIDTH=130 SRC="Autogen/About_Nregular_1.gif" onLoad="F_loadRollover(this,'Photo_Gallery_HRhighlightedRollover_2.gif',0)" BORDER=0 ALT="Photo Gallery" TITLE="Photo Gallery"><img src="Autogen/Newsletter_Hhighlighted_1.gif" width="130" height="30"></TD>
      </TR>
      </TABLE> </TD>
      </TR>
      </TABLE> </TD>
      </TR>
      </TABLE> </TD>
      </TR>
      </TABLE>
      <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH=781 NOF=LY>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD> </TD>
      <TD>
      <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 NOF=LY>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD WIDTH=624>
      <TABLE ID="Table3" BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%">
      <TR HEIGHT=167>
      <TD WIDTH=250>
      <H1></TD>
      <TD WIDTH=190>
      <H1></TD>
      <TD WIDTH=184>
      <H1></TD>
      </TR>
      </TABLE> </TD>
      </TR>
      </TABLE> </TD>
      </TR>
      </TABLE>
      <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH=710 NOF=LY>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD>
      <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=117 NOF=LY>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD WIDTH=37 HEIGHT=15><IMG SRC="file:///C:/site+/site2/sadet/Preview/Autogen/clearpixel.gif" WIDTH=37 HEIGHT=1 BORDER=0 ALT=""></TD>
      <TD></TD>
      </TR>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD HEIGHT=49></TD>
      <TD WIDTH=80><A HREF="http://netobjects.com/"></A></TD>
      </TR>
      </TABLE> </TD>
      <TD>
      <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 NOF=LY>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD WIDTH=33 HEIGHT=33><IMG SRC="file:///C:/site+/site2/sadet/Preview/Autogen/clearpixel.gif" WIDTH=33 HEIGHT=1 BORDER=0 ALT=""></TD>
      <TD><p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p></TD>
      </TR>
      <TR VALIGN=TOP ALIGN=LEFT>
      <TD></TD>
      <TD WIDTH=560 NOF="NB_FYHTNN120" CLASS="TextNavBar" STYLE="text-align: center;">[<A HREF="./index.html">Home</A>] [<A HREF="./contact_us.html">Contact Us</A>] [<A HREF="./services.html">Services</A>] [<A HREF="./events.html">Events</A>] [<A HREF="Newsletter">Photo Gallery</A>]</TD>
      </TR>
      </TABLE> </TD>
      </TR>
      </TABLE>
      </div>
      </BODY>
      </HTML>
      0
  2. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    Bonjour,

    Je te propose une technique classique.
    Place l'ensemble de la page dans un bloc que tu positionneras.

    Alors, après
    <STYLE ID="NOF_STYLE_SHEET"> 
    <!-- 
    
    ajoute
    body {
      margin : 0;
      padding : 0;
      text-align : center;     /* c'est ça qui centre dans IE */
      }
    #conteneur {
      position : relative;
      margin : 0 auto;          /* c'est ça qui centre dans les autres */
      padding : 0;
      text-align : left;
      border : 2px solid #f00;  /* ça c'est pour la voir. Tu peux le supprimer */
      width : 1008px; 
      }
    

    Puis, juste après
    <BODY NOF="(MB=(DefaultMasterBorder, 274, 66, 157, 10), L=(PhotosLayout, 624, 594))" TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> 
    
    ajoute
    <div id="conteneur">

    Puis, juste avant
    </BODY>
    ajoute
    </div>

    Ça ne fera que commencer à résoudre tes problèmes mais ça devrait centrer.

    + Merci de ne pas créer une succession de posts pour poser la même question.

    Et attention à tes liens, certains pointent vers des dossiers de ton disque local
    SRC="file:///C:/site+/site2/sadet/Preview/Autogen/clearpixel.gif"
    en ligne, ça ne marchera pas.
    0
  3. nera
     
    c'est tres facil de center une page web !!! il vous suffit de mettre dans votre css :
    <style>

    #div-à-centrer {
    position: relative;
    margin: auto;
    width: ce-que-vous-voulezpx;
    }

    </style>
    0
  4. stylyroper
     
    <!--
    body {
    background-image: url(img/intro.jpg);
    background-repeat: no-repeat; background-position:top ; width:100%;
    }
    #apDiv1 {
    position:absolute;
    left:404px;
    top:189px;
    width:auto;
    height:16px;
    z-index:1;
    }
    #apDiv2 {
    position:absolute;
    left:558px;
    top:187px;
    width:39px;
    height:21px;
    z-index:2;
    }
    #apDiv3 {
    position:absolute;
    left:688px;
    top:187px;
    width:64px;
    height:22px;
    z-index:3;
    }
    #apDiv4 {
    position:absolute;
    left:833px;
    top:188px;
    width:84px;
    height:19px;
    z-index:4;
    }
    .Style6 {
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", Times, serif;
    }
    .Style7 {font-family: "Times New Roman", Times, serif; color: #FFFFFF;}
    a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #FFFFFF;
    }
    a:hover {
    text-decoration: underline;
    color: #FFFFFF;
    }
    a:active {
    text-decoration: none;
    color: #FFFFFF;
    }
    -->
    </style>
    <div id="menu" align="right" >
    <div class="Style6" id="apDiv1"><a href="ABOUT.php" target="_parent">ABOUT</a></div>
    <div class="Style7" id="apDiv2"><a href="MALE.php" target="_parent">MALE</a></div>
    <div class="Style7" id="apDiv3"><a href="F.php" target="_parent">FEMALE</a></div>
    <div class="Style7" id="apDiv4"><a href="CONTACT.php" target="_parent">CONTACT</a></div>
    0