Centrer un site en css?????

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par tryan, 14 Mars 2009.

  1. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Bonjour,
    Je rencontre un petit soucis pour centrer un design en css. J'ai bien testé différente façon dont le margin:auto; sur le body ou sur mon conteneur mais sans succès. Mon design reste désespérément collé à gauche.
    Un margin-left + margin-right règle mon soucis uniquement sur les même résolution d'écran que moi, donc à éviter!
    Mon teste se trouve ici : http://creer.mon.site.free.fr/
    La feuille de style ici : http://creer.mon.site.free.fr/img/style1.css

    Je prend toutes suggestions ^^
    Merci
     
  2. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 158
    J'aime reçus:
    0
    Tu fais un "text-align:center;" sur le "body" (pour IE).

    Ensuite, sur le div qui englobe tout ton site, tu fais un "margin:0 auto;" (pour les autres) ET un "text-align:left;" (pour replacer ton texte à gauche par défaut)

    Sachant que le premier div doit avoir un "width" (largeur) définit évidemment.
     
  3. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 373
    J'aime reçus:
    1
    Le text-align est superflu (pas indispensable).

    Voici le minimum :

    HTML
    Code:
    <div id="conteneur">ici ton contenu</div>
    CSS
    Code:
    #conteneur {width:960px; margin:0 auto;}
    (à adapter selon les besoins)


    (ça résume le post / la réponse précédent(e) ;-) )
     
  4. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 158
    J'aime reçus:
    0
    Comme précisé dans la parenthèse, il l'est pour IE, qui est encore très utilisé.

    Sans ça, sur tous les navigateurs ça marchera, SAUF sur IE6.

    Donc je confirme, il est indispensable

     
  5. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Merci mais ... sa ne fonctionne pas quelque soit la réponse^^. Mon design reste toujours collé à gauche.
    Pour ceux qui veulent trouver une soluce en local et qui on du temps à perdre, ci joint mon code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
    <head>
      <style type="text/css">
    body{
    background :#5FCBE7 url(bg.png) repeat ;
    }
    #conteneur {
    position: absolute;
    margin: auto;
    width: 1000px;
    padding:5px;
    height: auto;
    background-color: #FBFBFB;
    }
    #menu {
    float:left;
    padding:5px;
    width: 200px;
    height: auto;
    background-color: #EEEEEE;
    text-align: left;
    margin:5px;
    }
    #contenu {
    float:right;
    width: 755px;
    height: auto;
    border: 1px solid #6699CC;
    background-color: #F5F8FC;
    text-align: left;
    padding: 5px;
    margin:5px;
    }
    #header{
    padding:5px;
    width:auto;
    height: 240px;
    background :#5FCBE7 url(page_top.jpg) no-repeat;
    border: 1px solid #FFF;
    margin:5px;
    color: #FFF;
    font-size: 55px;
    }
    .titre_menu {
    color: #FFF;
    padding:3px;
    border: 1px solid #000;
    background: #000;
    font-weight: bold;
    }
    a.menu { display: block; color: #000; text-decoration: none; padding:3px;text-decoration:none;}
    a.menu:hover { display: block; color: #000; background: #ddddff; padding:3px;text-decoration:none;}
    h1{
    font-size: 25px;
    color: #336699;
    margin-left : 15px;
    border-bottom : 1px solid #336699;
    }
    h2{
    font-size: 20px;
    color: #336699;
    margin-left : 15px;
    border-bottom : 1px solid #336699;
    }
    h3{
    font-size: 15px;
    color: #336699;
    margin-left : 15px;
    border-bottom : 1px solid #336699;
    }
    ul {
    margin: 20px;
    padding : 5px;
    list-style : none;
    }
    li{
    display : list-item;
    list-style-image : url('fleche-verte.png');
    }
      </style>
      <title>teste.css</title>
    </head>
    <body>
    <div id="conteneur">
    <div id="header">Mon super site XHTML/CSS</div>
    <div id="menu">
    <div class="titre_menu">Navigation</div>
    <a href="#" class="menu">Lien</a>
    <a href="#" class="menu">Lien</a>
    <a href="#" class="menu">Lien</a>
    <a href="#" class="menu">Lien</a>
    <div class="titre_menu">Navigation 2</div>
    <a href="#" class="menu">Lien</a>
    <a href="#" class="menu">Lien</a>
    <a href="#" class="menu">Lien</a>
    <a href="#" class="menu">Lien</a>
    </div>
    <div id="contenu">
    <h1>Titre niveau 1</h1>
    <p>Paragraphe 1</p>
    <h2>Titre niveau 2</h2>
    <p>Paragraphe 2</p>
    <h3>Titre niveau 3</h3>
    <ul>
      <li>hhh</li>
      <li>kkk</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
     
  6. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 158
    J'aime reçus:
    0
    Il n'y a aucun doute sur le fonctionnement.

    Seulement, ton "position: absolute" ... à éviter, il sera forcement collé en haut à gauche quoique tu fasses.

    Donc tu refais ce que j'ai mis au dessus, et tu retires le position:absolute;
     
  7. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Oui, je me suis rendu compte également que mon position:absolute sur mon conteneur était la cause de mon problème.
    Bon, maintenant que mon design est centré, et ayant enlevé mon position:absolute de mon conteneur, mon menu et mon contenu dépasse de mon conteneur :lol: .. y m'énerve ce truc ^^.
     
  8. Audiofeeline
    Audiofeeline WRInaute accro
    Inscrit:
    20 Octobre 2005
    Messages:
    4 172
    J'aime reçus:
    2
    Arrêtez de coder POUR Internet Explorer, quand les gens verront qu'Internet est bancale avec ce navigateur ils en choisiront un autre ou Microsoft fera des efforts... :mrgreen: :mrgreen: :mrgreen:
     
  9. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 011
    J'aime reçus:
    133
    Très mauvaise appréciation du truc je pense. L'objectif quand on fait un site est de toucher le plus grand nombre. Va expliquer à un client que si son navigateur n'affiche pas les sites correctement, c'est qu'il doit être sur IE et qu'il devrait en changer. Beaucoup ne connaissent même pas le nom du navigateur qu'ils utilisent. En tant que prestataire, le site doit s'adapter à un maximum de navigateurs (sans non plus tomber dans le délire et proposer des sites 100% fonctionnelles sur IE4.), ce n'est pas à l'utilisateur de s'adapter au site.

    IE 6 est certes une belle prise de tête à ce niveau, mais on doit faire avec. Les test doivent donc se faire AVEC lui, mais aussi avec FF, Chrome, Safari, etc (incluant plusieurs versions pour chacun).
     
  10. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Malheureusement les erreurs que je rencontre sur mon css est sous IE et FF :lol: ...

    Bon, le faite que mon contenue et que mon menu soit en float left et right fait qu'ils sortent tout 2 de mon conteneur :x .... Une fois retiré c'est 2 float, tout se retrouve bien englobé par mon conteneur mais ... du coup mon contenu passe en dessous de mon menu :x ...sa m'énerve ^^. Je ne vois pas comment faire outre le faite de mettre une marge négative à mon contenu :?: Saloperie de CSS ...
     
  11. Audiofeeline
    Audiofeeline WRInaute accro
    Inscrit:
    20 Octobre 2005
    Messages:
    4 172
    J'aime reçus:
    2
    Il suffit de mettre l'ensemble de ton site dans un conteneur div :
    Code:
    <div id="tonsite">TOUT TON CODE</div>
    Code:
    #tonsite{margin:0 auto 0 auto;width:800px;}
    En tout cas ça m'a inspiré un billet sur mon WWW. :)
     
  12. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 158
    J'aime reçus:
    0
    Lol, j'imagine trop le mec qui sait à peine qu'il existe autre chose que Internet Explorer se dire "Oh merde, mon navigateur respecte même pas les standards de W3C, et merde, faut que j'en trouve un autre".

    Perso, je pense plutôt qu'il va se dire "Arf, il est nul ce site, il marche pas, je vais allé voir ailleurs".
     
  13. Audiofeeline
    Audiofeeline WRInaute accro
    Inscrit:
    20 Octobre 2005
    Messages:
    4 172
    J'aime reçus:
    2
    Ouais mais si les autres sites sont pareils...
    Bon c'est utopique, hein?! :)
     
  14. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Ouaiiiiii, merci de vos réponses et particulièrement celle d'Audiofeeline qui met un terme à mon calvaire ..enfin :D .

    Merki, merki ^^.
     
  15. Audiofeeline
    Audiofeeline WRInaute accro
    Inscrit:
    20 Octobre 2005
    Messages:
    4 172
    J'aime reçus:
    2
    Quand tu sais pas tu me demandes.
    Et dire que je suis une bille en code... :)

    Sur ces bonnes paroles je vais me faire un ptit GTA4 sur PS3! Avis aux amateurs!
     
  16. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 158
    J'aime reçus:
    0
    Soit dit en passant, ce qu'il a dit a été dis au moins 3 fois au dessus lol
     
Chargement...
Similar Threads - Centrer css Forum Date
Centrer verticalement un texte (CSS) Développement d'un site Web ou d'une appli mobile 16 Février 2012
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
Centrer une image en CSS Développement d'un site Web ou d'une appli mobile 11 Novembre 2008
CSS : centrer un div Développement d'un site Web ou d'une appli mobile 6 Mai 2008
probléme pour centrer en CSS Développement d'un site Web ou d'une appli mobile 23 Septembre 2007
Centrer menu CSS Développement d'un site Web ou d'une appli mobile 6 Mai 2007
[CSS] Centrer un contenu de balise verticalement ?... Développement d'un site Web ou d'une appli mobile 3 Mai 2006
CSS : Centrer un bloc en position:absolue Développement d'un site Web ou d'une appli mobile 13 Novembre 2005
Etirer + Centrer un site en css. Développement d'un site Web ou d'une appli mobile 17 Août 2005
[CSS] Centrer l'ensemble d'une page Administration d'un site Web 3 Juin 2004
grande image centrer verticalement dans DIV avec largeur variable de l'ecran Développement d'un site Web ou d'une appli mobile 28 Juin 2022
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
Centrer une image horizontalement sur un div Développement d'un site Web ou d'une appli mobile 25 Septembre 2012
centrer menu horizontal deroulant Développement d'un site Web ou d'une appli mobile 28 Juin 2011
[RESOLU] jQuery : centrer par rapport à la taille du navigateur Développement d'un site Web ou d'une appli mobile 25 Août 2010
Centrer une image de taille variable. Développement d'un site Web ou d'une appli mobile 8 Mars 2009