centrer la page d'un site

centrer la page d'un site - Web design - Graphisme

Marsh Posté le 03-10-2003 à 02:03:08    

bhen je m'y met et j'y connais pas grand chose  :D  
 
je me posais la question suivante,
comment faire pour centrer un site ?
 
exemple : www.google.fr (n'importe la taille de la fenetre, le site est toujours au milieu)
 
merci  :jap:
 
ps: j'ai dreamweaver


Message édité par _lapin_ le 03-10-2003 à 02:03:37
Reply

Marsh Posté le 03-10-2003 à 02:03:08   

Reply

Marsh Posté le 03-10-2003 à 05:45:08    

Une solution simple consiste à placer le tout dans un tableau. Mais les puristes te diront que c'est une hérésie programmatique :D

Reply

Marsh Posté le 03-10-2003 à 09:33:11    

Dans ton HTML, tu mets tout dans un <div> de taille fixe.
Dans ta CSS :  
 width:646px; >>> taille fixe de ton <div>
 position:absolute;
 left: 50%;
 margin-left: -323px; >>> taille fixe de ton <div> / 2

Reply

Marsh Posté le 03-10-2003 à 09:50:50    

pour le HTML tant ton table tu mets align="center"


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 03-10-2003 à 10:49:47    

juste pour expliquer pourquoi le truc de fastclemmy marche (c'est + bôôôôôôô qu'un tableau :D)
 
left:50%
ca va positionner la gauche du tableau pile-poil au milieu de la page.
 
ensuite, avec le
margin-left: -323px
ca va décaler la marge gauche de 323px vers la gauche. Comme c'est la moitié de la taille du div, ca va donc amener le milieu du div au niveau de l'ancienne marge (qui était au milieu de la page grâce au 50%...)
 
si je dis tout ça, c'est pour expliquer qu'on peut utiliser cette méthode pour pleins d'autres trucs en modifiant les valeurs... en gros, le margin-left peut être utilisé pour un positionnement relatif du div par rapport a la valeur left.

Reply

Marsh Posté le 03-10-2003 à 11:01:21    

SenG@ a écrit :

juste pour expliquer pourquoi le truc de fastclemmy marche (c'est + bôôôôôôô qu'un tableau :D)
 
left:50%
ca va positionner la gauche du tableau pile-poil au milieu de la page.
 
ensuite, avec le
margin-left: -323px
ca va décaler la marge gauche de 323px vers la gauche. Comme c'est la moitié de la taille du div, ca va donc amener le milieu du div au niveau de l'ancienne marge (qui était au milieu de la page grâce au 50%...)
 
si je dis tout ça, c'est pour expliquer qu'on peut utiliser cette méthode pour pleins d'autres trucs en modifiant les valeurs... en gros, le margin-left peut être utilisé pour un positionnement relatif du div par rapport a la valeur left.


 

Citation :

merci professeur, on va a la pub et on reviens avec votre nouvel album

 :D


---------------
"Welcome to the soldier side, where there's no one here but me...."
Reply

Marsh Posté le 03-10-2003 à 12:46:45    

mattc a écrit :


 

Citation :

merci professeur, on va a la pub et on reviens avec votre nouvel album

 :D  


 
rigoles, rigoles, ... mais je suis sûr que ça peut servir :o

Reply

Marsh Posté le 03-10-2003 à 13:49:45    

SenG@ a écrit :


 
rigoles, rigoles, ... mais je suis sûr que ça peut servir :o


 
mais gt tres serieux, je suis sur que ton expliquation va servir !
je ne faisait que citer un passage des 2 minutes du peuples bine connu.
 
si je voulais me moquer j'aurait fait :

Citation :

c'etait vraiment tres interressant!


---------------
"Welcome to the soldier side, where there's no one here but me...."
Reply

Marsh Posté le 04-10-2003 à 13:33:19    

yes merci fastclemmy et seng@ pour l'explication :D
 
je vais essayer

Reply

Marsh Posté le 04-10-2003 à 16:13:06    

Est-ce que les marges négatives ne créent pas de bug avec certains navigateurs ? :??:
 
(Question innocente : pas frapper :sweat: )

Message cité 1 fois
Reply

Marsh Posté le 04-10-2003 à 16:13:06   

Reply

Marsh Posté le 04-10-2003 à 17:52:51    

il suffit de mettre : "margin-left:auto; margin-right : auto" et ça marche sans marges négatives :)


