Bonjour
je voudrais savoir comment positionner plus de deux images en css et comment ecrire leur programme en html.je suis novis.
merci
Bonjour
je voudrais savoir comment positionner plus de deux images en css et comment ecrire leur programme en html.je suis novis.
merci
Bonjour,
Les solutions sont multiples...
Montrez-nous votre code pour préciser une réponse.
Quoi?!comment ecrire leur programme en html
Pour intégrer une image, on utilise simplement la balise IMG.
bonjour
ce que je voudrais c'est comment positionner la premiere image (drapalgerie2.jpg)
completement a droite ,la seconde(portable.jpg) completement a gauche et éventuellement une troisieme image(image.jpg) au milieu avec des (css) pour chaque image?.
voici mon html sur le <body> avec son css qui positionne les deux images a la meme position!!!
html:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 <figure> <img src="drapalgerie2.jpg" alt="drapeu du pays" /> </figure> <p> <img src="portable.jpg" alt="tel_portable" /> </p>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 img { float:right ; width:50px; height:40px; border-radius:20px; border: 1px solid #0000ff;}
merci
Bonjour taleb51,
Si vous ne connaissez pas bien HTML/CSS, ce que vous voulez faire est un peu difficile. Je vous donne donc une solution, en espérant que vous la compreniez.
Quelques remarques avant ça :
- je vous conseille de lire les tutoriels CSS de ce site;
- utilisez les bonnes balises HTML. La balise P définit un paragraphe, et FIGURE une illustration;
- l'attribut ALT doit véritablement être l'alternative textuelle de votre image. Néanmoins, si c'est un simple habillage visuel (l'image pourrait ne pas être là), laissez le ALT vide.
Ma proposition est donc :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 <!DOCTYPE html> <html dir="ltr" lang="fr-FR"> <head> <meta charset="UTF-8" /> <title>Mes images alignées.</title> <style type="text/css"> .gauche { float: left; /* À gauche et HORS du flux */ } .droite { float: right; /* À droite et HORS du flux */ } div { text-align: center; /* Tout élément DANS le flux est centré */ } div::after { content: " "; display: block; clear: both; /* Tout ce qui suit passe en-dessous */ } </style> </head> <body> <p>Avant les images...</p> <div> <img alt="Developpez.com : Club des développeurs et IT pro" class="gauche" src="http://www.developpez.net/template/images/logo.png" /> <img alt="Developpez.com : Club des développeurs et IT pro" src="http://www.developpez.net/template/images/logo.png" /> <img alt="Developpez.com : Club des développeurs et IT pro" class="droite" src="http://www.developpez.net/template/images/logo.png" /> </div> <p>Après les images...</p> </body> </html>
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager