28172 sujets

CSS et mise en forme, CSS3

Intégrer image dans une autre balise

Bonjour à tous,

Je bloque sur 2 choses en css et j'aurais besoin d'aide svp, je débute et j'ai beau chercher je ne trouve pas la solution.

Je vais tenter d'expliquer clairement, alors voila:
premièrement:
mon <body> comporte un <article> et un <aside> plus loin.
Dans mon aside j'ai deux éléments : des <p> et une image.
vu que mon aside aide à la compréhention de mon article, je voudrais placer l'image à l'intérieur de la balise <article> (en float : right;)
Est-il possible de placer mon image (en float: right;) à l'intérieur de la balise <article> ? (en laissant l'image dans <aside> dans mon code html)

Deuxièmement:
Admettons que j'arrive à placer mon image comme je veux.
Serait il possible de placer ensuite mes <p> de <aside> à l'intérieur de l'image <aside> (elle meme située dans <article> en float: right;) ?

J'espère que je me suis bien exprimé et je vous remercie d'avance !
En fait le premier point ou je bloque est évitable dans la mesure où ce sont mes <p> de aside qui illustrent mon <article> car la photo est juste un cadre.
du coup au pire je place ma photo directement dans article en float,right;
(cependant s'il y avait une solution pour faire comme je voulais faire a la base je veux bien la connaitre ! Smiley biggrin )
Par contre, concernant mon deuxième problème il est essentiel que je trouve une solution. (pour placer mes <p> dans une image d'une autre balise)

J'attends impatiemment vos réponses ! Smiley smile merci d'avance !
hmm!Pas très clair
Peux tu nous faire une image, même mal faite, montrant ce que tu veux obtenir?

Dans ma pratique personnelle , un ensemble texte + image qui se correspondent sont dans une balise <figure>.

Par exemple

<figure>
    <img src="mon-image.png" alt = "belle image!">
    <figcaption>
            <!-- mettre ici le texte, soit directement, 
                   soit sous la forme de plusieurs balises
                  par exemple: -->
           <h3>L'image du siècle !</h3>
           <p>On voit dans l'image ci-contre .....blablabla...</p>
    </figcaption>

le positionnement de l'image par rapport au texte (ou du texte par rapport à l'image) se fait en CSS.

On peut mettre bien entendu une <figure> dans un <article> et positionner la <figure> où l'on veut dans l'article avec du CSS.

Voici un exemple de ce mécanisme dans le site où je suis le "conseiller technique": la Newsletter de novembre https://www.osirisnet.net/news/n_11_18.htm?fr
En utilisant l'outil de développement du navigateur, on voit facilement comment c'est fait.

Chaque rubrique de cette Newsletter est un <article>.
Dans chaque article, il y a
- un <header> qui contient un <h2> pour le titre et, au dessous, un <p> qui contient le texte
- deux <section>, une en français et l'autre en anglais.
- un <footer> qui contient les liens vers d'autres articles disponibles sur Internet qui ont servi de base à l'auteur pour écrire son article

Les images à gauche et à droite sont des <figure>, même si la plupart d'entre elles ne comportent pas de texte. L'article intitulé "Une école en grec dans une Égypte sous contrôle de Rome" contient plusieurs <figure> avec texte.

Dans le premier article, entre les deux sections "linguistiques" il y a un bloc de 4 images, réalisé comme suit

<figure class="cluster ...> <!-- le groupe en soi -->
  <figcaption>Photo de la nouvelle tombe...</figcaption>
  <figure> <!-- contient la première image et le texte "paroi" --></figure>
  <figure> <!-- 2ème image --></figure>
  ...
</figure>

Pour simplifier le travail de l'auteur, il dispose de "snippets" à remplir, lesquels font appel à des scripts. Si j'étais moi même l'auteur je pense que j'aurai fait plus simple dans l'outillage permettant de fabriquer ces éléments (en particulier j'aurais fait ça en php plutôt qu'avec des snippets html et du javascript), mais le résultat serait le même.
Sujet clos
Aller à