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 :
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 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>L. xxxxx | 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>L. xxxxx | 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 Lucas xxxxx' 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/# !/Lucasxxxxx" title="My Twitter page" target="_blank"><img src="TwitterWorkFinal2.png" alt="My Twitter page"/></a></br>
<a href="https://www.tumblr.com/privacy/consent?redirect=http%3A%2F%2Flucas-xxxxx.tumblr.com%2F " title="My Tumblr page" target="_blank"><img src="TumblrWorkPNG.png" alt="My Tumblr page"/></a></br>
<a href="http://www.flickr.com/photos/galerie-xxxxx/" title="My Flickr page" target="_blank"><img src="LogoFlickrFini.png" alt="My Flickr page"/></a>
</body>
Merci d'avance !
Afficher la suite
