Mise en page

Fermé
Signaler
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour,
Je suis étudiante en Master Patrimoine j'essaye de créer un site dans le cadre d'un projet tuteuré. J'ai quelques connaissances assez basiques en informatique. J'ai créé une page HTML et une page CSS.
Mais là, je suis bloquée au niveau de la mise en page. J'aimerais mettre deux images sur la même ligne avec une légende commune.
C'est deux images seraient contenues dans une div.conteneurgrand {margin-left: 440px; width: 800px; padding-top: 50px;}.

J'ai essayé de mettre en forme ces deux images grâce à :
#im2 {margin-top: 100px; margin-left: 100px; float: left; display: inline;}
#im3 {margin-top: 100px; margin-right: 350px;}

Mais ça ne marche pas du tout. J'ai tout de même essayé de trouver une solution par moi même et j'ai trouvé ce site : http://www.w3schools.com/css/css_image_gallery.asp
Mais j'ai beaucoup de mal à comprendre la manipulation et le mettre en place dans ma page css et html.

Si quelqu'un pourrait m'aider un petit peu ?
Merci d'avance en tout cas pour vos éventuelles réponses




1 réponse

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
704
Salut

ne mets pas d'id a tes images

pour mettre en forme tes images

.conteneurgrand img {
margin : .........;
}

pas de display inline ou de float car img est déja un élément inline.

la largeur des images + margin (gauche et droite) doit etre inférieur au width de .conteneurgrand

par exemple tu peux faire

.conteneurgrand img {
margin : 100px 5% 0 5%;
width : 40%;
border:0;
}

.conteneurgrand p {
text-align:center;
margin: 20px 5%;
}


<div class="conteneurgrand">
<img src="image1" /><img src="image2" />
<p>la description<p>
</div>

et aucun width ou style dans le html pour <img src
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Merci, pour la réponse.
Je vais essayer ça de suite.
Merci, ça marche très bien !
Mais si je voudrais par exemple faire descendre la première image c'est-à-dire qu'elle ait une marge supérieure plus importante comment est-ce que je peux faire ? Sans que les autres images aient cette marge là ?
Est-ce que l'on peut faire par exemple :
.conteneurgrand img1 {
margin : 150px 5% 0 5%;
width : 40%;
border:0;
}
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
704
non il faut mette des id a tes images
exemple
<img id="imgA" src="image1" /><img id="imgB" src="image2" />

tu vires

.conteneurgrand img {
margin : 150px 5% 0 5%;
width : 40%;
border:0;
}

à la place tu mets

#imgA {
margin : 100px 5% 0 5%;
width : 40%;
border:0;
}

#imgB {
margin : 150px 5% 0 5%;
width : 40%;
border:0;
}

(en gras la marge top qui a changé)