Sujet Précédent Sujet Suivant

Mise en page

Fermé
SeebyJules - 27 mars 2014 à 15:57
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 31 mars 2014 à 19:21
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 27/03/2014 à 16:51
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
27 mars 2014 à 16:51
Merci, pour la réponse.
Je vais essayer ça de suite.
0
SeebyJules
31 mars 2014 à 09:46
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 31/03/2014 à 19:22
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