Centrer un site ou l'adapter au visiteur [Résolu/Fermé]

Signaler
-
 Michel -
Bonjour je viens de réussir à publier un site internet, mais j'aimerai que celui ci soit centré sur ma page ou qu'il s'adapte au visiteur(qd je l'ouvre chez moi il est collé à gauche). Pour info le site est réaliser à partir de microsoft publisher et voici l'adresse du site www.usavon.fr

merci

13 réponses

Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 729
Bonjour,

Essaye cette technique :
Place l'ensemble de ton contenu dans un bloc que tu centreras.
Tu lui donneras des dimensions qui si elles sont <= à 760px de large seront adaptées aux différentes résolutions.

Ça se fait avec un peu de CSS et une balise <div> à ouvrir au début de ton <body> et à refermer à la fin.
Essaye ça :
Ligne 24, en dessous de
<title>Accueil</title>
<style>
<!--
colle
    html, body {
        margin: 0;
        padding: 0;
        text-align: center;
        }
    #conteneur {
        position: relative;
        margin: 0 auto;
        width: 760px;
        text-align: left;
        }

Ensuite, juste en dessous de
<body link="#990033" vlink=black bgcolor=white
background="index_fichiers/image307.gif" style='margin:0'>
colle
<div id="conteneur">
Il reste à refermer cette balise.
Au dessus de
</body>

</html>
colle
</div>
Il y en a déjà une, mais il en faut une autre.


Voilà, j'espère que ça marchera. Teste ça dans InternetExplorer.
Bon courage.


+ Attention, l'Organigramme pointe vers un fichier de ton disque dur : file:///C:/Documents%20and%20Settings/vero/Mes%20documents/ORGANIGRAMME.doc
Ils est inaccessible.
Et évite les .doc. Choisis un format plus universel. Certains, dont je suis, n'ont pas Word (quelle version, en plus ?)
merci bcp ca marche impec. pour l'organigramme je vais le publier dans un fichier du site mais dejé j'ai bcp avancé (mise en place du site en ligne, centré,) il me reste encore quelques trucs à améliorer.
merci pour cette réponse rapide
en fait en regardant bien il me rest un petit probleme: la pag d'acceuil est bien centrée mais lorsque je vais dans le lien "liste des sports" je retrouve le meme probleme , tout est a gauche. j'ai essayé le meme principe de "id=conteneur" meme visiblement cela ne marche pas. je pense que le principe est le bon mais je rate surement un détail.
Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 729
Chez moi, ça centre.

Vide le cache et recharge la page.

+ Le fond de tes pages me fait te proposer d'essayer ça (rien à voir avec le centrage).
Teste
    html, body {
        margin: 0;
        padding: 0;
        text-align: center;
        background-attachment : fixed;
        }
 
Il faut activer les ascenseurs pour le voir agir.


+ Si tu compte fabriquer de nombreuses page, il serait plus facile pour toi de stocker tes styles dans un fichier externe.
Pour info, sous IE, le contenu reste à gauche ;-)
Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 729
Étonnant, non ?

C'est pénible ce code Publisher.
Mais en cherchant, on trouve peut-être des pistes.

On voit, par exemple, un
<body link="#990033" vlink=black bgcolor=white
background="index_fichiers/image307.gif" style='margin:0'>
qui arrive donc après le <style> et (peut-être) parasite l'effet.
Essaye en le supprimant. Est-ce que ça suffira ?

Vraiment, pas très conforme. Publisher nous prouve encore qu'il n'est pas fait pour ça.
Mesures en inches, mise en page dans le code (je n'ose pas dire HTML), code propriétaire (juste pour IE)…

Et dire qu'on peut faire simple.

Quelques exemples :
  left:2in; top:552pt     in et pt
  mso-wrap-edited:f    ???
  left:111009875; top:96914094
  <v:stroke>
    <o:left v:ext="view"


Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 729
Et si on vire (vite fait) beaucoup de ces incongruités :
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
xmlns="http://www.w3.org/TR/REC-html40/">

<head>
<base href="http://www.usavon.fr/">



<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<link rel=File-List href="index_fichiers/filelist.xml">

<title>Accueil</title>
<style>
    html, body {
        margin: 0;
        padding: 0;
        text-align: center;
        background-attachment : fixed;
        }
    #conteneur {
        position: relative;
        margin: 0 auto;
        width: 760px;
        text-align: left;
        }
 /* Définitions de la police */
@font-face
	{font-family:Arial;
	panose-1:2 11 6 4 2 2 2 2 2 4;}
@font-face
	{font-family:"Times New Roman";
	panose-1:2 2 6 3 5 4 5 2 3 4;}
 /* Définitions du style */
