Bonjour,
Je cherche à aligner disposer 3 boites ayant du contenu dans un projet, mais je n’y arrive pas. Quelqu’un peu-il m’aider à aligner la troisième boites avec es 2 autres? Merci.
(Observations : je n’ai pas encore terminé le css pour le formulaire et le pied de page/ mon css n’est pas encore organisé!)
Le code HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>devoir2</title>
<link rel="stylesheet" type="text/css" href="devoir2.css">
</head>
<body>
<div id="wrapper" class="wrapper">
<header id="main-header">
<div id="logo" class="position-logo float-left">
<a href="index.html">
<img src="img/logo.png" width="159" height="67" alt="logo">
</a>
</div>
<nav id="main-nav" class="nav float-right">
<ul>
<li class="nav-link"> <a href="#"> Accueil </a> </li>
<li class="nav-link"> <a href="#"> Présentation </a> </li>
<li class="nav-link"> <a href="#"> Agenda </a> </li>
<li class="nav-link"> <a href="#"> Blog </a> </li>
<li class="nav-link"> <a href="#"> Dans la presse </a> </li>
</ul>
<div class="clear"> </div>
</nav>
<div id="slogan" class="main-slogan">
<h1 class="main-slogan1"> I.R.E.</h1>
<h2 class="main-slogan2"> Institut Recherche Environnement</h2>
<h3 class="main-slogan3"> Le meilleur de la science au service de la terre</h3>
</div>
<div class="clear"> </div>
</header>
<main id="main" class="main">
<div id="box1" class="box1">
<img src="img/contenu-img-1.jpg" width="370" height="273" alt="contenu-img-1" class="float-left img-left1">
<figure>
<img src="img/product-01.png" width="184" height="187" alt="product-01" class="float-right" >
<figcaption>
<div class="title-rapport"> Rapport annuel 2017 </div>
<div class="telecharger"> Télécharger </div>
</figcaption>
</figure>
<section>
<header>
<h2> Une dizaine de militaires armées</h2>
<p class="meta">
<span class="meta-auteur"> Antoine Dellec </span>
<span class="meta-date"> , le 27 avril 2025 </span>
</header>
</section>
<section>
<p> <span> Il allait peut-être perdre Florence avant même de lui avoir avoué son amour. Il devait empêcher Prélude de continuer dans son délire. Mais comment pouvait-il stopper ce parasite créé par lui quelques années auparavant? </span>
</section>
<div class="clear"> </div>
</div>
<div id="box2" class="box2">
<img src="img/contenu-img-2.jpg" width="370" height="273" alt="contenu-img-2" class="float-left img-left1">
<figure>
<img src="img/product-01.png" width="184" height="187" alt="product-01" class="float-right">
<figcaption>
<div class="title-rapport"> Rapport annuel 2016 </div>
<div class="telecharger"> Télécharger </div>
</figcaption>
</figure>
<section>
<header>
<h2> Informaticienne chevronnée </h2>
<p class="meta">
<span class="meta-auteur"> Dider Paltier Dellec </span>
<span class="meta-date"> , le 12 mai 2002 </span>
</header>
</section>
<section>
<p> <span> Interloqué, David ne sait pas quoi répondre. En effet, il connaît un certain Prélude : lui. C'était le pseudo qu'il utilisait das sa jeunesse d'informaticien. Tous ses amis de l'époque le connaissait sous ce nom. </span>
</section>
<div class="clear"> </div>
</div>
<div id="box3" class="box3">
<figure>
<img src="img/saut.jpg" width="480" height="480" alt="saut" class="float-left img-left2">
<figcaption>
<h2> Le saut </h2>
<h3> La chute du sot sans seau </h3>
<h2> sauter </h2>
</figcaption>
</figure>
<div id="container-vignettes" class="container-vignettes float-right">
<div class="vignette float-left">
<figure>
<img src="img/book-01.jpg" width="120" height="157" alt="book-01" class="img-book">
<figcaption>
<div class="title-livre"> Bois </div>
<div class="consulter"> Consulter </div>
</figcaption>
</figure>
</div>
<div class="vignette float-left">
<figure>
<img src="img/book-02.jpg" width="120" height="157" alt="book-02" class="img-book">
<figcaption>
<div class="title-livre"> Sable </div>
<div class="consulter"> Consulter </div>
</figcaption>
<figure>
</div>
<div class="vignette float-left">
<figure>
<img src="img/book-03.jpg" width="120" height="157" alt="book-03" class="img-book">
<figcaption>
<div class="title-livre"> Rivière </div>
<div class="consulter"> Consulter </div>
</figcaption>
</figure>
</div>
<div class="vignette float-left">
<figure>
<img src="img/book-04.jpg" width="120" height="157" alt="book-04" class="img-book">
<figcaption>
<div class="title-livre"> Pierre </div>
<div class="consulter"> Consulter </div>
</figcaption>
</figure>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<div id="contact" class="contact clearfix">
<h2> Demande d'information </h2>
<form action="#" method="post">
<fieldset>
<input id="nom" placeholder="Nom" type="text" autocomplete="on" required autofocus >
<input id="prenom" placeholder="Prénom" autocomplete="on" required type="text" >
<input id="email" placeholder="Email" type="email" required >
<textarea id="message" placeholder="Un message" autocomplete="on" > </textarea>
<input value="Envoyer" type="submit">
</fieldset>
</form>
</div>
</main>
<footer>
<div id="footer" class="footer">
<nav id="nav-footer" class="nav-footer">
<ul>
<li> <a href="#"> Contact </a> </li>
<li> <a href="#"> Newsletter </a> </li>
<li> <a href="#"> Qui sommes-nous? </a> </li>
<li> <a href="#"> Applis mobile et tablette </a> </li>
<li> <a href="#"> FAQ </a> </li>
</ul>
</nav>
</div>
</footer>
</div>
</body>
</html>
Le code CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul, li{
list-style: none;
}
h2{
font-size: 30px;
}
.clear{
clear: both;
}
.wrapper{
margin: 0 auto;
font-family: arial, helvetica, sans-serif, times new roman;
background: url("img/bkgd_page.jpg") no-repeat top center, #f6f6f6;
width: 1400px;
}
.position-logo{
padding-top: 25px;
padding-left: 192px;
}
.nav{
width: 500px;
margin: 0 auto;
margin-right: 100px;
padding-top: 60px;
}
.nav li{
float: left;
}
.nav-link a{
display: block;
color: #f6f6f6;
padding: 5px 10px;
text-decoration: none;
text-align: center;
border: 1px dotted #f6f6f6;
font-size: 14px;
}
.nav-link a:hover{
color: #0066ff;
background-color : #ffff;
}
.main-slogan{
color: #fff;
text-align: center;
padding-top: 200px;
}
.main-slogan1{
font-size: 50px;
font-weight: bold;
}
.main-slogan2{
font-family: times new roman;
font-size: 30px;
color: #f6f6f6;
}
.main-slogan3{
font-family: times new roman;
font-size: 15px;
color: #f6f6f6;
}
.main{
width: 1024px;
min-height: 940px;
margin: 0 auto;
margin-top: 60px;
background-color: #f6f6f6;
}
.box1{
padding: 50px 22px 10px 22px;
}
.box2{
padding: 20px 22px 10px 22px;
}
.box3{
padding: 80px 22px 10px 22px;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.img-left1{
margin: 0px 8px 0px 0px;
border: 3px solid #000;
}
.img-left2{
margin: 0px 10px 0px 0px;
border: 1px solid #000;
}
.img-left1:hover{
opacity: 0.5;
}
.box3 figure{
float: left;
width: 480px;
height: 480px;
position: relative;
}
.box3 figcaption{
display: none;
color:#fff;
text-align: center;
position: absolute;
top: 180px;
right: 0;
left: 0;
bottom: 0;
}
.box3 figure:hover figcaption{
display: block;
}
.meta{
margin: 5px 10px 5px 0px;
}
figure{
float: right;
border: none;
display: table;
width: 200px;
margin: auto;
height: 200px;
text-align: center;
margin:10px 40px 10px 40px;
}
figcaption{
display: table-caption;
caption-side: bottom;
}
.title-rapport, .telecharger{
margin: 5px;
}
.telecharger{
font-size: 10px;
color: #a22755;
}
.meta-auteur{
color: #38b4b4;
}
.meta-date{
color: #aaa;
}
.container-vignettes{
width: 480px;
height: 480px;
border: none;
margin: 0px 0px 0px 10px;
}
.vignette{
float: left;
border: 5px solid #305a47;
background-color: #ddeae4;
width: 240px;
height: 240px;
}
.vignette:nth-child(odd){
border-right: 0px solid #305a47;
}
.vignette: nth-child(n){
border-bottom: 0px solid #305a47;
}
.img-book {
margin:5px 60px 10px 60px;
}
.vignette figure{
float:left;
border: none;
display: table;
width: 235px;
height: 235px;
margin: auto;
text-align: center;
}
.vignette figcaption{
display: table-caption;
caption-side: bottom;
}
.title-livre .consulter{
margin: 5px;
}
.title-livre{
color: #000;
}
.consulter{
font-size: 10px;
color: #a22755;
}
et ça va changer ta vie !)