centrer en CSS - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  centrer en CSS

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: centrer en CSS (Lu 1224 fois)

centrer en CSS
« sur: le 26-04-2005 a 12:06:48 »

arnaudb
Membre récent

Hors-Ligne

Messages: 59

Je suis un lama!

Bonjour,

J'ai fais cette feuille de style pour la mise en forme de mon site et j'aimerais savoir comment centrer mon site sur la page?

body {
      color: #000000;
      background-image: url ("../images/background.jpg");
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      margin-top: 05px;
      margin-bottom: 05px;
      }

#header {
      position: absolute;
      width: 980px;
      height: 185px;
      margin-left: auto;
      margin-top: auto;
     background-image: url(../images/header.jpg);
     background-repeat: no-repeat;
      }

#menuhaut {
      position: absolute;
      background-image: url(../images/menuhaut.gif);
      background-repeat:no-repeat;
      width: 979px;
      height: 20px;
      margin-left: auto;
      margin-top: 186px;
      border: 01px solid #000000;
      }

#skyscrapper {
      color: #000000;
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      position: absolute;
      background-color: #FFFFFF;
      border: 01px solid #000000;
      width: 120px;
      height: 612px;
      margin-top: 212px;
      margin-left: 858px;
      }

#menugauche {
      position: absolute;
      background-color: #FFFFFF;
      border: 01px solid #000000;
      width: 130px;
      height: 612px;
      margin-top: 212px;
      margin-left: auto;
      }

#googleads {
      position: absolute;
      background-color: #FFFFFF;
      border: 01px solid #000000;
      width: 715px;
      height: 90px;
      margin-top: 212px;
      margin-left: 136px;
      }

#contenu {
      position: absolute;
      background-color: #FFFFFF;
      border: 01px solid #000000;
      width: 715px;
      height: 515px;
      margin-top: 309px;
      margin-left: 136px;
      }

#footer {
      position: absolute;
      background-color: #FFFFFF;
      background-image: url(../images/footer.gif);
      background-repeat: no-repeat;
      width: 980px;
      height: 30px;
      margin-top: 830px;
      margin-left: auto;
      border: 01px solid #000000;
      }

INPUT {
      color: #004F77;
      border-width: 1px;
      border-color: #000000;
      background-color: #F6F6F6;
      font-size: 12px;
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
      }

SELECT {
      color: #004F77;
      border-width: 1px;
      border-color: #000000;
      background-color: #F6F6F6;
      font-size: 12px;
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
      }

Merci.

Arnaud

« Dernière Édition: le 26-04-2005 a 12:07:32 par arnaudb »

Rapporter au modérateur

Re:centrer en CSS
« Répondre #1 sur: le 26-04-2005 a 17:48:12 »

dhjapan
Membre récent

Hors-Ligne

Messages: 29

Je suis un lama!

come je vois que personne n'a l'air de repondre j'vais m'essayer :

je mettrai :

html,body{width:100%;height:100%;text-align:center;vartical-align:middle;}

je crois que c'est la bonne syntaxe.
bonne chance

Rapporter au modérateur

Re:centrer en CSS
« Répondre #2 sur: le 26-04-2005 a 17:57:29 »

arnaudb
Membre récent

Hors-Ligne

Messages: 59

Je suis un lama!

J'ai esayer mais cela me deplace la page vers la droite ?

Rapporter au modérateur

Re:centrer en CSS
« Répondre #3 sur: le 26-04-2005 a 18:25:16 »

dhjapan
Membre récent

Hors-Ligne

Messages: 29

Je suis un lama!

oui pour body,html il faut rajouter margin:0px;
.. et change 100% par 99% pour pas te retrouver avec une riducule bar de scroll sous firefox..

ca donne :

body,html {width:100%;height:99%;margin: 0px;}
div#centrezmoi{ text-align:center;border: solid 1px #FF0000;height:100%;vertical-align:center;}

... mais vertical-align marche pas...

si le contenu de ton site à une taille fix tu peux essayer ca :
http://www.cyberformateur.com/cours_css/exemples/centrage_image.htm

si quelqu'un à une idée pour centrer un objet de taille variable verticalement dans une page, je prends

merci

Rapporter au modérateur

Re:centrer en CSS
« Répondre #4 sur: le 26-04-2005 a 19:07:28 »

arnaudb
Membre récent

Hors-Ligne

Messages: 59

Je suis un lama!

Bon ben cela ne fonctionne toujours pas

Rapporter au modérateur

Re:centrer en CSS
« Répondre #5 sur: le 26-04-2005 a 19:45:18 »

jb_gfx
Superactif

Hors-Ligne

Sexe: Male

Messages: 562

pour centrer un bloc horizontalement sur les navigateurs récents ET IE5 Mac et Windows :

Code:

body {
margin:0; /* supprime les marges */
padding: 0; /* supprime les marges intérieures */
text-align: center; /* centrer horizontalement sous IE 5 */
}

#centre {
margin: auto; /* centre horizontalement sur les navigateurs conformes CSS */
text-align: left; /* rétablie l'alignement du texte (voir body) */
width: 700px; /* définir la largeur, obligatoire pour centrer le bloc */
}

Et c'est tout!

Pour centrer horizontalement ET verticallement tu devra plutot utiliser du javascript ou les marges négatives (cela ne fonctionne pas correctement sous IE5 mac).

Voir tuto ici :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

PS: vertical-align fonctionne trés bien, c'est juste qu'il sert à aligner le TEXTE verticallement par rapport à la hauteur de LIGNE. Ce n'est pas du tout déstiné à centrer un bloc verticallement.

« Dernière Édition: le 26-04-2005 a 19:47:21 par jb_gfx »

Rapporter au modérateur

http://www.pixemedia.com

Re:centrer en CSS
« Répondre #6 sur: le 26-04-2005 a 20:06:42 »

arnaudb
Membre récent

Hors-Ligne

Messages: 59

Je suis un lama!

OK,

j'ai regardé le lien et j'ai donc rajouté position:relative;
comme j'ai des élements positionnés et cela marche très bien

Code:
body {
      color: #000000;
      background-image: url("../images/background.jpg");
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      margin:0;
      padding: 0;
      text-align: center;
      }

Code:
#pagetotal {
      position: relative;
   margin-left: auto;
   margin-right: auto;
   width: 960px;
   text-align: left;
      background-color: #FFFFFF;
      }

Rapporter au modérateur

Re:centrer en CSS
« Répondre #7 sur: le 03-05-2005 a 12:26:49 »

Madrileño
Paella Deluxe
Guru

Hors-Ligne

Sexe: Male

Messages: 3748

Le Savoir Appartient à l' Humanité

Merci jb_gfx je cherchais ce lien sur Alsa
Sinon vous avez d'autres sites (j'en profite) pour le css ?

Rapporter au modérateur

Vous souhaitez savoir comment :
Améliorer votre site Internet ou boutique ecommerce ?
Le fonctionnement du référencement naturel ?.
Vous pouvez visiter le site indiqué avec mon avatar..

Re:centrer en CSS
« Répondre #8 sur: le 03-05-2005 a 13:04:09 »

_Mikl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 69

Chambre 237

http://www.csszengarden.com/tr/francais/
http://www.openweb.eu.org/articles/initiation_css/
http://www.ifrance.com/maxpgratuit/web/css/index.html
http://mammouthland.free.fr/cours/css/index.php
http://www.trucsweb.com/Sites/sites.asp?type=12&sujet=1
http://perso.wanadoo.fr/arsene.perez-mas/html/css/sommaire_css.htm
http://www.richinstyle.com/bugs/table.html
http://dicolive.media-box.net/docCSS/css.php?orderByType=1
http://www.yoyodesign.org/doc/w3c/css2/cover.html
http://www.aidenet.com/css/
http://css-astuces.batraciens.net/
http://joueb.com/css/
http://www.infini-fr.com/Sciences/Informatique/Reseaux/Internet/WorldWideWeb/Css/
http://www.netalya.com/fr/Css-intro.asp
http://pompage.net/pompe/impression/
http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_49/
http://www.tuteurs.ens.fr/internet/web/html/css.html
http://www.neokraft.net/articles/les-standards-en-six-mois/
http://www.xhtml.net/xhtmlcss/
http://www.grappa.univ-lille3.fr/~torre/guide.php?id=tpcss
http://www.weblogger.ch/blog/archives/category/programmation-web/css/
http://www.cigogne.net/site4189.html
http://www.iutc3.unicaen.fr/~stincs/ged/x1568.html
http://www.weboutils.com/services/generateurcss.html
http://www.parinux.org/activites/conf/css/index.html
http://blog-and-blues.org/weblog/2004/08/15/274-utiliser-clip-pour-masquer-du-contenu-de-maniere-accessible
par exemple....

Rapporter au modérateur

La connerie, c'est comme le judo, il faut utiliser la force de l'adversaire... J.Yanne

Re:centrer en CSS
« Répondre #9 sur: le 14-05-2005 a 01:00:30 »

AliochaBada
Membre récent

Hors-Ligne

Messages: 1

Je suis un lama!

super les liens Mikl
Le site csszengarden meme si difficile d'acces pour un nephyte propose sur un meme theme une meme structure HTML plein de pages CSS differentes, ca fourmille d'idees et pour chaqu'un de ces exemples la page css est telechargeable et etudiable. Classe en tout cas comme idée
Et merci encore Mikl d'avoir regroupé tous ces liens

Rapporter au modérateur

Re:centrer en CSS
« Répondre #10 sur: le 14-05-2005 a 08:24:04 »

_Mikl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 69

Chambre 237

Zengarden est la preuve qu'on peut faire de très beaux sites sans y mettre obligatoirement du flash...
D'ailleurs on peut proposer sa version donc si l'inspiration te gagne...

Pour apprendre c'est clair que certains de ces liens sont un peu avancés mais ca permet de se faire une bonne idée du css et de ses possibilités...

Personnellement moi je suis conquis!

Bon amusement...