Mise en page
SeebyJules
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
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
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
-
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, ç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;
} -
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é)
-
