Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1833 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Centrer verticalement une page xhtml(margin auto = just horizontale ?)

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Centrer verticalement une page xhtml(margin auto = just horizontale ?)

n°883365
luxylux
Posté le 30-09-2006 à 15:31:17  profilanswer
 

Salut à tous
 
Mon soucis est le suivant, je réalise des sites pour le 1204 ou plus et mes pages sont bien centrées mais en  
1200 et plus mes pages ne sont centrées que de gauche à droite verticalement elle est collée en haut
 
pour centré mes sites j'utilise simplement margin: auto; dans le bloc conteneur principale de mon site en position relative mais ce centrage semble ne correspondre que horizontalement.
 
Merci


Message édité par luxylux le 30-09-2006 à 15:50:42
mood
Publicité
Posté le 30-09-2006 à 15:31:17  profilanswer
 

n°883366
Profil sup​primé
Posté le 30-09-2006 à 16:00:30  answer
 

Citation de moi sur un autre topic :
 

Citation :

 


Dans ton CSS tu met en "position:absolute" avec "top:50%" et en plus
" margin-bottom:-"hauteur du truc à centrer"px ".
On peut faire le même
en largeur avec left:50% avec un margin-right:-"largeur de la page"px. En
faite tu place le bord du haut au milieu de la page (avec tous
navigateurs et toutes résolutions) et tu décale vers le haut de la
moitié de la hauteur de l'élément à centrer grâce à une bordure
négative. C'est interessant pour un flash d'intro à centrer sur une
page par exemple.
 


Voila !

Message cité 1 fois
Message édité par Profil supprimé le 30-09-2006 à 17:07:23
n°883367
luxylux
Posté le 30-09-2006 à 16:36:53  profilanswer
 


 
 
Ca marche pas, pourtant je crois avoir bien compris.  
 
Etant un site commercial je peux pas le mettre en lien au risque de me faire jetter pour spam
 
en gros dans mon css j'ai fait un bloc conteneur de tout le site comme ceci  
 

Code :
  1. #mainframe {
  2. WIDTH: 980px;
  3. position: relative;
  4. margin: auto;
  5. #header .....
  6. #mainzone .....
  7. #bottom ...


 
Les header mainzone et bottom sont à l'intérieur du mainframe mais quand je place ton
position : absolute;
top :50%;
border-bottom: - valeurpx; de la moitié de la hauteur de la page a centrer verticalement il me la met en bas sur la gauche
 
merci


Message édité par luxylux le 30-09-2006 à 16:37:53
n°883369
Profil sup​primé
Posté le 30-09-2006 à 16:44:11  answer
 

Si l'id mainframe est ton conteneur total et que tu veut le centrer horizontalement et verticalement, voici la marche a suivre (avec A la moitié de la heuteur de ta page et B la moitié de la largeur):

 

#mainframe {
width:980px;
position:absolute;
top:50%;
margin-top:-Apx;
left:50%;
margin-left:-Bpx;
}

 

En espérant que ça t'aidera...  :)

 

PS: en écrivant je me suis rendu compte que je t'avais dit border-bottom au lieu de border-top et la même choze horizontalement :s.

 

edit:erreurs dans le code réglées ;)

Message cité 2 fois
Message édité par Profil supprimé le 30-09-2006 à 17:06:19
n°883379
luxylux
Posté le 30-09-2006 à 17:49:44  profilanswer
 


 
Heyyy Mackxs Je te remercie 1000 fois mon ami pour ton aide ca fonctionne ;)
 
a+++


Message édité par luxylux le 30-09-2006 à 17:50:08
n°883388
Profil sup​primé
Posté le 30-09-2006 à 18:32:14  answer
 

De rien l'ami ! ;)
 
(sit tu pouvais me filer l'adresse du site en question par mp ça serait sympa  :) )

n°883567
gatsu35
Blablaté par Harko
Posté le 01-10-2006 à 16:12:09  profilanswer
 

le centrage vertical et horizontal s'opère d'une manière simple :  
c'est presque comme l'a spécifié mackxs mais à un détail près :  
 
 
#monbloccentred {
   width:980px;
   height:500px; /* ou bien on connait sa hauteur */
   position:absolute;
   top:50%;
   margin-top:-490px; /*La moitié de la hauteur du bloc */
   left:50%;
   margin-left:-250px; /*la moitié de la largeur */
}

n°883584
Profil sup​primé
Posté le 01-10-2006 à 17:07:28  answer
 

gatsu35 a écrit :

le centrage vertical et horizontal s'opère d'une manière simple :
c'est presque comme l'a spécifié mackxs mais à un détail près :

 


#monbloccentred {
   width:980px;
   height:500px; /* ou bien on connait sa hauteur */
   position:absolute;
   top:50%;
   margin-top:-490px; /*La moitié de la hauteur du bloc */
   left:50%;
   margin-left:-250px; /*la moitié de la largeur */
}

 


 

C'est pas un peu ce que j'ai dit toussa ??  :o  

 

Bon à part que j'ai oublié de spécifier la hauteur... En plus, tu as fait une erreur, tu as inversé la hauteur et la largeur   :kaola:


Message édité par Profil supprimé le 01-10-2006 à 17:07:52
n°883589
gatsu35
Blablaté par Harko
Posté le 01-10-2006 à 17:47:23  profilanswer
 

Ah oui pardon j'avais mal lu :o

n°883600
Profil sup​primé
Posté le 01-10-2006 à 18:51:55  answer
 

gatsu35 a écrit :

Ah oui pardon j'avais mal lu  :o


 ;)   :)

mood
Publicité
Posté le 01-10-2006 à 18:51:55  profilanswer
 

n°1162978
lunnatick
Posté le 13-12-2013 à 08:24:17  profilanswer
 


 
 
Bonjour, moi cette solution me place mon dive en bas a droite


---------------
http://www.lunnatick.fr/
n°1163004
athenaa
Posté le 15-12-2013 à 16:57:43  profilanswer
 

montre nous ton site ou ton code, plus facile pour aider :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Centrer verticalement une page xhtml(margin auto = just horizontale ?)

 

Sujets relatifs
Les regles de la mise en page??Avis sur page d'accueil
maj auto images boutons flashvistaprint page et feuille
[LEGAL?] Page de demmarage Google ?Page flash en index
[galerie] pioh's..up line 29/10/08Optimisation d'une page
Graphisme Toshop à insérer dans une page HTMLIndesign, gabarit de page en reliure sur le haut?
Plus de sujets relatifs à : Centrer verticalement une page xhtml(margin auto = just horizontale ?)


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR