[css] Comment centrer un bloc css?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par yoh666, 25 Août 2010.

  1. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    Bonjour,

    Je suis débutant ++ en css, j'aimerai savoir si quelqu'un sur ce forum aurait la gentillesse de me guider.
    Je recherche à centrer mes blocs sur une page que j'ai fait en css car j'en ai marre des tableaux html et on m'a dit le fait d'utilisé le css serait plus simple et plus propre.

    Après avoir passer des heures à lire des sites qui proposent plein de techniques différentes je me suis arrété à celui ci:
    http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html
    Cependant ma question est simple et surement évidente pour beaucoup de monde mais je pige mal l'endroit où je doit coller les exemples, je les mets dans mon fichier style.css ou index.html?
    La solution retenue est le centrage élastique adaptable à tous les formats de fenêtres.

    en vous remerciant :wink:
     
  2. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    442
    J'aime reçus:
    0
    Ton index.html sert à placer ton contenu informatif (qui doit être accessible sans css), tu prend soin de baliser (div, p, span etc...) et d'identifier (id, class) les différents élément. Puis dans ton css, tu attribue aux éléments leurs propriétés de mise en forme (., #, a ...)
     
  3. Haroeris
    Haroeris WRInaute impliqué
    Inscrit:
    13 Avril 2010
    Messages:
    653
    J'aime reçus:
    0
    Voila :)
    Code:
    #centre {
    margin:0 auto;
    width:960px;
    
    }
    
     
  4. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    ok si je comprend bien je met
    Code:
    <div id="global"></div> 
    dans mon fichier index entre les balises head et
    Code:
    #centre {
    margin:0 auto;
    width:960px;
    
    }
    dans mon fichier style.css??

    je test mais ça marche pas.
     
  5. GUITEL
    GUITEL WRInaute impliqué
    Inscrit:
    8 Juin 2007
    Messages:
    844
    J'aime reçus:
    0
    Parce qu'il faut nommer le css comme la div

    entre les balises head tu mets ton css
    et entre les balises body ta div
     
  6. Haroeris
    Haroeris WRInaute impliqué
    Inscrit:
    13 Avril 2010
    Messages:
    653
    J'aime reçus:
    0
    Code:
    <div id="centre"></div> 
    :wink:

    edit : ou global dans le nom de la classe css
     
  7. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    ça marche merci! sauf que mon bloc est décalé de 1/3 sur mon 16/9e.
    Par contre il y aurait il un code ou une méthode pour le centrer au milieu de ma page par défault?
    et pour l'appliquer à toutes mes pages du site je copie le code ou ya un autre moyen?
    en faite je me sert pas de mon fichier styles.css.
     
  8. DadouDuck
    DadouDuck WRInaute impliqué
    Inscrit:
    28 Mai 2007
    Messages:
    814
    J'aime reçus:
    0
    Pas bien parce que justement, cela t'aurais évité de devoir le coller partout ce code
     
  9. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Chaque page de ton site doit être architecturée de la sorte:
    <head>
    ...
    <link href="style.css" rel="stylesheet" type="text/css" />
    ...
    </head>
    <body>
    <div id="global">
    tout ton contenu (textes,boites...)
    </div>
    </body>

    Et dans ton fichier css, comme on te l'a indiqué:
    #global{
    margin:0 auto;
    width:980px;
    }

    et normalement chaque page sera centrée sur ton écran avec une largeur de 980 pixels.

    Franck
     
  10. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    voila une réponse clair, merci tout le monde j'ai compris et ça marche. :wink:
     
Chargement...
Similar Threads - [css] centrer bloc Forum Date
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
Balise Canonical pour "concentrer le jus" SEO? Problèmes de référencement spécifiques à vos sites 18 Juin 2015
Centrer image thème naturespace Développement d'un site Web ou d'une appli mobile 19 Mars 2015
Centrer une image en height Développement d'un site Web ou d'une appli mobile 27 Février 2015
Centrer mon site Demandes d'avis et de conseils sur vos sites 26 Novembre 2014
peut on oublier google et se concentrer sur bing et yahoo? Débuter en référencement 7 Février 2013