5568 sujets

Sémantique web et HTML

Problème avec <figcaption> et <figure>

Bonjour,

Je suis en début de 2de année de Design Graphique, et il m'est demandé de réaliser un portfolio avec l'ensemble de mes travaux. J'ai donc essayé d'insérer plusieurs vignettes sur une ligne, ce qui marche parfaitement, mais dès que j'y rajoute une légende avec <figcaption> et <figure> les vignettes se mettent en colonne centrée ! Sauriez-vous comment y remédier ?

Voici mon code HTML5 et CSS3

<!DOCTYPE html>

<html lang ="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="maiwann2.css" media="all">

<title> Maiwann </title>
</head>

<body>

<header>
		<h1> Maiwann </h1>
		<h2>Étudiante en Design Graphique<h2>
		
</header>

<nav><ul>
<li><a class="menu" href="accueil.html" alt="accueil"> <span class="lettrine2">A</span>ccueil </a></li>
<li><a class="menu" href="#" alt="Qui suis-je ?" > <span class="lettrine2">Q</span>ui suis-je ? </a></li>
<li><a class="menu" href="travaux.html" alt="Travaux" > <span class="lettrine2">T</span>ravaux </a></li>
<li><a class="menu" href="#" alt="Contact" > <span class="lettrine2">C</span>ontact </a></li>
</ul></nav>
			
<div id="page">

<figure><img src="img2/jpo2.jpg" alt="Journée Portes Ouvertes" class="vignette"><figcaption>Graphisme</figcaption></figure>
<figure><img src="img2/jpo2.jpg" alt="Journée Portes Ouvertes" class="vignette"><figcaption>Graphisme</figcaption></figure>
<figure><img src="img2/jpo2.jpg" alt="Journée Portes Ouvertes" class="vignette"><figcaption>Graphisme</figcaption></figure>
<figure><img src="img2/jpo2.jpg" alt="Journée Portes Ouvertes" class="vignette"><figcaption>Graphisme</figcaption></figure>


</div>





</body>

<footer>
© 2013 Maiwann - All rights reserved
</footer>

</html>


@font-face {	font-family: 'stewart sans';
						src: url('stewartsans.ttf');
}

html{ 		font-size: 100%
 }

body {
				background-color: #f2fcff;
				background-repeat: no-repeat;
				font-family: Calibri, Helvetica, sans-serif;
				color: #00547a;

}

header {
				background-color: white;
				padding: 5px 0px 5px 0px;
				margin: 30px 0px 10px 0px;
				width: 100%;
				text-align: center;
				line-height: 0%;
				border: thin #00547a;
				border-style: dashed none dashed none;
}


h1 {			font-family: stewart sans, Helvetica, sans-serif;
				font-size: 2em;
		}


h2 {			font-size: .75em;
				font-family: Calibri, Helvetica, sans-serif;
				font-weight: lighter;}



nav {		font-family: stewart sans, Helvetica, sans-serif;
				font-size: 1.05em;
				text-align: center;
				width: 800px;
				height: 25px;
				margin: 20px auto 5px auto;
				padding: 10px auto 10px auto;
				background-color: white;

				
}

.menu {	color: #00547a;
				padding: 4px 10px 3px 10px;
				margin: 5px 5px 5px 5px;				
}


ul {			margin: 5px auto 5px auto;
				padding: 0px 0px 0px 0px;
}


li {			display:inline-block;
				padding: 5px 50px 5px 50px;
}


a {			 text-decoration:none; 
	
}


#page {	background: white;
				width: 800px;
				margin: 10% auto auto auto;
				padding: 20px 20px 15px 20px;
				text-align: center;		
}

.lettrine1{ font-family: stewart sans, Helvetica, sans-serif;
				font-size: 2em;
				font-weight: bold;	
}

.lettrine2{ font-family: stewart sans, Helvetica, sans-serif;
				font-size: 1.1em;
				font-weight: bold;
}

.vignette { margin: 20px 20px 5px 20px;
				  width: 150px;
	
}

figcaption { font-family: stewart sans, Helvetica, sans-serif;
					font-size: 1.2em;
}

figure { width: 190px;
	
}

footer {
			
			background: #00547a;
			position:fixed;
			bottom:0;
			left:0;
			height: 30px;
			width: 100%;
			color: white;
			text-align: center;
			font-family: Calibri, Helvetica, sans-serif;
			font-size: 1em;
			padding: 10px 0px 0px 0px;
			border: thin white;
			border-style: dashed none none none;
}



Merci d'avance !! Smiley ravi
salut,
l'élément <figure> est de type bloc, donc un simple "display:inline-block" couplé à un "vertical-align:top" réglera l'affaire.
Sujet clos
Aller à