centrer un élément

Version imprimable

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:

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;
}

04/08/2013, 18h05
rodolphebrd

Bonjour,

pouvez-vous poster votre code HTML, merci.

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:

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 ? :koi:

Et pour info, on peut simplifier l'écriture de la sorte :

Code:

margin: 5px auto 0 auto;

Avec dans l'ordre : top right bottom left
idem pour padding.

Code:

padding: 25px 0;

04/08/2013, 18h10
rodolphebrd

Citation:

Envoyé par jreaux62

Cerise sur le cageot

En forme le dimanche soir...:)
04/08/2013, 18h15
Invité

Citation:

Envoyé par rodolphebrd

En forme le dimanche soir...:)

en forme de quoi ? :mouarf:

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

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:

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>

05/08/2013, 03h40
Muchos

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...

:mrgreen:
05/08/2013, 08h57
Invité
Citation:

Envoyé par aertys

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). :aie:

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:

1 2 3 4 body { width: 95%; height: 95%; }
Ton écran est trop grand ? :koi:
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
05/08/2013, 09h36
rodolphebrd

J'enlèverais le display: inline-block; du footer....

jreaux62 : ça roule !
05/08/2013, 19h47
aertys

Bon je ne comprends pas pourquoi, j'ai pourtant essayé hier, mais ça marche maintenant sous la majorité des navigateurs bien qu'il y en ait quelques-uns qui ne veulent pas8O
05/08/2013, 23h58
Muchos

Citation:

Envoyé par aertys

bien qu'il y en ait quelques-uns qui ne veulent pas

Lesquels? Ce n'est pas normal.