Problèmes de codage

Fermé
leffaceuse - 11 août 2011 à 21:48
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 15 août 2011 à 17:44
Bonjour,
je suis novice en programmation et je n'arrive pas à positionner dans ma page web des images de cette manière http://www.leslie-david.com/. J'utilise la balise <div> mais je ne comprends pas comment ça marche avec plusieurs images et comment les aligner.


10 réponses

Godux Messages postés 54 Date d'inscription mercredi 10 août 2011 Statut Membre Dernière intervention 18 août 2011 4
11 août 2011 à 22:20
Ça ne répond pas à ton problème, mais regardes le code source de la page en question...
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
11 août 2011 à 23:22
Salut,

@Godux: ça répond en partie à sa question, puisque la réponse s'y trouve.

Tu peux utiliser la propriété CSS « float: left » ou « display: inline-block ».
Les deux fonctionnent bien.
0
Merci beaucoup, ça fonctionne !
0
en faite non !
<div> <img src="image/super chat3.jpg" alt="livret du super chat obèse" /> <img src="image/rdvx3couv.jpg" alt="cd rendez vous avec X" /></div>

je n'arrive pas à savoir qu'elle est le code CSS pour placer ces deux images qui sont alignées où je veux !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
14 août 2011 à 22:28
S'il n'y a que des images, sans texte au-dessus ou en-dessous, il suffit de mettre tes balises <img /> l'une à la suite de l'autre : il s'agit d'un élément inline, il se placera donc à la suite sans créer un retour à la ligne, jusqu'au moment où la ligne est finie et là il créera une seconde ligne et ainsi de suite.
0
Je suis vraiment nul, je n'y arrive pas. J'ai réussi avec une balise <div> mais le problème c'est que j'ai plusieurs éléments soumis à des balises <div> qui n'ont pas les même propriétés. Dans mon code CSS je ne sais pas comment différencier ces balises <div> !
Du coup j'ai mis une balise div et une balise span, mais à mon avis c'est un peu n'importe quoi non ?
0
mon code html :
<div><img src="image/museeairespace.jpg" alt="livret du super chat obèse" /> <img src="image/rdvx3couv.jpg" alt="rdvx" /> <img src="image/GARAMOND1.jpg" alt="rdvx" /> <img src="image/rapportdestage.jpg" alt="rdvx" /> <img src="image/tp.jpg" alt="rdvx" /></div>
<span><img src="image/degout.jpg" alt="livret du super chat obèse" /> <img src="image/secret2.jpg" alt="rdvx" /> <img src="image/superhero.jpg" alt="rdvx" /> <img src="image/1.jpg" alt="rdvx" /> <img src="image/panda.jpg" alt="rdvx" /></span>

mon code CSS :
div
{
position: absolute;
left: 400px;
top: 50px;
}

span
{
position: absolute;
left: 400px;
top: 232px;
}
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
15 août 2011 à 17:01
Tu souhaites apparemment mettre 4 images par ligne.
Dans ce cas, il suffit de faire ceci :

<div>
    <img src="image.png" alt="Texte alter." />
    <img src="image.png" alt="Texte alter." />
    <img src="image.png" alt="Texte alter." />
    <img src="image.png" alt="Texte alter." />
    <br/>

    <img src="image.png" alt="Texte alter." />
    <img src="image.png" alt="Texte alter." />
    <img src="image.png" alt="Texte alter." />
    <img src="image.png" alt="Texte alter." />
    <br/>

    <!-- ... -->
</div>

Cependant, « <br/> » est facultatif, le retour à la ligne se fera automatiquement une fois la ligne complète.
0
Merci, enfin c'est la bonne solution et c'est beaucoup plus simple que ce que j'avais trouvé.
J'ai une autre question : Savez vous comment on peut, lorsque l'on place la souris sur une de ces images avoir une autre image qui apparaisse ?
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
15 août 2011 à 17:44
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
0