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é ).
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
Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
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|
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">
(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
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é.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...
Compos sui.
Compos sui.