27611 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai un petit soucis de conception, je dois entourer une image avec du texte, la consigne principale est que je n'ai ni le droit aux float ni au display:flex. Du coup je bloque.
J'ignore si c'est mon html qui le fait pas ou le css.

<section>                    
<figure>
                        <img src="img/globule.jpg" alt="globule">
                        <figcaption>Gluon du globule</figcaption>
                    </figure>
                    <p class="fig-text">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit enim animi tempore mollitia. Minima, dolore magnam. Debitis facere quae error blanditiis dolorum incidunt eos cumque hic, sed perferendis voluptatem harum.
                        Nemo minima facilis sint nulla aperiam fugiat accusamus ea obcaecati ex molestias culpa dicta omnis, enim provident praesentium perferendis unde nihil aliquam labore ipsam beatae. Corporis explicabo praesentium magni unde?
                        Mollitia eius sint culpa, tenetur reprehenderit ratione facilis molestias blanditiis impedit velit! Repellat, aliquam. Ad ipsam ipsum consectetur sint, illum dolor distinctio, quam odit asperiores delectus temporibus animi, debitis sunt.
                        Pariatur necessitatibus, id esse iste dolorum, facere illum nulla neque magnam debitis, fugit labore. Laborum eligendi provident libero ad minima ex molestiae quia velit, autem cum, perferendis placeat saepe ut?
                        Repudiandae itaque dicta fugiat id, voluptas at doloremque. Libero rem at iure aliquam repudiandae adipisci saepe reprehenderit fugit culpa, aperiam nostrum quasi vel voluptate inventore omnis nihil ad. Qui, necessitatibus.
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit earum nesciunt consequatur, est mollitia, esse debitis veniam dolore corrupti dicta magnam iusto libero placeat perferendis minus tempora deleniti, sapiente consequuntur?
                        Odio ea sed, officiis excepturi soluta sapiente exercitationem enim error placeat harum earum, veniam temporibus. Inventore est officiis optio fuga et! Officiis consequatur voluptatibus ducimus culpa blanditiis quibusdam soluta debitis?
                    </p>
                </section>


.second-section figure {
    margin-left: -40px;
    width: 50%;
}

.second-section img {
    width: 100%;
    box-shadow: 5px 5px 10px #ccc, 0 -5px 10px #ccc;
}

.second-section figcaption {
    margin-left: 6em;
    color: #777;
    text-align: center;
    font-size: 12px;
    font-style: italic;
}


La marge négative sur ma figure est dû à display: table qui est utilisé plus haut.
192.168.l.l routerlogin 192.168.0.1
Merci d'avance.
Modifié par vuzopi (11 Nov 2021 - 01:30)
Salut,

pourquoi se priver de float ou flexbox ? S'agit-il du piège d'un prof de techno en collège ? Ou alors il y a une autre possibilité que j'ignore ? float est si facile d'utilisation.

Ta question ressemble en gros à "je dois aller à Tokyo la semaine prochaine mais je n'ai le droit d'utiliser ni l'avion, ni le bateau. Comment je fais ?"

Le sujet a été largement abordé ici : https://forum.alsacreations.com/topic-4-57230-1-Entoureruneimagepardutexte.html
Modifié par Bongota (23 Oct 2021 - 21:08)
Modérateur
Mais où est passé vuzopi ?

vuzopi a écrit :
Bonjour,

j'ai un petit soucis de conception, je dois entourer une image avec du texte, la consigne principale est que je n'ai ni le droit aux float ni au display:flex. Du coup je bloque.
J'ignore si c'est mon html qui le fait pas ou le css.


Une consigne sans le contexte des cours que tu viens d'avoir ne sert pas à grand chose pour t'orienter du bon coté à part de débattre sur une consigne qui peut paraitre loufoque.

Entourer une image avec du texte , okay, mais plus précisément. elle se trouve où cette image par rapport aux textes ? en plein milieu, en haut d'une colonne ? apparemment il y aurait du display : table ; (inspiré d'un cours ?) Est ce que cela implique un affichage en colonne de ton texte avec l'image dans l'une de ces colonnes ?

Si des colonnes sont impliquées et que tu as si peu de texte, peut-être que le cours voulait t'amener à découvrir les Column CSS ? https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Columns

Ce serait bien , si tu repassais, que tu clarifie un peu le contexte et que tu indiques quelles solutions devaient être mise en place.

Cdt
Merci pour ce lien et l’information dessus @kerlutinoec, ça m’est d’une grande aide.