Sujet Précédent Sujet Suivant

Centrer un site ou l'adapter au visiteur

Résolu/Fermé
totone - 29 juil. 2007 à 03:23
 Michel - 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
A voir également:

13 réponses

Réponse 1 / 13
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
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 ?)
0
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
0
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.
0
Réponse 2 / 13
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
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.
0
Réponse 3 / 13
king
29 juil. 2007 à 09:33
Pour info, sous IE, le contenu reste à gauche ;-)
0
Réponse 4 / 13
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
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"
…

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
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.
0
Réponse 6 / 13
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!
0
Réponse 7 / 13
Ssylvainsab Messages postés 2884 Date d'inscription samedi 29 juillet 2006 Statut Modérateur Dernière intervention 15 août 2020 825
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
0
Réponse 8 / 13
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
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
0
Réponse 9 / 13
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! :(
0
Réponse 10 / 13
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?
0
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).
0
Réponse 11 / 13
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 !
0
Réponse 12 / 13
slimee Messages postés 9 Date d'inscription dimanche 2 décembre 2007 Statut Membre Dernière intervention 10 décembre 2009 25
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.
0
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 ;)
0
Réponse 13 / 13
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
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Coco chat connexion sur mobile, le tchat est fermé ?
Pisceneo -
brucine -

24 réponses
SITES MARCHANDS NON SECURISES
mcd54 -
mcd54 -

2 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses