[CSS 3] Problème position CSS

Bonjour,

j'ai un petit problème énervant sur mon css, je met des images en inline-block pour qu'elles se mettent à côté. Mais certaines se décalent des autres, laissent des trous en gros. De plus, j'aimerais savoir comment les centrer dans la balise <article>

CSS :

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
 
body 
{ 
 background-image: url(fond1.jpg); 
 background-repeat: repeat; 
 background-size: 10%; 
 margin: 0px; 
} 
 
 
header 
{ 
 background-color: black; 
 color: white; 
 width: 80%; 
 margin: auto; 
} 
 
header img 
{ 
 vertical-align: middle; 
 padding: 10px; 
 background-color: black; 
 width: 15%; 
} 
 
header p 
{ 
 background-color: black; 
 color: white; 
 display: inline-block; 
 vertical-align: middle; 
 width: 40%; 
} 
 
 
 
img[alt*="page"] 
{ 
 width: 10%; 
 padding: 10px; 
 position: absolute; 
 top: 0px; 
 right: 0px; 
} 
 
aside 
{ 
 width: 78%; 
 margin: auto; 
 text-align: center; 
 background-color: white; 
 color: black; 
} 
 
aside p 
{ 
 margin-top: 0px; 
 margin-bottom: 0px; 
} 
 
article 
{ 
 width: 78%; 
 margin: auto; 
 height: 1000px; 
 background-color: white; 
 color: black; 
} 
 
 
/* HOVERBOX */ 
 
.hoverbox 
{ 
 cursor: default; 
 list-style: none; 
 width: 78%; 
 margin: auto; 
 padding: 10px; 
} 
 
.hoverbox a 
{ 
 cursor: default; 
} 
 
.hoverbox a .preview 
{ 
 display: none; 
} 
 
.hoverbox a:hover .preview 
{ 
 display: block; 
 position: absolute; 
 top: -33px; 
 left: -45px; 
 z-index: 1; 
} 
 
.hoverbox img 
{ 
 background: #fff; 
 border-color: #aaa #ccc #ddd #bbb; 
 border-style: solid; 
 border-width: 1px; 
 color: inherit; 
 padding: 2px; 
 vertical-align: top; 
 display: inline-block; 
 margin: auto; 
} 
 
.hoverbox .preview 
{ 
 border-color: #000;gbbt 
} 
 
.hoverbox li 
{ 
 border-color: #ddd #bbb #aaa #ccc; 
 border-style: solid; 
 border-width: 1px; 
 color: inherit; 
 display: inline-block; 
 float: left; 
 margin: 40px; 
 padding: 5px; 
 position: relative; 
} 
 
/* HOVERBOX */

HTML :

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
 
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8" /> 
  <title>A. BBB| Photography</title> 
  <link rel="stylesheet" href="style.css" /> 
  <!--[if lte IE 7]> 
  <link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" /> 
  <![endif]--> 
  <!--[if lt IE 9]> 
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  <![endif]--> 
 
 
</head> 
<body> 
 <header> 
  <img src="Logo.png" alt="logo" /> 
  <p>A. BBB | Photography</br></br></br>"Beauty can be seen in all things, seeing and composing the beauty is what separates the snapshot from the photograph. - Matt Hardy</p> 
 </header> 
 <aside> 
  <p>Welcome to the AAA BBB' Photo Gallery !</br>Find all of my travel photographs and more.</p> 
 </aside> 
 <article> 
  <ul class="hoverbox"> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7185/6916057905_281954fb1a_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7185/6916057905_281954fb1a.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7049/6774012788_05d8a65f03_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7049/6774012788_05d8a65f03.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7186/6818554198_38afa5ed08_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7186/6818554198_38afa5ed08.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7205/6777034786_000c50af0f_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7205/6777034786_000c50af0f.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7181/6923150509_edf58a9d96_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7181/6923150509_edf58a9d96.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7206/6940980323_5e14cbf02f_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7206/6940980323_5e14cbf02f.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7057/6940985715_c1bded931e_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7057/6940985715_c1bded931e.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7041/6791721134_ec6a79da39_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7041/6791721134_ec6a79da39.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7049/6782479550_eaa0214e18_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7049/6782479550_eaa0214e18.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7177/6779612052_b2e0de700f_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7177/6779612052_b2e0de700f.jpg" alt="description" class="preview" /></a> 
  </li> 
  <li> 
  <a href="#"><img src="http://farm8.staticflickr.com/7038/6806372708_e4b4048e94_m.jpg" alt="description" /><img src="http://farm8.staticflickr.com/7038/6806372708_e4b4048e94.jpg" alt="description" class="preview" /></a> 
  </li> 
  </ul> 
 </article> 
  <a href="https://twitter.com/#!/AAA/BBB" title="My Twitter page" target="_blank"><img src="TwitterWorkFinal2.png" alt="My Twitter page"/></a></br> 
  <a href="http://aaa-bbb.tumblr.com/" title="My Tumblr page" target="_blank"><img src="TumblrWorkPNG.png" alt="My Tumblr page"/></a></br> 
  <a href="http://www.flickr.com/photos/galerie-bbb/" title="My Flickr page" target="_blank"><img src="LogoFlickrFini.png" alt="My Flickr page"/></a> 
 
</body>

Merci d'avance !