Rechercher : dans
Par :

Positionner une image dans une page html

Dernière réponse le 5 jui 2009 à 11:27:14 Cbast7, le 4 jui 2009 à 13:45:26 
 Signaler ce message aux modérateurs

Bonjour,

J'aimerais donc placer une images dans une page html , c'est à dire la positionner à l'endroit voulu ,dans mon cas sa serais à coté d'un texte et non pas en bas de la page. comment faire svp?

Configuration: Windows XP
Firefox 3.0.11

Meilleures réponses pour « positionner une image dans une page html » dans :
[Aspirateur de pages HTML] Comment aspirer un site Web ? VoirHTTrack est un excellent aspirateur, gratuit en licence GNU GPL (libre). HTTrack permet de télécharger un site web d'Internet vers votre disque dur, en construisant récursivement tous les répertoires, récupérant html, images et fichiers du serveur...
Javascript - Centrer verticalement une page web VoirPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du fichier...
On peut cacher le code source d'une page HTML VoirMythe: On peut cacher le code source d'une page HTML. Réalité: FAUX. Explications: Pour pouvoir afficher une page web (HTML), le navigateur doit - à un moment où un autre - avoir le code HTML en clair. Il y a donc toujours moyen de le...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Structure d'un document HTML VoirNotion de document HTML Une page HTML est un simple fichier contenant du texte formatté avec des balises HTML. Par convention l'extension donnée au fichier est .htm ou .html, mais une page web peut potentiellement porter n'importe quelle...

1

madmyke, le 4 jui 2009 à 13:49:17

Bonjour,
Il suffit d'utiliser des cadres, divisez votre pages en cadres et placer vos images dans un cadre et le texte dans l'autre. Conseil:Soyez PRECIS et COMPLET dans la description du probl­ème pour avoir une réponse rapide.
Relisez la charte elle peut vous aider à comprendre "comment ça marche".

Répondre à madmyke

2

Cbast7, le 4 jui 2009 à 13:55:19

Comment sa ? c'est à dire que mon image je la mets entre <div> et </div> mais ensuite j'ai pas compris , je fais quoi aprés sa?

Répondre à Cbast7

3

monkey_monk, le 4 jui 2009 à 14:01:08

Voici un exemple pour ce que tu demandes :


[HTML]

<img class="left" src="image.jpg" width="225" height="150" alt="" title="" />
<h2>Un sous-titre.</h2>
<p>Un paragraphe.</p>


[CSS]

.left { float:left; margin:0 10px 0 20px; } // marge = haut,droite,bas,gauche



Bonne journée.

[Monkey Monk]

Répondre à monkey_monk

4

Cbast7, le 4 jui 2009 à 14:03:07

Ok merci mais c'est quoi déja le code que je doit inserer pour dire au html que j'utilise une feuille css ? car il faut mettre sa aussi nan?

Répondre à Cbast7

5

monkey_monk, le 4 jui 2009 à 14:07:41

<link rel="stylesheet" type="text/css" media="all" href="style.css" />


à mettre entre <head> et </head>.
[Monkey Monk]

Répondre à monkey_monk

6

monkey_monk, le 4 jui 2009 à 14:11:32

Remarque, pour faire plus simple tu peux faire :

<img class="left" src="image.jpg" width="225" height="150" alt="" title="" style="float:left;margin:0 10px 0 20px;" />


[Monkey Monk]

Répondre à monkey_monk

7

Cbast7, le 4 jui 2009 à 14:15:41

Oui , je prefere travailler avec le css , cela va m'en apprendre d'avantage mais si je voit que je lutte un peu biensure je ferais avec ce code là =)

Répondre à Cbast7

8

monkey_monk, le 4 jui 2009 à 14:19:39

Le dernier code que je t'ai donné n'est effectivement pas "très beau"... il vaut mieux travailler en séparant les éléments.

Amuse-toi bien alors ! ;)
[Monkey Monk]

Répondre à monkey_monk

9

Cbast7, le 4 jui 2009 à 14:21:26

Bon en faite j'ai utilise ton dernier code le plus simple, et j'arrive bien a la déplace de gauche a droite , mais j'arrive pas du tout a la faire monter, quel valeur changer?

Répondre à Cbast7

10

monkey_monk, le 4 jui 2009 à 14:24:16

Je suppose que tu utilises les marges... celà donne margin:haut,droite,bas,gauche;

Essaye d'augmenter la marge du bas pour faire monter ton image.
[Monkey Monk]

Répondre à monkey_monk

11

Cbast7, le 4 jui 2009 à 14:29:07

J'ai pas tout suivi dsl , je doit rajouter quelques choses au code :

<img class="left" src="image.jpg" width="225" height="150" alt="" title="" style="float:left;margin:0 10px 0 20px;" />

?

si oui , peut tu me recreer le code avec les margin stp

Répondre à Cbast7

12

monkey_monk, le 4 jui 2009 à 14:57:53

Margin:0 10px 0 20px;

marge haut = 0
marge droite = 10px
marge bas = 0
marge gauche = 20 px

[Monkey Monk]

Répondre à monkey_monk

13

Cbast7, le 4 jui 2009 à 15:40:01

Ok sa marche seulement y'a un probleme c'est que mon image je peut pas la monter plus haut que le texte ! c'est à dire qu'un moment sa bloque , et là ou sa bloque c'est parce que y'a la ligne du texte.
comment faire svp? vous pouvez allez voir sur mon site qui est http://sebastien-audiovisuel.com et voir dans l'accueil , j'aimerais que l'image soit en haut a gauche.

Répondre à Cbast7

14

monkey_monk, le 4 jui 2009 à 16:03:28

Quand tu parles de l'image, c'est la bannière en haut ? Je ne vois pas d'autre image sur ton site...
[Monkey Monk]

Répondre à monkey_monk

15

Cbast7, le 4 jui 2009 à 16:10:47

Voila maintenant tu l'a vois , car je l'avais pas upload sur le ftp , donc cette image j'aimerais quel soit en haut a gauche a coté du texte , mais comment faire? j'arive pas a la faire monter .

Répondre à Cbast7

16

monkey_monk, le 4 jui 2009 à 16:21:44

Je ne la vois toujours pas... il faut peut-être rafraichir la cache de ton server... ou attendre un peu.

Je vérifierais dans 1heure.
[Monkey Monk]

Répondre à monkey_monk

17

monkey_monk, le 4 jui 2009 à 18:06:12

Je vois enfin une images, enfin son emplacement...

Il s'agit bien de http://sebastien-audiovisuel.com/images%5Cson.jpg ?

Il suffit que tu mettes ton image (sa balise) avant ton texte et elle se mettra au-dessus du texte...

[Monkey Monk]

Répondre à monkey_monk

18

Cbast7, le 4 jui 2009 à 21:31:25

J'ai bien mis le code qui est :

<img class="left" src="images\mic.jpg" width="205" height="300" alt="" title="" style="float:left;margin:0 10px 0 30px;" />

a coté du texte , mais ceci me déplace tout mon texte sur le site , plus rien n'est centrer.

( pour info j'ai changer d'image , c'est pour sa qu'elle s'apelle mic.jpg maintenant )

Donc comment faire svp?

Répondre à Cbast7

19

monkey_monk, le 4 jui 2009 à 21:37:47

Essaye de mettre ton images comme ceci :

<img src="mic.jpg" width="205" height="300" alt="" /><br/>

Dis-moi si celà fonctionne pour toi ou non... au pire tu devras mettre ton image dans un div (<div></div>) et lui attribuer une position (par exmple : <div style="top:10px; martgin-bottom:10px;">ton image</div>)
[Monkey Monk]

Répondre à monkey_monk
Collection CommentÇaMarche.net