Partage

Retour à la ligne

30 novembre 2017 à 18:12:02

Bonjour,

J'ai un problème au niveau de ma mise en page en css, je voudrais  mettre deux image en dessous de 2 autres images mais je n'y arrive pas 

voici ma feuille html et css :

1 décembre 2017 à 16:21:52

Bonjour,

ce serait bien que tu postes les codes avec le bouton </> et non sous forme d'image

Il y a pas mal de choses à corriger dans les codes HTML et CSS,
que cherches-tu à obtenir ? Les deux photos avec personnages côte à côte,
puis les deux photos de montres seules côte à côte ?

Dans ce cas il ne faut pas mettre les 4 dans le même conteneur flex

Problème : les photos n'ont pas les mêmes proportions

1 décembre 2017 à 16:42:26

Salut,

Pour commencer, je te conseille de lire quelques révisions sur la balise <figure> : https://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html

5 décembre 2017 à 20:20:12

ChrisLebure a écrit:

Bonjour,

ce serait bien que tu postes les codes avec le bouton </> et non sous forme d'image

Il y a pas mal de choses à corriger dans les codes HTML et CSS,
que cherches-tu à obtenir ? Les deux photos avec personnages côte à côte,
puis les deux photos de montres seules côte à côte ?

Dans ce cas il ne faut pas mettre les 4 dans le même conteneur flex

Problème : les photos n'ont pas les mêmes proportions

Oui c'est ça que j'essaye de faire, pour les proportions des images c'est réglées,

voici ma feuille html: 

<!Doctype html>
<html> 
<head> <link rel="stylesheet" href="garde.css"/>
       <meta charset="utf-8"/>
       <titre></titre>
       <!--https://openclassrooms.com/courses/adapter-son-site-au-format-mobile-avec-css3/fonctionnement-de-base -->
       <meta name="viewport" content="width=device-width, initial-scale=1"/>
 </head>
 <body>

<header>  <nav> <ul class="en-tete">
	<li class="titre">Harry Mason </li>
	<li> Nouveautés </li>
	<li> Femmes </li>
	<li> Hommes </li>
	<li> Coffrets </li>
	<li class="recherche"> <form action="">
               <input type="text" value="Recherche"/>
                    </form>
                    </li>
</ul> 
</nav>
</header>

<section><h1><p> Bienvenue chez</p><p>Harry Mason</p> </h1> 
	
	<img class="image-principal" src="../PROJET_WEB/montres1.jpeg" alt=montre_accueil />
	<figcaption class="legende1">Marchand de montres depuis 1894</figcaption>
	
      <p class="livraison">livraison gratuite en france </p>

	<figure> <div><img class="homme" src="../PROJET_WEB/montre3.jpg" alt=montre_homme /><p>For men</p></div>
		   
		   <div> <img class="femme" src=" ../PROJET_WEB/montre2.jpeg" alt=montre_femme /> <p>For women</p>
		   </div>

		   <div> <img class=montre1 src=" ../PROJET_WEB/montre5.jpg" alt=montre_femme/> </div>
           <div> <img class=montre2 src=" ../PROJET_WEB/montre4.jpg"></div> 

		</figure>
    <aside> <strong>VOIR LA COLLECTION </strong></aside>
	</section>
	<footer>  <div> <ul> <li> CARTES CADEAUX</li>
		                 <li> BOUTIQUES PRÈS DE CHEZ VOUS </li>
                         <li>INSCRIPTION AUX EMAILS</li>
                         <li>DEVENIR MEMBRE</li>
                         <li>RÉDUCTION POUR ÉTUDIANTS</li>
                         <li>COMMENTAIRE SUR LE SITE</li></ul></div>

              <div> <ul> <li> AIDE</li>
                          <li>Statut de la commande</li>
                          <li>Expédition et livraison</li>
                          <li>Retours</li>
                          <li>Modes de paiement</li>
                          <li>Nous contacter</li> </ul></div>

               <div> <ul> <li>QUI SOMMES NOUS ?</li>
                          <li>Infos</li>
                           <li>Carrières</li>
                           <li>Investisseurs</li>
                          <li>Innovation durable</li></ul></div>


    </footer>

</body> 











et ma feuille CSS:

body
{ 
 background-image: url("../PROJET_WEB/bordure.png"), url("../PROJET_WEB/fond.jpg");
 background-position: top , center; 
 background-repeat: repeat-x, repeat;

   font-family: "Day Roman"


   }
  
/* en-tête */
header
{ border: 10px black solid;
  background-color: black;
  color: white;
   width: 108%;
   height: 50px;
  }

 .en-tete
 {list-style-type: none;
  display: flex;
  justify-content: space-between;
  padding-right: 100px;
  padding-left: 400px;}

.titre
{ position:relative;
   right: 400px; 
   font-family: "CAC Champagne";
   font-size: 220%;}

.recherche
{ position: relative;
  left: 95px; 
   }
/*image principal*/
  h1
  { 
  	position: relative;
    top: 200px; 
     left: 40px;
      font-size: 3em;
     text-shadow: 2px 2px 0px black;
     line-height: 0.40;}

.image-principal
{ width: 110%;

   }


.legende1
{ position: relative;
  bottom: 490px;
  font-size: 1.5em; 
  left: 40px;
  font-style: oblique;}

/*livraison*/
.livraison
{ border: 1px black solid;
 width: 110%;
 height-top: 5%; 
  margin: 0px;
  padding-top: 2%;}

/*image de dessous*/
figure
{ display: flex;
  margin: 0px;

  
  }



#bordure
{ position: relative;
  bottom: 100px;
  left: 50px;
  padding-bottom:  0px;
  ;
}


/*voir la collection*/
aside
{ border: 2px black solid;
border-radius: 30px;
width: 17%;
padding:  10px; 
position: relative;
left: 40%;
 margin-bottom: 40px;}

 aside:hover
 { background-color: rgb(40,19,15);
 color: white; }

/*pied de page */
footer
{ display: flex;
  border: 3px black solid;
  background-color: black;
  color: white;
  border-radius: 20px/10px;
  width: 108%;
  justify-content: space-around;
  line-height: 2;
}
div{  }

ul 
{ list-style-type: none;
}
li:hover
{ color: grey; }



-
Edité par MEL42 5 décembre 2017 à 20:31:33

Retour à la ligne

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown