Centrer une page web
Résolu/Fermé
nichevi
Messages postés
81
Date d'inscription
vendredi 29 décembre 2006
Statut
Membre
Dernière intervention
6 septembre 2016
-
23 janv. 2007 à 12:30
stylyroper - 19 janv. 2012 à 02:26
stylyroper - 19 janv. 2012 à 02:26
A voir également:
- Centrer une page web
- Supprimer une page word - Guide
- Traduire une page web - Guide
- Instagram web - Guide
- Créer une page facebook - Guide
- Page d'accueil iphone - Guide
4 réponses
P@
Messages postés
1709
Date d'inscription
vendredi 7 juillet 2000
Statut
Membre
Dernière intervention
24 mars 2009
185
23 janv. 2007 à 13:56
23 janv. 2007 à 13:56
tu peux nous montrer le code stp ?
où une adresse où on pourrait consulter ??
ca aiderai
où une adresse où on pourrait consulter ??
ca aiderai
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
23 janv. 2007 à 23:28
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
Puis, juste après
Puis, juste avant
Ç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
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.
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>
<style>
#div-à-centrer {
position: relative;
margin: auto;
width: ce-que-vous-voulezpx;
}
</style>
<!--
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>
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>
23 janv. 2007 à 15:48
<!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>