Problème CSS

Résolu
Infoecologie Messages postés 146 Statut Membre -  
 Profil bloqué -
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 !

1 réponse

Réponse 1 / 1
Profil bloqué
 
Salut !

Beaucoup de code !

Tu n'aurais pas un lien vers ton site ?

Pour centrer, dans ton article {} il te faut un text-align:center;

0

Discussions similaires

Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
Enlever trait sous un lien href
ponpon17430 -
trucmachinchose-rose -

30 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses
Background color css
ernblp -
ernblp -

5 réponses