Partage
  • Partager sur Facebook
  • Partager sur Twitter

Alligner image sur différents lignes

    7 février 2020 à 17:38:37

    Bonjour bonjour,

    Me revoilà (oui encore :'( ) pour vous demandez de l'aide par rapport au placement d'image dans une page. J'ai beau chercher sur internet mais aucun de mes exemples y est décris (ps: j'ai aussi tester par moi même hein).

    Voilà mon problème, je souhaiterais aligner 3 images les une à côté des autres et en mettre 2 en dessous des trois autres.

    Représentation : |image|      |image|     |image|

                                  |image|             |image|

    Site web pour accéder au code html : https://www.website.yj.fr (design imposé par mon université donc bon ahah et je pense même pas pouvoir faire mieux en réalité :'( ).

    Je vous met quand même le style.css : https://www.website.yj.fr/style.css

    Ps : Débutant en css et html donc si vous voyez des fautes n'hésitez surtout pas à me le dire pour que je puisse apprendre de mes erreurs eheh

    • Partager sur Facebook
    • Partager sur Twitter
      7 février 2020 à 17:53:34

      Salut,

      le plus simple c'est de mettre 3 images dans une div et les 2 autres dans une autre div.
      Ou encore plus simple mais moins propre, tu mets un <br> après la 3eme div.imgDebut.

      Si tu veux allez plus loin regarde display:flex ou display:grid ou encore display:table.

      -
      Edité par Frogweb 7 février 2020 à 17:53:57

      • Partager sur Facebook
      • Partager sur Twitter
      Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
        7 février 2020 à 18:20:50

        Frogweb a écrit:

        Salut,

        le plus simple c'est de mettre 3 images dans une div et les 2 autres dans une autre div.
        Ou encore plus simple mais moins propre, tu mets un <br> après la 3eme div.imgDebut.

        Si tu veux allez plus loin regarde display:flex ou display:grid ou encore display:table.

        -
        Edité par Frogweb il y a 25 minutes


        Salut,

        J'avais déjà tester de le mettre dans deux balises différentes mais rien n'y fais, il reste dans le format  |image|     |image|     |image|    |image|

                                                                                                                                                                                       |image|

        • Partager sur Facebook
        • Partager sur Twitter
          7 février 2020 à 20:21:01

          Bonjour,

          C'est normal car tu n'agis pas sur ton css : https://codepen.io/MehdiX/pen/eYNmzyK?editors=1000

          Ici j'utilises la première solution de Frogweb

          • Partager sur Facebook
          • Partager sur Twitter

          Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

            10 février 2020 à 19:06:27

            Bonjour,

            Je suis curieux tes image tu peut en changer la taille ?

            • Partager sur Facebook
            • Partager sur Twitter

            Compos sui.

              10 février 2020 à 22:45:37

              exen a écrit:

              Bonjour,

              Je suis curieux tes image tu peut en changer la taille ?

              Oui oui, tu peux en changer la taille en utilisant width et height

              • Partager sur Facebook
              • Partager sur Twitter
                11 février 2020 à 1:01:18

                Tiens une base rapide rien de transcendent le truc va être de normaliser tes images les mettres toutes à la même taille quitte à les rogner un peut avec photoshop ou autre.

                Une fois que c'est fait, tu va leurs coller un width:250px; et un height:auto;

                pas certain que le doc soit parfait, mais il passe aux validateur. Je ne me suis pas non plus pris la tête avec les hover c'est pas compliqué à ajouter. Le corps de la page des autres pages seras à placer dans la class="ColRight" si tu veut t'amuser un peut, mais elle n'est pas faite pour être utilisée sur mobile et il manque encore pas mal de truc.

                <!doctype html>
                <html lang="fr">
                <head>
                	<meta charset="utf-8">
                	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                	 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
                      rel="stylesheet">
                        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">
                
                	<title>ocr</title>
                
                	<link rel="stylesheet" href="">
                	<style type="text/css">
                	
                	body {
                	margin: 0;
                	
                	background-repeat:no-repeat;
                	background-color:rgba(45, 59, 97,1);background-attachment:local;
                	background-position:center top;
                	}
                	a{
                		text-decoration: none
                	}
                
                	header{
                		width: 100%;
                		height: 80px;
                		background-color: rgba(23, 60, 120,1);
                		display: flex;
                		justify-content: center;
                		align-items: center;
                		color:white;
                		font-size: 1em;
                	}
                	/* Ce qui contient le menu et les block image*/
                	.ens1{
                		width: 100%;
                		height: 100%;
                		display: flex;
                		flex-wrap: nowrap;
                	}
                	/* Le block menu*/
                	.ColLeft{
                		width: 20%;
                		height: 100%;
                		display: flex;
                		flex-direction: column;
                		align-items: center;
                		color: white;
                	}
                	.ColLeft > h2{
                		font-size: 30px;
                	}
                
                	.ulLeft{
                		list-style: none;
                		padding-left: 0;
                	}
                	.liLeft{
                		margin: 30px 0 0 0 ;
                	}
                	.aLeft{
                		color: white;
                		font-size: 1.3em;
                		font-weight: bold;
                	}
                	.material-icons{
                		margin-left: 10px;
                		font-size: 34px;
                	}
                /*Le block droit*/
                .ColRight{
                	background-color: white;
                	width: 80%;
                
                }
                .txRight{
                	width: 100%;
                	height: auto;
                	text-align: center;
                
                }
                .txRight > p{
                	color: black;
                	font-size: 1em;
                	margin:30px 20px 30px 20px;
                }
                
                
                .imgGlobRight{
                	width: 100%;
                	display: flex;
                	flex-direction: column;
                	align-items: center;
                	flex-wrap: wrap;
                }
                .ImgAcc{
                	height: 250px;
                	width: 250px; /* tu retravail les photos elle doivent toutes avoir la mêmes taille, et tu passe width en auto*/
                	margin:5px 5px 5px 5px;
                }
                .BlockImg1{
                	display: flex;
                	justify-content: center;
                	flex-wrap: wrap;
                }
                
                .BlockImg2{
                	display: flex;
                	justify-content: center;
                	flex-wrap: wrap;
                }
                /*footer*/
                .EnsFoot{
                	width: 100%;
                	height: auto;
                	background-color: rgba(23, 60, 120,1);
                	display: flex;
                	justify-content: flex-start;
                }
                .foot{
                	color: rgba(255,255,255, 0.7);
                	font-size: 1em;
                }
                .foot>a{
                	color: rgba(255,255,255, 0.9);
                	font-size: 1em;
                }
                
                
                	</style>
                
                
                </head>
                <body>
                <div class="cont1">
                	<header>
                		<h1>Bienvenue sur le site de Basile Routier</h1>
                	</header>
                
                  <div class="ens1">
                
                
                		<div class="ColLeft">
                			        <h2>Menu</h2>
                	        <ul class="ulLeft">
                	                <li><a class="aLeft" href="index.html"><i class="material-icons">home</i></a></li>
                	                <li class="liLeft"><a class="aLeft" href="horaire.html">Horaire</a></li>
                	                <li class="liLeft"><a class="aLeft" href="java.html">Quizz</a></li>
                	                <li class="liLeft"><a class="aLeft" href="mur.html">Mur</a></li>   
                	        </ul>
                    	</div>
                    <!-- End left  -->	
                    <div class="ColRight">
                    	<div class="txRight"><p>Bonjour à toi cher visiteur ! Bienvenue sur le site personnel de Basile Routier. Tu trouveras différentes informations me concernant, si tu as des suggestions n'hésite pas à me les transmettre par email. Bonne visite! </p>
                    	</div>
                    	<div class="imgGlobRight">
                
                    		<div class="BlockImg1">
                    			<img class="ImgAcc" src="https://static.makeuseof.com/wp-content/uploads/2018/03/travel-planning-apps-670x335.jpg" alt="map">
                    			<img class="ImgAcc" src="https://ghanatalksbusiness.com/wp-content/uploads/2019/03/istockphoto-494216846-612x612.jpg" alt="airport">
                    			<img class="ImgAcc" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSKkAIab2cL_c-Y07PcMTX0RtITU-XqafePCsHlYCIC0kq9_T8B" alt="plane">
                    		</div>
                
                    		<div class="BlockImg2">
                    			<img class="ImgAcc" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQfwOBWfCf8d0bKyr73Fh-DOJrHYOzaftruGgc8Srqqne0fvRi6" alt="camel">
                    			<img class="ImgAcc" src="https://sinorama.fr/img-proxy/400x350/mymedia/photo/sliders/03.jpg" alt="Asia">
                    		</div>
                    	</div>
                
                    	
                
                			
                  </div>
                 </div>
                		<div class="EnsFoot">
                        <footer class="foot">
                            &nbsp; (c) Basile Routier - 2020 - <a class="ecrire" href="">M'écrire</a>
                        </footer>
                    	</div>
                </div>
                </body>
                </html>



                -
                Edité par exen 11 février 2020 à 5:49:12

                • Partager sur Facebook
                • Partager sur Twitter

                Compos sui.

                Alligner image sur différents lignes

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