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

totone - Dernière réponse le 31 mars 2011 à 00:28

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

Centrer un site ou l'adapter au visiteur »

Suggestions

Centrer un site ou l'adapter au visiteur
Site adapté à l'écran (Résolu) » Forum
Centrer verticalement une animation flash (Résolu) » Forum
CSS: centrer site sous Explorer (margin:auto (Résolu) » Forum
Site WEB adapté à la résolution d'écran ! (Résolu) » Forum
Centrer mon site flash avec dreamweaver (Résolu) » Forum

Plus

Réponse

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 29 juil. 2007 à 04:09

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 ?)

Ajouter un commentaire

totone - 29 juil. 2007 à 04:20

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

totone - 29 juil. 2007 à 04:36

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.

Réponse

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 29 juil. 2007 à 05:11

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.

Ajouter un commentaire

Réponse

king 29 juil. 2007 à 09:33

Pour info, sous IE, le contenu reste à gauche ;-)

Ajouter un commentaire

Réponse

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 29 juil. 2007 à 13:54

É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"
…

Ajouter un commentaire

Réponse

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 29 juil. 2007 à 14:07

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.

Ajouter un commentaire

Réponse

totone 29 juil. 2007 à 20:11

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!

Ajouter un commentaire

Réponse

Ssylvainsab 2869Messages postés 30 juillet 2006Date d'inscription 30 septembre 2010Dernière intervention 29 juil. 2007 à 20:18

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

Ajouter un commentaire

Réponse

RAD ZONE 4790Messages postés 20 janvier 2007Date d'inscription 23 mai 2012Dernière intervention 29 juil. 2007 à 20:27

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

Ajouter un commentaire - Site web

Réponse

totone 29 juil. 2007 à 20:40

J'ai bien essayé de mettre Width : 100% à la place de 760 mais évidément cela ne fonctionne pas! :(

Ajouter un commentaire

Réponse

totone 29 juil. 2007 à 20:50

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?

Ajouter un commentaire

king - 30 juil. 2007 à 14:16

Ok pour IE6 et Firefox ;-)
Y a encore les images qui paraissent un peu lourdes pour leur taille (sans vouloir être exigent).

Réponse

niala 11 juin 2008 à 21:59

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 !

Ajouter un commentaire

Réponse

slimee 8Messages postés 2 décembre 2007Date d'inscription 3 mars 2009 à 10:36

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.

Ajouter un commentaire

Flo - 8 mai 2009 à 13:25

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 ;)

Réponse

Michel 31 mars 2011 à 00:28

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

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

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

Centrer un site ou l'adapter au visiteur »

Passage au tout numérique : quel coût pour les particuliers ?