Mise en page

SeebyJules -  
animostab Messages postés 2829 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




A voir également:

1 réponse

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
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.
0
SeebyJules
 
Merci, pour la réponse.
Je vais essayer ça de suite.
0
SeebyJules
 
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;
}
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
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é)
0