p.MsoNormal, li.MsoNormal, div.MsoNormal
	{text-indent:0pt;
	margin-left:0pt;
	margin-right:0pt;
	margin-top:0pt;
	margin-bottom:0pt;
	text-align:left;
	font-family:"Times New Roman";
	font-size:10.0pt;
	color:black;}
p.MsoBodyText3, li.MsoBodyText3, div.MsoBodyText3
	{text-indent:0pt;
	margin-left:0pt;
	margin-right:0pt;
	margin-top:0pt;
	margin-bottom:9.0pt;
	text-align:left;
	font-family:"Times New Roman";
	font-size:12.0pt;
	color:black;}
p.MsoTitle3, li.MsoTitle3, div.MsoTitle3
	{text-indent:0pt;
	margin-left:0pt;
	margin-right:0pt;
	margin-top:0pt;
	margin-bottom:0pt;
	text-align:left;
	font-family:Impact;
	font-size:28.0pt;
	color:black;
	font-style:italic;}
p.MsoAddress, li.MsoAddress, div.MsoAddress
	{text-indent:0pt;
	margin-left:0pt;
	margin-right:0pt;
	margin-top:0pt;
	margin-bottom:0pt;
	text-align:left;
	font-family:"Times New Roman";
	font-size:10.0pt;
	color:black;}
p.MsoAccentText, li.MsoAccentText, div.MsoAccentText
	{text-indent:0pt;
	margin-left:0pt;
	margin-right:0pt;
	margin-top:0pt;
	margin-bottom:0pt;
	text-align:left;
	font-family:Arial;
	font-size:10.0pt;
	color:black;
	font-weight:bold;}
ol
	{margin-top:0in;
	margin-bottom:0in;
	margin-left:.25in;}
ul
	{margin-top:0in;
	margin-bottom:0in;
	margin-left:.25in;}
@page
	{size:8.2673in 11.6923in;}

</style>

</head>

<body link="#990033" vlink=black bgcolor=white
background="index_fichiers/image307.gif">

<div id="conteneur">
<div style='position:absolute;width:7.9319in;height:7.8069in'>
<![if !vml]><span style='position:absolute;
z-index:3;left:192px;top:736px;width:558px;height:9px'><img width=558 height=9
src="index_fichiers/image316.gif" v:shapes="_x0000_s1038 _x0000_s1039 _x0000_s1040"></span><![endif]><![if !vml]><span style='position:absolute;
z-index:4;left:1px;top:1px;width:758px;height:14px'><img width=758 height=14
src="index_fichiers/image321.gif" v:shapes="_x0000_s1041 _x0000_s1042 _x0000_s1043"></span><![endif]><![if !vml]><span style='position:absolute;z-index:5;
left:-1px;top:112px;width:761px;height:3px'><img width=761 height=3
src="index_fichiers/image324.gif" v:shapes="_x0000_s1044"></span><![endif]><![if !vml]><span style='position:absolute;
z-index:6;left:7px;top:125px;width:174px;height:72px'><map
name=MicrosoftOfficeMap0><area shape=Rect
coords="3, 37, 171, 70" href="index_fichiers/Page2387.htm"></map><img border=0
width=174 height=72 src="index_fichiers/image325.gif"
usemap="#MicrosoftOfficeMap0" v:shapes="_x0000_s1045 _x0000_s1047 _x0000_s1048 _x0000_s1049 _x0000_s1050 _x0000_s1051 _x0000_s1052"></span><![endif]><![if !vml]><span style='position:absolute;z-index:7;
left:192px;top:128px;width:557px;height:86px'>

<table cellpadding=0 cellspacing=0>
 <tr>
  <td width=557 height=86 style='vertical-align:top'><![endif]>
  <div v:shape="_x0000_s1053" style='padding:2.85pt 2.85pt 2.85pt 2.85pt'
  class=shape>
  <p class=MsoTitle3><span style='font-family:Arial;color:#990033;font-style:
  normal;font-weight:bold;language:FR'>Accueil </span></p>
  </div>
  <![if !vml]></td>
 </tr>
</table>

</span><![endif]><![if !vml]><span style='position:absolute;z-index:8;
left:193px;top:214px;width:552px;height:535px'>

