IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

centrer un élément


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Par défaut centrer un élément
    bonjour,
    je voudrais essayer de centrer un élément en css horizontalement. j'ai vu ce qu'était dit sur la FAQ sauf qu'il me semble impossible de mettre les margin et les padding à 0px, puisque je m'en sert dans beaucoup d'autres blocs. je voudrais centrer le footer dans le code qui suit

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
     
    @font-face {
    	font-family: 'cacchampagne_regular_macroman';
    	src: url('polices/cacchampagne_regular_macroman/cac_champagne-webfont.eot');
    	src: url('polices/cacchampagne_regular_macroman/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),  url('polices/cacchampagne_regular_macroman/cac_champagne-webfont.woff') format('woff'),  url('polices/cacchampagne_regular_macroman/cac_champagne-webfont.ttf') format('truetype'),  url('polices/cacchampagne_regular_macroman/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'fontleroybrown_regular_macroman';
    	src: url('polices/fontleroybrown_regular_macroman/FontleroyBrown-webfont.eot');
    	src: url('polices/fontleroybrown_regular_macroman/FontleroyBrown-webfont.eot?#iefix') format('embedded-opentype'),  url('polices/fontleroybrown_regular_macroman/FontleroyBrown-webfont.woff') format('woff'),  url('polices/fontleroybrown_regular_macroman/FontleroyBrown-webfont.ttf') format('truetype'),  url('polices/fontleroybrown_regular_macroman/FontleroyBrown-webfont.svg#fontleroybrownregular') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'ptsanscaption_bold_macroman';
    	src: url('polices/ptsanscaption_bold_macroman/PTC75F-webfont.eot');
    	src: url('polices/ptsanscaption_bold_macroman/PTC75F-webfont.eot?#iefix') format ('embedded-opentype'),  url('polices/ptsanscaption_bold_macroman/PTC75F-webfont.woff') format('woff'),  url('polices/ptsanscaption_bold_macroman/PTC75F-webfont.ttf') format('truetype'),  url('polices/ptsanscaption_bold_macroman/PTC75F-webfont.svg#pt_sans_captionbold') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    /* Eléments principaux de la page */
    body {
    	width: 95%;
    	height: 95%;
    	background-image: url("/home/yann/dev/me_s_art/Images/me10.png");
    	color: black;
    }
    aside nav a {
    	font-family: Dayrom, serif;
    	font-weight: bold;
    	text-align: left;
    	text-transform: uppercase;
    }
    /* Header */
    header nav a {
    	display: inline-block;
    }
    header nav ul {
    	border: 2px solid black;
    	border-redius: 1px;
    	background-image: url('Images/effet_de_roche_a3.png');
    	list-style-type: none;
    }
    header nav li {
    	padding-right: 5px;
    	display: inline-block;
    	text-transform: uppercase;
    }
    header h1 {
    	font-size: 5em;
    	font-family: 'cacchampagne_regular_macroman', serif;
    	font-weight: normal;
    }
    #logo, header h1 {
    	display: inline-block;
    	margin-bottom: 0px;
    }
    section h1, header h2 {
    	font-family: 'fontleroybrown_regular_macroman', serif;
    	font-size: 3em;
    	margin-bottom: 10px;
    	margin-top: 0px;
    	font-weight: normal;
    }
    .petit {
    	font-size: 0.5em;
    }
    section h2, header h3 {
    	font-family: 'ptsanscaption_bold_macroman', serif;
    	font-weight: bold;
    	font-size: 1.3em;
    	margin-top: 0px;
    }
    /* Navigation */
    aside nav a {
    	text-align: left;
    }
    aside nav li {
    	padding-bottom: 8px;
    	display: block;
    	text-align: left;
    }
    nav ul {
    	list-style-type: none;
    }
    nav a {
    	font-size: 1.3em;
    	padding-bottom: 5px;
    }
    a:hover {
    	color: black;
    }
    /* Corps */
    section {
    	display: block;
    	padding-top: 5px;
    	padding-bottom: 5px;
    	margin-left : 0 auto;
    	margin-right : 0 auto;
    	width : 95%;
    	padding: 0px;
    	text-align: center;
    	border: 2px solid black;
    }
    article, aside {
    	margin-top: 5px;
    	margin-bottom: 5px;
    	display: inline-block;
    	vertical-align: top;
    	padding: 10px;
    	color: black;
    	background-color: #706b64;
    	box-shadow: 0px 2px 5px #1c1a19;
    	border-radius: 5px;
    }
    article {
    	width: 55%;
    	margin-right: 15px;
    	font-size: 1.2em;
    	border: 2px solid black;
    }
    article p {
    	font-size: 0.8em;
    }
    aside {
    	width: 35%;
    	font-size: 0.9em;
    	border: 2px solid black;
    }
     a:hoover {
     color: black;
    }
    /* Footer */
    footer {
    	margin-left : auto;
    	margin-right : auto;
    	width : 50%;
    	margin-top: 5px;
    	background-image: url('Images/effet_de_roche_a3.png');
    	padding-top: 25px;
    	padding-bottom: 25px;
    	text-align: center;
    	display: inline-block;
    	margin-right: 0px;
    	margin-left: 0px;
    	padding-right: 0px;
    	padding-left: 0px;
    	margin-bottom: 5px;
    	border: 2px solid black;
    	border-radius: 5px;
    	font-weight: bold;
    }
    a {
    	font-family: "Comic sans MS", "Trebuchet MS", Verdana, serif;
    }
    nav ul a {
    	font-weight: bold;
    }
    /* Correctifs pour les vieilles versions d'Internet Explorer */
    /* Pour activer un positionnement type inline-block sur les vieilles versions d'IE */
    .old_ie #titre_principal, .old_ie #logo, .old_ie header h1, .old_ie nav, .old_ie nav li, .old_ie .bouton_rouge, .old_ie article, .old_ie aside, .old_ie #tweet, .old_ie #mes_photos, .old_ie #mes_amis, .old_ie #mes_amis ul {
    	display: inline;
    	zoom: 1;
    }
    /* Quelques ajustements pour les vieilles versions d'IE */
    .old_ie section h1, .ie8 section h1 {
    	font-size: 1.1em;
    }
    .old_ie footer div, .ie8 footer div {
    	margin-top: 30px;
    	background: url('images/separateur.png') repeat-x top;
    }

  2. #2
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Bonjour,

    pouvez-vous poster votre code HTML, merci.

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    montrer le code CSS, c'est bien.

    NE montrer QUE le code CSS UTILE, c'est mieux.
    Montrer AUSSI le code html associé n'est pas un luxe, mais une nécessité.

    Cerise sur le cageot :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    footer {
    	margin-left : auto;
    	margin-right : auto;
    	width : 50%;
    	margin-top: 5px;
    	background-image: url('Images/effet_de_roche_a3.png');
    	padding-top: 25px;
    	padding-bottom: 25px;
    	text-align: center;
    	display: inline-block;
    	margin-right: 0px;
    	margin-left: 0px;
    	padding-right: 0px;
    	padding-left: 0px;
    	margin-bottom: 5px;
    	border: 2px solid black;
    	border-radius: 5px;
    	font-weight: bold;
    }
    Définir plusieurs fois les même attributs ?

    Et pour info, on peut simplifier l'écriture de la sorte :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    margin: 5px auto 0 auto;
    Avec dans l'ordre : top right bottom left
    idem pour padding.

  4. #4
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Citation Envoyé par jreaux62
    Cerise sur le cageot
    En forme le dimanche soir...

  5. #5
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par rodolphebrd Voir le message
    En forme le dimanche soir...
    en forme de quoi ?

    Sinon... ça va, toi ?
    Ah ! C'est l'heure de l'apéro...

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Par défaut
    Euh oui, ça va toujours...

    je ne comprends pas en quoi le code html peut aider pour un problème de positionnement, mais le voilà:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    <html>
    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="acc.css" />
     
    <!--[if lt IE 9]>
     
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     
            <![endif]-->
     
    <title>ME's Art</title>
    </head>
     
    <!--[if IE 6 ]><body class="ie6 old_ie"><![endif]--> 
     
    <!--[if IE 7 ]><body class="ie7 old_ie"><![endif]--> 
     
    <!--[if IE 8 ]><body class="ie8"><![endif]--> 
     
    <!--[if IE 9 ]><body class="ie9"><![endif]--> 
     
    <!--[if !IE]><!-->
    <body>
    <!--<![endif]-->
     
    <div id="bloc_page">
      <header>
        <div id="titre_principal">
          <figure> <img src="Images/me_s_art_logo__juillet_.png" alt="Logo de ME" title="Logo de ME" /> </figure>
          <h1>Bienvenue sur ME's Art!</h1>
          <h2>Sur ce site, vous pouvez voir chacune des oeuvres réalisées par moi, Yann QUENTIN.<br />
            J'ai installé un copyright pour les protéger, il est accessible depuis ce lien : <a class="petit" href="copyrigt.html" alt="Copyright">Copyright</a></h2>
          <h3>Pour naviguer à l'intérieur du site, vous pouvez soit cliquer sur l'un des liens ci-dessous représentant les différentes façons de faire un dessin, puis cliquer sur l'oeuvre choisie, soit chercher le titre de l'oeuvre que vous voulez voir dans le menu ci-dessous.</h3>
        </div>
        <nav>
          <ul>
            <li><a href="acc.html">Accueil</a></li>
            <li><a href="tous.html">Tous</a></li>
            <li><a href="crayonscire.html">Crayons de cire</a></li>
            <li><a href="crayonscouleurs.html">Crayons de couleurs</a></li>
            <li><a href="crayonsaquarelles.html">Crayons de couleurs aquarellables</a></li>
            <li><a href="crayonspapier.html">Crayons à papier</a></li>
            <li><a href="crayonsgraphites.html">Crayons graphites</a></li>
            <li><a href="crayonsfusains.html">Crayons fusains</a></li>
            <li><a href="feutres.html">Feutres</a></li>
            <li><a href="ordinateur.html">Ordinateur</a></li>
            <li><a href="pastels.html">Pastels</a></li>
            <li><a href="pastelsaquarelles.html">Pastels aquarellables</a></li>
            <li><a href="pastelshuile.html">Pastels à l'huile</a></li>
            <li><a href="peinture.html">Peinture</a></li>
            <li><a href="peintureacryllique.html">Peinture acryllique</a></li>
          </ul>
        </nav>
      </header>
      <section>
        <article>
          <h1>Bonjour et bienvenue sur ME's Art, le site de Yann QUENTIN, site sur lequel vous pouvez voir toutes les oeuvres que j'ai réalisées.</h1>
          <h2>Au cas ou vous auriez oublié, je vous rapelle que mes oeuvres sont protégés par un copyright, accessible depuis ce lien : <a href="Copyright.html">Copyright</a></h2>
        </article>
        <aside>
          <h1>Liste des oeuvres</h1>
          <h2>Comme si ça faisait pas encore assez, je vous rapelle que mes oeuvres sont protégées par un copyright, accessible depuis ce lien <a href="copyright.html">Copyright</a></h2>
          <nav>
          <ul>
            <li><a href="abstraction.html">Abstration</a><br />
            </li>
            <li><a href="chien_domestique.html">Chien domestique</a><br />
            </li>
            <li><a href="chien_vache.html">Chien-vache</a><br />
            </li>
            <li><a href="cygne.html">Cygne</a><br />
            </li>
            <li><a href="essai_de_peinture.html">Essai de peinture</a><br />
            </li>
            <li><a href="l_arc_en_ciel.html">L'arc-en-ciel</a><br />
            </li>
            <li><a href="l_ecologiste_de_l_impossible.html">L'écologiste de l'impossible</a><br />
            </li>
            <li><a href="l_homme_est_aveugle.html">L'homme est aveugle</a><br />
            </li>
            <li><a href="l_oeil.html">L'oeil</a><br />
            </li>
            <li><a href="l_ombre_et_la_lumiere.html">L'ombre et la lumière</a><br />
            </li>
            <li><a href="la_joconde_de_modigliani.html">La Joconde de MODIGLIANI</a><br />
            </li>
            <li><a href="la_porte_demoniaque.html">La Porte démoniaque</a><br />
            </li>
            <li><a href="la_vie_et_la_mort.html">La Vie et la Mort</a><br />
            </li>
            <li><a href="le_mal_est_partout.html">Le Mal est partout</a><br />
            </li>
            <li><a href="licorne.html">Licorne</a><br />
            </li>
            <li><a href="loin.html">Loin</a><br />
            </li>
            <li><a href="me_s_art_logo.html">ME's art logo</a><br />
            </li>
            <li><a href="mr_baobab.html">Mr Baobab</a><br />
            </li>
            <li><a href="narcisse.html">Narcisse</a><br />
            </li>
            <li><a href="origines.html">Origines</a><br />
            </li>
            <li><a href="ours_polaire.html">Ours polaire</a><br />
            </li>
            <li><a href="poisson.html">Poisson</a><br />
            </li>
            <li><a href="renard.html">Renard</a><br />
            </li>
            <li><a href="rose_floribunda.html">Rose floribunda<br />
            </li>
            <li><a href="rouge_gorge.html">Rouge-gorge</a><br />
            </li>
            <li><a href="saint_michel.html">Saint-Michel</a><br />
            </li>
            <li><a href="tete_de_lionne.html">Tête de lionne</a><br />
            </li>
            <li><a href="toute_chose_a_une_fin.html">Toute chose a une fin</a><br />
            </li>
            <li><a href="wolwerine.html">Wolwerine</a><br />
            </li>
            <li><a href="woman_in_darkness.html">Woman in darkness</a><br />
            </li>
          </ul>
        </aside
     
    		>
      </section>
      <footer> <a href=mailto:"quentin.yann@gmail.com">Me contacter</a>
        <div id="tweet">
      </footer>
    </div>
    </body>
    </html>

  7. #7
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Citation Envoyé par aertys
    je ne comprends pas en quoi le code html peut aider pour un problème de positionnement
    À voir que vous n'avez pas mis de DOCTYPE et que <div id="tweet"> n'est pas fermé.

    PS: Pour info, la hiérarchie de vos titres est impropre, et les balises ARTICLE, ASIDE et SECTION sont mal utilisées.

    PPS:
    Citation Envoyé par aertys
    Euh oui, ça va toujours...

  8. #8
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par aertys Voir le message
    je ne comprends pas en quoi le code html peut aider pour un problème de positionnement, ...
    Rappelle-moi à quoi sert le CSS ?

    Ah oui !
    A positionner des éléments HTML les uns par rapport aux autres (entre autres).

    By the way : je pense avoir donner la réponse à ta question dans mon 1er post, non ?

    Un code CSS sans code html associé, c'est :
    • comme une voiture sans roue ;
    • comme un aveugle sans canne ;
    • comme un train sans rail ;
    • comme un cul-de-jatte sans fer à repasser ;
    • comme un avion sans ailes. (petit clin d’œil à Charlélie COUTURE)
    Ça ne va pas bien loin.

    @rodolphebrd : c'est la forme aussi le lundi matin !

    [EDIT] Ceci me laisse dubitatif (et je ne dis pas ça parce qu'on est le matin...)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    body {
    	width: 95%;
    	height: 95%;
    }
    Ton écran est trop grand ?
    Conseil : les cours de CSS et cours (X)HTML devraient t'aider à combler certaines lacunes et à améliorer ton code.
    Notamment, comme dit Muchos, sur l'utilisation correcte des balises html5. (bien que, personnellement, je n'ai rien vu de choquant à ce niveau)
    => Web sémantique et (X)HTML5 : les microdonnées et les éléments sémantiques
    Dernière modification par Invité ; 05/08/2013 à 09h24.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 26/07/2007, 13h41
  2. Centrer un élément dont on ne connait pas la largeur
    Par maa dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 25/01/2007, 17h08
  3. [XHTML] centrer un élèment legend
    Par gibigue dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 29/05/2006, 23h46
  4. [CSS] Centrer les éléments ou un site web
    Par pp51 dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 27/12/2005, 15h24
  5. [CSS] centrer un élément
    Par prgasp77 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 23/06/2005, 22h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo