28172 sujets

CSS et mise en forme, CSS3

Problème d'alignement d'images en css

Salut à tous !

Je me permets de laisser un petit post à propos d'un soucis que je rencontre pour centrer es images sur mon site.

Donc premièrement l'adresse de mon site : http://pjeandel.monespace.net/test/

Comme vous pouvez le voir les images du milieu (mon blog, mon cv...) sont placées sur la droite et je ne sais pas pourquoi... J'ai tout essayer (vetical-align ect...) mais je ne sais pas comment faire pour qu'elles se placent centrées au milieu.

Je voulais savoir si vous pouviez me donner un petit coup de main ?

Je vous laisse mon css:


/* Contenu de la page */

html {
	height: 80%;
}

body { 
  height:100%;
  font-family: "Century Gothic", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
  font-size: 0.8em;
  line-height: 0,4; 
  position: float; 
  background: black url(img/background.png) left top repeat-x; 
} 

#header{
	width: auto;
	height:20%;
  	position: relative;
  	margin: 12px auto;
  	text-align: right;
}

#middle{
	width:auto;
	height:80%;
	margin: auto;
	margin-top: 40px;
	position:relative;
}

#nav{
	width: auto;
	height:auto;
  	position: relative;
  	margin: auto;
  	border-bottom: 1px solid grey;
  	text-align: left;
  	margin-top: 10px;
} 

/* Figures */
.figure {
  display: inline-block;
  position: relative;
  width: auto;
  height: 105%;
  overflow: hidden;
  margin: 0 40px 40px 0;
  background: rgba(255,255,255,0.2);
  border: 3px solid rgba(255,255,255,0.2);
  margin-top: 70px;
  margin-left: 0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 1px 1px 13px #999; 
  -webkit-box-shadow: 1px 1px 13px #999; 
  box-shadow: 1px 1px 13px #999;
}

.figure a {
  margin: auto;
  text-decoration: none;
  padding: 0;
}
.figure a[href^="http:"]:after { 
content: ""; 
}

.figure h2 {
  display: block;
  margin:-48px 0 0 0;
  padding: 5px 10px 10px 10px;
  opacity: 0.6;
  font-size: 1.1em;
  color:#fff;
  background-color:#000;
}

.figure:hover, #content figure:focus {
  border: 3px solid rgba(255,255,255,0.4);
}

.figure:hover h2, figure:focus h2 {
  opacity: 0.9;
}

#footer{
    width: auto;
	height:50%;
  	text-align: center;
  	color: white;
  	background: rgba(255,255,255,0.2);
  	border: 1px solid rgba(255,255,255,0.2);
 	-moz-border-radius: 8px;
  	-webkit-border-radius: 8px;
  	border-radius: 8px;
 	-moz-box-shadow: 1px 1px 13px #999; 
  	-webkit-box-shadow: 1px 1px 13px #999; 
  	box-shadow: 1px 1px 13px #999;
  	
}

/* Gros titres */

nav {
  position: relative;
  right: 0;
  bottom: 5px;
  font: 15px "NewRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
} 

nav a {
  position: relative;
  color: white;
  text-decoration: none;
  padding: 3px 12px;
}

nav a:hover, header nav a:focus {
  text-decoration: none;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.2);
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
  border-radius: 8px;
 -moz-box-shadow: 1px 1px 13px #999; 
  -webkit-box-shadow: 1px 1px 13px #999; 
  box-shadow: 1px 1px 13px #999;
}

h1{ 
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  font-family: "NewRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
  font-weight: normal;
  font-size: 25px; 
  line-height: 0.8;
  text-shadow: 0px 0px 50px #b8b8b8; 
} 

h1 a{
  display: block;
  font-size: 50px;
  color: white;
  text-decoration: none; 
  text-shadow: 0px 0px 5px #666;
  text-align: right;
  
}  
  
h1 span{ 
  display: block;
  font-weight: bold;
  font-size: 30px; 
  color: white;
  text-shadow: 0px 0px 5px #fff; 
}

h1 a:hover, h1 a:focus {
  display: block;
  font-size: 50px;
  text-decoration: none;
  color: white;
  text-shadow: 0px 0px 15px #666; 
}

h2 { 
  font-family: "NewRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
  font-weight: normal;
  font-size: 15px;
  color:white;
  text-align: center; 
  line-height: 0.8;
}

p {
display: block;
float:left;
margin-left:32px;
margin-top: 22px;
}

/* Liens */
a { 
  text-decoration: none; 
} 
a:link { 
  color: #fff; 
} 

a:visited { 
  color: #fff; 
}


Je vous laisse également le index.html:


<!-- Header de la page -> Description et meta de la page -> inclure le style.css dedans -->
<!DOCTYPE html>
<html lang="fr">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>Le site passerelle de Pierre Jeandel </title>
    <meta name="DC.title" content="Le site passerelle de Pierre Jeandel" />
    <meta name="description" content="Le site passerelle de Pierre Jeandel" />
    <meta name="keywords" content="agroalimentaire, informatique, sciences, linux, procédés, apple, alimentaire, nutrition" />
    <meta name="author" content="Pierre Jeandel" />
    <meta name="geo.placename" content="Montpellier, Herault, France" />

    <link rel="stylesheet" media="all" href="styles.css" />
  </head>

<body>

<div id="header">
<h1><a href="#">Jeandel <span>Pierre</span></a></h1>

<div id="nav">
<nav>
	<a href="index.html">Accueil</a>
	<a href="http://pjeandel.monespace.net/blog/">Mon blog</a>
	<a href="http://pjeandel.monespace.net/gallerie/">Ma gallerie photo</a>
	<a href="http://pjeandel.monespace.net/cv/">Mon CV</a>
</nav>
</div>

<!-- début de figure -->
<div class=centre>
<div class="figure">
	<a href="/blog/"><img src="img/blog.png" alt="Inmythink" /></a>
	<h2>Mon blog</h2>
</div>

<div class="figure">
	<a href="/gallerie/"><img src="img/gal.png" alt="Inmythink" /></a>
	<h2>Ma gallerie photo</h2>
</div>

<div class="figure">
	<a href="/gallerie/"><img src="img/cv.png" alt="Inmythink" /></a>
	<h2>Mon CV</h2>
</div>
</div>

<!-- fin de figure -->

<!-- début de middle -->

<div id="middle"> 
<h2>Bienvenue sur mon site! Vous y trouverez mon CV ainsi que des liens vers mes autres créations</h2> 
</div>

<!-- fin de middle -->

<div id="footer">

<div id="p">

<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS Valide !" />
    </a>
</p>
</div>
</div>

</div>

</body>


Je m'excuse pour la simplicité de mon site, je commence tout juste le html et le css (depuis 2 jours...)

Merci par avance pour votre aide

Pierre
Modifié par darkpeter (06 Feb 2010 - 15:50)
Bonjour.
J'ai changé la valeur right par center et vos images se sont centré
#header {
width: auto;
height:20%;
position: relative;
margin: 12px auto;
text-align: right; /* Ici la valeur: center; */
}

Pour le restant du code je n'ai pas pris le temp de tout voir, peut etre que quelqu'un d'autre pourrait vous donner d'autres conseils.

Bonne continuation.

upload/21560-jeandel.JPG
Modifié par Torifan (06 Feb 2010 - 16:28)
Sujet clos
Aller à