<table cellpadding=0 cellspacing=0>
 <tr>
  <td width=552 height=535 style='vertical-align:top'><![endif]>
  <div v:shape="_x0000_s1054" style='padding:2.85pt 2.85pt 2.85pt 2.85pt'
  class=shape>
  <p class=MsoBodyText3><span style='font-family:Arial;language:FR'>L’Union Sportive Avonnaise a été créée en 1969.</span></p>
  <p class=MsoBodyText3><span style='font-family:Arial;language:FR'>Siège social : Hôtel de Ville 77210 AVON</span></p>
  <p class=MsoNormal style='text-align:center;text-align:center'><span
  style='font-size:12.0pt;font-family:Arial;language:FR'><a
  href="file:///C:\Documents%20and%20Settings\vero\Mes%20documents\ORGANIGRAMME.doc">Organigramme</a></span></p>
  <p class=MsoBodyText3><span style='font-family:Arial;language:FR'><![if !supportEmptyParas]>&nbsp;<![endif]></span></p>
  <p class=MsoBodyText3><span style='font-family:Arial;language:FR'>Nous vous souhaitons la bienvenue sur notre site qui vous permettra de découvrir le fonctionnement de notre association ainsi que les différents sports la composant.</span></p>
  <p class=MsoBodyText3><span style='font-family:Arial;language:FR'><![if !supportEmptyParas]>&nbsp;<![endif]></span></p>
  <p class=MsoBodyText3><span style='font-family:Arial;language:FR'>Nous vous donnons rendez-vous dans la «&nbsp;</span><span
  style='font-family:Arial;language:FR'><a href="index_fichiers/Page2387.htm">liste des sports</a></span><span
  style='font-family:Arial;language:FR'>&nbsp;» pour y découvrir nos disciplines.</span></p>
  <p class=MsoBodyText3><span style='font-family:Arial;language:FR'><![if !supportEmptyParas]>&nbsp;<![endif]></span></p>
  <p class=MsoBodyText3><span style='font-family:Arial;language:FR'>Nous vous souhaitons une agréable visite.</span></p>
  <p class=MsoBodyText3><span style='language:FR'><![if !supportEmptyParas]>&nbsp;<![endif]></span></p>
  <p class=MsoNormal><span style='language:FR'><![if !supportEmptyParas]>&nbsp;<![endif]></span></p>
  <p class=MsoNormal><span style='language:FR'><![if !supportEmptyParas]>&nbsp;<![endif]></span></p>
  </div>
  <![if !vml]></td>
 </tr>
</table>

</span><![endif]><![if !vml]><span style='position:absolute;z-index:9;
left:192px;top:584px;width:275px;height:124px'>

<table cellpadding=0 cellspacing=0>
 <tr>
  <td width=275 height=124 style='vertical-align:top'><![endif]>
  <div v:shape="_x0000_s1055" style='padding:2.85pt 2.85pt 2.85pt 2.85pt'
  class=shape>
  <p class=MsoAddress><span style='font-size:12.0pt;font-family:Arial;
  language:FR'>Union Sportive Avonnaise</span></p>
  <p class=MsoAddress><span style='font-size:12.0pt;font-family:Arial;
  language:FR'>15 allée des perce-neige</span></p>
  <p class=MsoAddress><span style='font-size:12.0pt;font-family:Arial;
  language:FR'>77210 AVON</span></p>
  <p class=MsoAddress><span style='font-size:12.0pt;font-family:Arial;
  language:FR'><![if !supportEmptyParas]>&nbsp;<![endif]></span></p>
  <p class=MsoAddress><span style='font-size:12.0pt;font-family:Arial;
  language:FR'>Téléphone&nbsp;: 01 60 72 06 52</span></p>
  <p class=MsoAddress><span style='font-size:12.0pt;font-family:Arial;
  language:FR'>Messagerie&nbsp;: u.s.avon@wanadoo.fr</span></p>
  </div>
  <![if !vml]></td>
 </tr>
</table>

</span><![endif]><![if !vml]><span style='position:absolute;z-index:10;
left:192px;top:552px;width:275px;height:37px'>

<table cellpadding=0 cellspacing=0>
 <tr>
  <td width=275 height=37 valign=bottom style='vertical-align:top'><![endif]>
  <div v:shape="_x0000_s1056" style='padding:9.15pt 2.85pt 2.85pt 2.85pt'
  class=shape>
  <p class=MsoAccentText><span style='font-size:12.0pt;font-family:Arial;
  language:FR'>Pour nous contacter&nbsp;:</span></p>
  </div>
  <![if !vml]></td>
 </tr>
</table>

</span><![endif]><![if !vml]><span style='position:absolute;z-index:11;
left:191px;top:551px;width:560px;height:2px'><img width=560 height=2
src="index_fichiers/image348.gif" v:shapes="_x0000_s1057"></span><![endif]><![if !vml]><span style='position:absolute;z-index:12;
left:463px;top:551px;width:2px;height:178px'><img width=2 height=178
src="index_fichiers/image349.gif" v:shapes="_x0000_s1058"></span><![endif]><![if !vml]><span style='position:absolute;z-index:13;
left:191px;top:212px;width:561px;height:3px'><img width=561 height=3
src="index_fichiers/image350.gif" v:shapes="_x0000_s1059"></span><![endif]><![if !vml]><span style='position:absolute;z-index:189;
left:135px;top:39px;width:535px;height:64px'><img width=535 height=64
src="index_fichiers/image460.gif" alt="Union Sportive Avonnaise&#13;" v:shapes="_x0000_s1422"></span><![endif]>
</div>
</div>

</body>

</html>
(218 lignes -   8 618 octets au lieu de
 604 lignes - 29 437 octets)

Je me demande comment Publisher affiche ça ?
Chez moi, ça ne change rien. L'aspect est le même.
je viens d'essayé avec votre HTML mais ca donne pas le meme effet sous IE il me manque le titre "union sportive avonnaise" les liens "accueil" et "liste des sports".

je suis pas un adepte du publisher mais il s'agit d'un travail fait pas des étudiants que je dois mettre en ligne. pour ma part j'utilise plus notepad mais j'arrive pas a convertir le site en HTML compréhensible!
Messages postés
2884
Date d'inscription
dimanche 30 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
813
Hum...
La réponse à ta question était dans la FAQ : webmaster adapter un site a toutes les resolutions le centrer
Quand à publisher... webmaster choisir un bon editeur les editeurs a eviter
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 335
SALUT

il est impossible de convertir correctement un code publisher !!

ou alors il faudrais deja savoir a quoi corresponde les codes incomprehensibles de publisher , et la on frise

l archeologie et la traduction des hieroglyphes !!!

peut etre si tu connais quelqu un du "Chiffre" au ministere de la defense ? !;-)

bon courage!

RAD
J'ai bien essayé de mettre Width : 100% à la place de 760 mais évidément cela ne fonctionne pas! :(
je viens de refaire un petit changement et ca a l'air de marcher le site à l'air centré sous IE. www.usavon.fr et chez vous?
Ok pour IE6 et Firefox ;-)
Y a encore les images qui paraissent un peu lourdes pour leur taille (sans vouloir être exigent).
salut j'ai le meme probleme que tu as rencontre je ne sui spas capacle de centre mon site web dans publisher s.v.p. medire comment faire

Merci !
Messages postés
9
Date d'inscription
dimanche 2 décembre 2007
Statut
Membre
Dernière intervention
10 décembre 2009
25
Ah j'ai besoin de vous cette fois-ci..

J'ai réalisé un site (www.maxitrad.com) sous Nvu, le souci était que j'avais commencé par créer mes tableaux sous MS Word.. eh oui je sais...

Le site est quasiment fini mais j'ai un réel problème d'affichage des pages ! Pour faire suite à l'article, mes pages ne se centrent pas et restent à gauche.

Quand j'insère "margin-left: auto" ou "margin rigt: auto" ça ne prend pas non plus.

Dois-je insérer le tout dans un tableau centré "align:center" ?

Merci de votre aide précieuse.
Bonjour,

J'ai un problème aussi au niveau du centrage de mon site que j'ai créé.
j'ai utilisé le logiciel publisher, j'ai trouvé un hébergeur.

Je me rend compte qu'il n'y a pas de bande "vide" sur les cotés de l'écran comme sur de nombreux site comme celui ci (les bandes grises). Mon site prend l'ensemble de l'écran.

J'ai lu un peu plus haut dans la discussion qu'il y avait une manipalution à faire: CSS
J'ai vu que c'était du language HTML mais je ne vois pas ou le mettre... étant donné que Publisher affiche du texte.
En clair comment mettre des bandes vides sur les cotés???

Merci de m'aider ;)
Salut,

Je ne sais pas si tu as trouvé la réponse au centrage des pages faites sous Publisher ?

J'utilise Publisher depuis plusieurs années pour m'aider à faire des pages web rapidement, je sais il y a plein de codes inutiles et c'est mal foutu, mais en travaillant un peu il y a de bons résultats qui aboutissent...

http://www.lecafe.mii-1.com
http://www.hellokitty.mii-1.com

Voilà le code que j'insère et qui centre très bien la page sous IE et Firefox

Après la première ligne de
<style>
<!--

..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 firefox + les autres */
padding : 0;
text-align : left;
width : 1008px; /* met la valeur de largeur inscrite dans page setup
}


..ensuite entre le block : <body link=. . . . . . .
..et <div style=. . . . . . . . . .
..ajoute :

<div id="conteneur">


Ça fonctionne très bien pour moi.

Bon courage !!!
Michel