Placer des images ou on veut dans un bloc

Salut,

Voilà j'ai pas trouvé en cherchant partout...
(oui je sais, ne me dites pas, au lieu d'écrire des bêtises au bar... t'aurais pu chercher mieux...)
... s'il y a moyen de placer dans un bloc des images où l'on veut sans avoir recours a un autre bloc que l'on placerait en positionnement absolu dans le premier cité.

En bref: les seules limites de

<img src:">

ce sont width et high ?

Pour préciser les choses: on imagine in bloc avec une photo que l'on insére avec la balise "img", car elle ne sera insérée que sur une seule page du site (donc on evite d'alourdir la CSS), mais on veut pouvoir ecrire par dessus cette photo, par exemple, où la placer un en haut à gauche du bloc.... par exemple...
Modifié par Vajra (13 Jan 2006 - 21:15)

bonjour,

La réponse est oui on peut, il suffit que ton block référent soit au minimum en position:relative;

ensuite tu mets tes images en position:absolute;

Par contre je ne me souviens plus s'il faut prendre la précaution de mettre les imges en display:block; à vérifier donc.
Modifié par clb56 (13 Jan 2006 - 21:20)

Salut,

En utilisant le positionnement en absolu, on place des éléments de type "block".

Comme à la base, la balise "img" est de type inline, on la force à devenir block avec un display:block;

Pandore a écrit :


En utilisant le positionnement en absolu, on place des éléments de type "block".

Comme à la base, la balise "img" est de type inline, on la force à devenir block avec un display:block;

Mouaip... Comme les assertions évidentes et non testées m'agacent toujours au plus haut point j'ai pris quelques secondes pour vérifier ce que je laissais en suspend (ben ouè moi quand je ne suis pas sur je laisse en suspend).

Effectivement il n'y a pas besoin de préciser le display:block; à la balise img pour que la propriété position s'applique. Je pense que c'est comme pour la propriété float, à partir du moment où elle s'applique l'élément concerné prend un comportement Block quelque soit son type.

P.S.

<modération />
Modifié par Laurent Denis (14 Jan 2006 - 05:30)

Bonjour,

Se reporter à CSS2.1, "relations entre display, position et float". En résumé :
- si position absolue (ou fixe) : float devient none et display devient block sauf pour les éléments <table> et les éléments en display:table, et sauf pour les éléments <li>ou en display: list-item.
- si float : mêmes règles pour la valeur de display.

Merci, faut que je fasse des essais, j'essaye avec

<div id="toto"><p>bla bla bla<div style="background-image: url
 http://www.toto/toto.jpg);
 
background-position: 100px 200px;
background-repeat: no-repeat;"</div></p></div>

c'est peut être plus simple à gerer quand pour chaque page il ya une photo differente a placer pas au même endroit...?

De plus le texte s'affiche nécessairement par dessus l'image ainsi...

sinon il ya toujours moyen avec

img classe="xxx" alt="xxx" src="xxx"

je pense...
aie clb56, pas sur la tête!

Modifié par Vajra (14 Jan 2006 - 12:33)

Vajra a écrit :
Merci, faut que je fasse des essais, j'essaye avec

<div id="toto"><p>bla bla bla<div style="background-...

je pense...
aie clb56, pas sur la tête!

Si, sur la tête, et plusieurs fois même : HTML invalide et contenu inaccessible hors CSS. Mécréant !

Je ne comprend pas...

Qu'est ce qui motive le passage d'une question sur le positionnement d'une image codée en dur dans le document à cette même image traitée comme valeur d'une propriétés background. Y a t'il eu de ton point de vue un changement de statut de cette image ? Car il n'y a que ça qui soit légitime comme motivation.

Ce que l'on fait dans cette situation ne doit pas l'être en vue d'un confort ou d'un effet mais uniquement à partir de nécessité ou de choix concernant le document html lui même.

Aie pas valide... c'est vrai que ce matin j'ai testé cela vite fait, ca marchait bien sur IE , bien sur... lol!

clb56: ca me paraissait plus souple ainsi: pas besoin d'avoir une reference dans la css, une reference qui ne servirait qu'à une seule page du site... et en rajouter d'autres pour les autres pages... (en utilisant ".class" par exemple...)

avec "background" je pouvais placer pusieurs images en toile de fond là où je voulais dans mon bloc, et bien entendu, en toile de fond, ca veut dire que le texte contenu dans le bloc s'affichait par dessus l'image, ca suivait le changement de résolution, etc.. mais c'est pas valide...
Modifié par Vajra (14 Jan 2006 - 12:55)

Mais non ce n'est pas le sujet. Pour être valide il suffit de mettre un span à la place du div que tu à inséré dans ton <p>.

Ou bien en allègeant tout ça le span lui même ne sert sans doute à rien puisque tu peux styler avec background le div qui lui contient ton <p>. Et ça t'évitera une balise vide au passage.

Mais la question n'est pas là. Il s'agit simplement de savoir quel est le rapport entre le texte compris dans <p> et l'image elle même. Soit celle ci est simplement décorative et dans ce cas la solution css est absolument non problématique. Soit le texte parle de l'image et dans ce cas celle ci doit absolument être présente en dur dans le document via <img src...
Modifié par clb56 (14 Jan 2006 - 13:02)

Ok.
L'image est decorative.

Laurent Denis soulignait le fait que le contenu risquait d'être innaccessible hors css...

le probleme de styler le div avec le background, c'est que le div est présent dans chaque page, mais le background de chaque page doit pouvoir changer... en image et en position...

span: ça va pas mettre l'image en toile de fond simplement sur le paragraphe ?
Modifié par Vajra (14 Jan 2006 - 14:06)

1. une balise inline mise en display:block; devient en terme de comportement css à peu près équivalente à une balise de type block (cette assertion méritant sans doute quelques précautions).

2. j'insiste sur le fait que quoiqu'il en soit cette balise insérée dans le <p> n'est pas nécessaire, et sans doute inutile, pour ce que tu sembles vouloir obtenir. tu peux très bien styler directement le div conteneur de ton paragraphe. Il est même possible de styler directement le paragraphe lui même et du coup d'enlever aussi le div s'il n'a d'autre fonction que de contenir ledit paragraphe et rien d'autre. T'imagines l'allègement de code auquel tu serais rendu .

Bon cela étant dit si tu veux qu'on aille plus loin, tu as la charge de présenter un exemple de document un peu complet. Soit sous forme de code soit, mieux, une page en ligne. Parce qu'en fait les css ça n'a finalement, et initialement, de sens que par rapport à un document html conséquent. Tout le reste n'est qu'une évocation vague et source d'erreur de ce point.

<edit>

moi a écrit :

Tout le reste n'est qu'une évocation vague et source d'erreur

Et aussi de certaines maladies : divites et spanites aigues notamment.
</edit>
Modifié par clb56 (14 Jan 2006 - 14:24)

clb56 a écrit :
1. une balise inline mise en display:block; devient en terme de comportement css à peu près équivalente à une balise de type block (cette assertion méritant sans doute quelques précautions).

Disons, très rapidement, qu'elle devient inline à l'extérieur et block à l'intérieur.

Laurent Denis a écrit :


Disons, très rapidement, qu'elle devient inline à l'extérieur et block à l'intérieur.

Merci pour l'info "tac au tac"

c'est vrai, au passage, que c'est un sujet très intéressant. J'ai déjà remarqué, mais sans approfondir , des choses assez remarquables (car offrant pas mal de possibilités) concernant les balises block mise en comportement inline (de mémoire défaillante cela touchait au margin top et bottom notamment, je crois que la propriété perdure)
Modifié par clb56 (14 Jan 2006 - 14:32)

Touta fait d'accord, mais ce que je peux te montrer, ce n'est qu'un brouillon... pas validé, pas beau, etc.. etc..,
les photos sont pas encore choisies, les couleurs non plus, etc...

je cherche a placer dans le bloc "centre 2" une image en toile de fond différente à chaque page sur laquelle vient s'afficher le texte...
Ici

J'ai fait plusieurs essais, puis abandonné, j'ai regardé les tutos de Raphael pour le display block, etc... css zen garden, mais en général la solution proposée est un background dans un bloc identifié dans la css si je m'abuse, en ce qui concerne zen garden...

Vajra a écrit :


Laurent Denis soulignait le fait que le contenu risquait d'être innaccessible hors css...

Et c'est bien pour cela qu'il fallait éclaircir la question du statut de ton image (une image décorative n'étant justement pas du contenu)

ben tu n'a que l'embarras du choix

tu peux mettre ton image en background

soit de #centre2

soit du premier h2 que tu peux identifier comme #first_h2

soit de l'élément qui suit directement cet h2 que tu peux identifier comme #after_first_h2. (dans le document que tu montres il s'agit d'un h3 mais sait on jamais dans une autre page ça pourrait être un <p> par exemple)

Bon c'est sur que la troisième solution est un peu allumée et tout à fait dans mon genre mais au moins ça indique que c'est possible.

Pour y arriver tu peux jouer sur tout : position relative ou absolute, z-index margin négatives combinées avec des padding libérant la place pour ton image...

clb56 a écrit :
Mouaip... Comme les assertions évidentes et non testées m'agacent toujours au plus haut point j'ai pris quelques secondes pour vérifier ce que je laissais en suspend (ben ouè moi quand je ne suis pas sur je laisse en suspend).

...

m'ouais, pour ta gouverne, c'est ce que j'ai fait lol.

a écrit :
Le positionnement absolu : il nous permet de placer un block n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre etc...)

Etant donné l'heure tardive, je n'ai pas poussé le vice jusqu'à lancé mon bloc-note pour tester ça. Car pour tout te dire, tous les jours je fais un relevé de mes compteurs wanadoo à minuit et après dodo. Car sinon le lendemain, il faut des allumettes en dessous des paupières lol Se coucher tard et se lever tôt ne font pas bon ménage ! J'ai fais un dernier saut sur le forum d'Alsa pour voir si quelqu'un avait trouvé une solution à mon problème (j'attends toujours d'ailleurs ... ) et j'ai vu ce topic. Ma source n'était visiblement pas complète ...

M'enfin, je ne suis pas rancunier du tout, la vie est trop courte pour ce genre de connerie et je mettrais ça sur le compte de la fatigue vu l'heure très tardive de ton intervention ( 14 Jan 2006 - 01:25:47 ). Sans rancune du tout

En tous cas merci Laurent Denis pour le lien, c'est très complet !!!

Ce topic m'a permis de savoir que le positionnement en absolu s'appliquait aussi aux inline. ça sert aussi à ça les forums, à apprendre

En tout cas, clb56, le problme, si je ne m'abuse, c'est qu'avec les solutions que tu proposes et qui sont pertinentes, je dois definir le backround dans la CSS, ce que je voudrais éviter

Ce que je veux éviter est un paradoxe dans le cadre (sans faire de mauvais jeu de mot) des CSS: séparer le contenu de la forme , or c'est vrai que ce que je veux faire, c'est intervenir dans le html pour enjoliver

Pour ça que Laurent Denis a sans doute utiliser le mot "mécréant"

Je viens de styler le backround en faisant:

<div id="centre2" style="background-image: url(http:"");
	background-position: 100px 200px;
	background-repeat: no-repeat;>

ç'est conforme?

Mais pour placer plus d'une image?

En tout cas, j'avais des problemes avec FF, donc je l'ai resinstallé que tantôt, et ouap! l'image du site elle est toute bizarre chez moi avec FF et chez vous?

Quelqu'un sait comment desinstaller FF completement, c'est à dire que si on desinstalle et reinstalle FF, y a un truc qui reste car il reprend les marques pages et les extensions! Je voudrais refaire une inslle propre (autre topic?)

Merci pour votre aide en tout cas
Modifié par Vajra (14 Jan 2006 - 22:35)

Au fait, dans le bloc concerné, j'ai dejà un background de prévu pour faire un effet ombre portée sur la droite, et je voulais placer une autre image sur la gauche en bacgkround...