Posez votre question Signaler

Centrer une page web [Résolu]

nichevi 83Messages postés 29 décembre 2006Date d'inscription 29 novembre 2010Dernière intervention - Dernière réponse le 19 janv. 2012 à 02:26
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.
Lire la suite 

Centrer une page web »

5 réponses
Réponse
+2
moins plus
Gihef 5246Messages postés 20 juillet 2005Date d'inscription 23 janv. 2007 à 23:28
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.

Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
P@ 1137Messages postés 7 juillet 2000Date d'inscription 23 janv. 2007 à 13:56
tu peux nous montrer le code stp ?
où une adresse où on pourrait consulter ??
ca aiderai

Ajouter un commentaire - Site web
nichevi- 23 janv. 2007 à 15:48
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://www.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>
Ajouter un commentaire
Réponse
+0
moins plus
nera 28 août 2010 à 19:45
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>

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
stylyroper 19 janv. 2012 à 02:26
<!--
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>

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « centrer une page web » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?