Bonjour Africa,
africa a écrit :
De plus j'ai appliqué une largeur de 80% a ma page et elle s'affiche à 100%, je penses que cela est du à la taille des images, quand j'aurai résolu l'alignement des photos ma page devrait s'afficher à 80 %
A ce que je vois tu applique une largeur de 100% sur la classe
container. Cela signifie que toute ta partie avec les photos mesure 100% de l'espace disponible dans Body. Body n'ayant pas de largeur définie, celui-ci s'étend jusqu'à 100% de l'espace disponible.
Concernant tes images en
flex, je ne vois pas dans le code source de container contenant exclusivement les balises Picture.
Je me suis permis de copier-coller ton code dans Jsfiddle et voici les modifications ou remarques que j'ai pour toi :
[le body]
* ton container
wrapper est obsolète ou tout du moins mal placé. Tu peux le virer !
* J'ai défini la largeur de ton Body à 80% (sa taille n'était pas définie).
* dans la partie Décorations, j'ai enlevé l'instruction
margin de Body car...
* j'applique un
margin: 0 auto; sur le Body afin qu'il soit centré par rapport à Html.
[les pictures]
* Dans la partie html j'ai rajouté une Div
.flex-container qui contient tes Picture. L'alignement naturel étant en ligne, celles-ci se placent côte-à-côte. A faire: ajuster les alignements bien sûr !
Dans la mesure où tu souhaites les placer sur deux lignes, il faut fermer la Div
.flex-container après la deuxième image et en rouvrir de suite une seconde.
[fond de page]
Sur Fiddle je ne peux tester les images (ils refusent les sortants, compréhensible). Par contre j'appliquerais cette jolie image de fond non pas sur le Body (incompatible avec ce que je t'ai mis ci-dessus) mais directement sur l'élément Html.
Si tu es du genre paranoïaque, tu pourras toujours fixer Html à
width&height=100%.
De fait tu auras un petit nettoyage à faire dans ton code afin d'y enlever les éléments obsolètes.
PS : j'arrive pas à trouver le lien du fiddle donc je te le poste ici bas
<div class="contenair">
<header>
<img src="images/banniere.jpg" alt=""/></header>
<div class="wrapper">
<nav id="navigation" role="navigation">
<a class="actif" href="#">Accueil</a>
<a href="#">Randonnées</a>
<a href="#">Ballades</a>
<a href="#">Contact/Acces</a>
</nav>
<section class="content">
<h2>Découvrez le Pays Basque à cheval.</h2>
<p>Balades, randonnées de 2 à 7 jours. </p>
<div class="flex-container">
<figure><img src="images/eugene.jpg" alt="" /><figcaption class ="fig">Eugène, votre guide</figcaption></figure>
<figure><img src="images/Baigura.jpg" alt="" /><figcaption class ="fig">Balade au Baigurra</figcaption></figure>
<figure><img src="images/automne.jpg" alt="" /><figcaption class ="fig">Randonnée automnale</figcaption></figure>
<figure><img src="images/vautour.jpg" alt="" /><figcaption class ="fig">Vautour</figcaption></figure>
</div><!-- Ferme flex-container -->
</section>
</div> <!-- /wrapper -->
<footer>
<ul class="kiwi">
<li><a href="#">Ecrans</a></li>
<li><a href="#">Venir</a></li>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Crédits</a></li>
</ul>
</footer>
</div> <!-- /contenair -->
body {min-height: 0;
width: 80%;
margin: 0 auto; /* a pour effet de centrer le body qui mesure 80/100% */
}
nav {width: auto;order: 0;}
.contenair{width:100%;}
img{width:100%;height:auto;}
/* Decoration */
body {font-family: "Century Gothic", helvetica, arial, sans-serif;font-size: 1.1em;}/* ici j'ai enlevé le margin:0 */
nav, section, footer {padding: 10px;margin: 0;border: 2px solid #fff;border-radius: 10px;color: #fff;}
header {text-align: center;padding: 0px;margin:auto;border: 2px solid #fff;border-radius: 10px;color: #fff;}
header img {display: block;border-radius: 10px;}
h1{font-size:1.4rem;font-weight:600}
h2{font-size:1.2rem;font-weight:600}
nav {background: dodgerblue;}
nav a {display: block;padding: .5em 1em;color: #fff;text-decoration: none;border-bottom: 1px solid rgba(255,255,255,.3);}
section {background: dodgerblue;flex:1}
footer {background: dodgerblue;text-align: left;padding-left:1rem;}
footer a {color:#fff}
li {color: #fff; padding: 10px; list-style: none; background: dodgerblue}
.actif {color:yellow;font-size:1.2rem;font-weight:600}
figure {margin:0;padding:10px;background:white;border: 1px solid #dadada;}
figcaption {margin-top:5px;padding:5px;background:#f4f4f4;border: 1px dotted #dadada;color:#252424}
.fig {text-align:center}
@media (min-width: 641px)
{
html {display: flex; flex-direction: column; max-width:1400px;} /* IE fix */
body {display: flex; /* crée un contexte flex pour ses enfants */
flex-direction: column; /* affichage vertical */
min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */}
body{background:url(images/fond.jpg) no-repeat center fixed;background-size:cover;background-attachment: fixed;}
header,nav, section, footer {margin-bottom:0.5%}
header{padding:0px;}
nav {margin-right:0.5%;}
.wrapper {
display: block; /* IE fix */
flex: 1 1 auto; /* occupe la hauteur restante */
display: flex; /* crée un contexte flex pour ses enfants */
flex-direction: row; /* affichage horizontal */
nav {width: 15em;flex: 0.5;}
section {}
figure {}
.contenair{width:80%;margin:auto; /* IE fix */}
footer{margin-top:0.5%}
footer {text-align: center;}
.kiwi {background: dodgerblue;margin: 0; padding: 0;display: -webkit-flex; display: flex;justify-content: space-around;}
}
.flex-container {
display: flex;
}
}
vu sur Firefox à jour.
T'en dis quoi ?
Modifié par Greg_Lumiere (25 Mar 2016 - 11:21)