Message édité par Gnub le 04-10-2003 à 17:53:27
Reply

Marsh Posté le 04-10-2003 à 22:10:00    

En tout cas, on sait ce qu'il faut demander au père Noël cet hiver :
un bon "float: center;" ou un "align: center;" dans les
C(hau)SS(ettes). :D
 
edit: piaf...


Message édité par tchanpow le 05-10-2003 à 08:24:20
Reply

Marsh Posté le 05-10-2003 à 21:37:15    

"il suffit de mettre : "margin-left:auto; margin-right : auto" et ça marche sans marges négatives"
>>> ça marche en effet, mais que sur les navigateurs qui respectent les standards, donc pas sur IE :(
 
La meilleure solution Valide est celle de Fastclemmy.
Voici quelques explications ici : http://www.alsacreations.com/articles/centrer/


Message édité par sibelius le 05-10-2003 à 21:38:40

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 29-01-2004 à 15:36:02    

je vais faire autrement
 
voila le code tel qu'indiqué sur le tuto alsacreation
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML><HEAD>
  3. <META http-equiv=Content-Type content="text/html; charset=windows-1252">
  4. <STYLE type=text/css>body {
  5.      margin: 0; /* pour éviter les marges */
  6.      text-align: center;
  7.      }
  8. .conteneur {
  9.      margin-left: auto;
  10.      margin-right: auto;
  11.      text-align: left; /* on rétablit l'alignement normal du texte */
  12.      }
  13. </STYLE>
  14. <META content="MSHTML 6.00.2800.1106" name=GENERATOR>
  15. <script language="JavaScript" type="text/JavaScript">
  16. <!--
  17. function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  18.   if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
  19.     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  20.   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  21. }
  22. MM_reloadPage(true);
  23. //-->
  24. </script>
  25. </HEAD>
  26. <BODY>
  28. <DIV class=conteneur></div></DIV></BODY></HTML>


 
jusque là je pense avoir bon,
ensuite ils disent:

Citation :

Il suffit ensuite de placer le reste du site dans conteneur.et votre site sera centré proprement.


 
mais ca je comprends pas, si je créer un div en mode graphique, faut le copier coller dans le conteneur ?  
 
merci
 

Reply

Marsh Posté le 29-01-2004 à 15:54:14    

d'ailleurs mossieu Fast et les autres, j'avais posé la question sur mon topic à ce sujet, à savoir que ceci ne fonctionne apparemment pas sous Firebird. :/

Reply

Marsh Posté le 29-01-2004 à 15:55:15    

Mad666 a écrit :

d'ailleurs mossieu Fast et les autres, j'avais posé la question sur mon topic à ce sujet, à savoir que ceci ne fonctionne apparemment pas sous Firebird. :/


 
 :heink:

Reply

Marsh Posté le 29-01-2004 à 16:00:57    

Reply

Marsh Posté le 23-02-2006 à 22:28:23    

tchanpow a écrit :

Est-ce que les marges négatives ne créent pas de bug avec certains navigateurs ? :??:
 
(Question innocente : pas frapper :sweat: )


 
Siiiiii  
Pour tester réduire la fenêtre du navigateur jusqu'a ce que la taille du site soit plus grande que celle de la fenêtre (donc normalement apparition d'ascenceur) ... mais là vu que les marges sont négatives bah ils n'apparaissent pas :D

Reply

Marsh Posté le 21-07-2008 à 21:56:30    

<body>
<div align="center">Ton site</div>
</body>
 
Cordialement C-bolo


Message édité par cbolo le 21-07-2008 à 21:57:50
Reply

Marsh Posté le 21-07-2008 à 22:09:37    

alors ça c'est ce qu'on appelle un sacré déterrage ! Tu as dû aller le chercher loin cbolo :P
Mais à mon avis, depuis le 03-10-2003 à 02:03:08, ils ont dû trouver leur réponse ;)


---------------
Blog Musical Spleen-esque - Galerie d'Inspiration Webdesign - Jeux Gratuits en Flash
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed