28111 sujets

CSS et mise en forme, CSS3

Placer un bloc à l'extérieur d'un bloc parent équipé d'un scrollba

Bonjour,

J'ai besoin de placer des blocs (explications locales) à gauche ou à droite du bloc parent, à l'extérieur donc de celui-ci.
(Le titre a été changé le 04/05/2021 : il était "Placer un bloc à l'extérieur d'un bloc parent", ce qui a mené à un quiproquo. La difficulté vient de ce je veux placer un bloc à l'extérieur d'un bloc parent équipé d'un scrollbar vertical.)

Pouvez-vous m'indiquer une solution ?

Merci d'avance de votre aide.
Modifié par Beka (04 May 2021 - 11:30)
Modérateur
Bonjour bonjour,

Je n'arrive pas bien a saisir ce que tu veux faire. Comme tu as mis le sujet dans CSS j'imagine que c'est visuellement que tu veux que le bloc fils sorte du parent, mais… pourquoi ? est-ce que tu aurais un visuel de ce que tu veux faire ? Ou un bout de code stp ?

Merci
Merci de ta réponse, Laurent

La partie centrale de ma page contient des cours de maths.

Il y a des endroits où je fournis des explications locales contenues dans des blocs aside.

Pour ne pas alourdir la lecture du texte principal, je veux pouvoir afficher ces blocs aside en marge, à gauche et à droite, de la partie centrale.
(Ces blocs aside d'explications locales sont contenus dans des sections imbriquées. Je dois donc pouvoir faire abstraction de cette imbrication, de profondeur variable, pour afficher les explications en marge.)
Salut, afin que l'on puisse répondre à ta demande, il faudrait que nous montre un extrait du code de ta page actuelle en précisant quelles infos tu souhaiterais "déplacer" dans des blocs différents.
Merci de ta réponse, MatthieuR

Voici ce dont j'ai besoin.

<body> est positionné en relatif.
La section principale est centrée sur la page à l'aide de margin-right: auto et margin-left: auto, et est dotée d'un ascenseur vertical.
Au niveau d'un paragraphe, j'insère dans le paragraphe un bloc <aside> contenant une explication locale concernant un point particulier du paragraphe.
Je veux que ce bloc s'affiche en marge droite ou en marge gauche (à l'extérieur donc de la section principale) et qu'il soit ancré au paragraphe au même niveau que celui-ci lorsque je fais défiler le texte dans la section principale.
De la même façon, j'insère dans un autre paragraphe un bloc <object> contenant une explication sommaire enregistrée sous forme de fichier html. Je veux que lui aussi soit ancré au paragraphe lorsque je fais défiler le texte.

Le code html actualisé (j'ai fait un certain nombre d'essais depuis l'envoi de mon post et ne sais plus quel était le code initial en html et en css) que j'essaie de faire marcher :

<body>
position: relative;
</body>
.
.
.
<section class="Principale">

    <p>Un paragraphe de mon cours <aside class:"Explication_locale">Explication d'un point particulier du paragraphe</aside></p>

    <p>Un autre paragraphe de mon cours <object class:"Explication_sommaire" data="url de l'explication sommaire"></object></p>

</section>


Quel positionnement dois-je attribuer à aside.Explication_locale et à object.Explication_sommaire pour obtenir l'effet escompté (si c'est possible) ?
(J'ai bien sûr essayé les positionnements absolu et relatif, ainsi que le positionnement flottant.)
Modérateur
Coucou,

Alors dans ton code :
<body>
position: relative;
</body>

je ne sais pas trop ce que tu as tenté de faire ici... la balise body doit entourer tout le code HTML. et position:relative; c'est du CSS donc ca n'a rien a faire non plus ici (sans balise style et sélecteur)

<aside class:"Explication_locale">

Pour les class c'est un = pas : (tu l'as bien écris juste avant ca doit etre un oubli Smiley ravi )

Il me semble également que le <p> ne peut pas contenir d'autre balises comme <aside>... d'aileur tu utilise une fois aside et une fois object. Tu peux utiliser des div pour englober ou des span dans les p.

Sinon pour ton soucis je vois deux solutions :

soit une position absolute sur l'explication avec un left ou une right a 100%. Mais j'y vois deux soucis : s'il n'y a pas assez de marge sur les cotés ca va sortir de l'écran déclencher des scroll horizontaux etc et si le text d'explication est plus court que le contenu ca va chevaucher le texte : https://jsfiddle.net/undless/L6dvxmf4/

sinon tu peux les mettre cote a cote dans le DOM ca fait plutôt un genre de colonne mais ca sera peut etre plus simple à gérer : https://jsfiddle.net/undless/L6dvxmf4/16/


Bonne journée
Bonjour Laurent,

Merci d'avoir consacré un moment tardif de nuit pour me répondre. Smiley smile

« je ne sais pas trop ce que tu as tenté de faire ici... la balise body doit entourer tout le code HTML. et position:relative; c'est du CSS donc ca n'a rien a faire non plus ici (sans balise style et sélecteur) »
Je voulais juste montrer de façon raccourcie que j'avais placé <body> en positionnement relatif pour qu'il soit le seul parent positionné. (Mais il l'est, semble-t-il, de fait.).
Bien évidemment, j'ai placé position: relative; dans le css !

« Pour les class c'est un = pas : (tu l'as bien écris juste avant ca doit etre un oubli Smiley ravi ) »
Oui, en saisissant le post. (Pas dans le code réel.)

« Il me semble également que le <p> ne peut pas contenir d'autre balises comme <aside>... »
Si, si ! Cela fonctionne tout à fait ! Smiley smile
D'autre part, je suis devenu très "raphaëlien" et utilise systématiquement des balises de structuration pour structurer mon texte. (J'utilise les div pour, par exemple, regrouper des paragraphes consécutifs ayant les mêmes caractéristiques.)

L'approche Flex est intéressante à étudier. Je vais acheter tantôt le livre de Raphaël pour m'y plonger, sans doute avec délectation.

Ce que je veux néanmoins réaliser, c'est que les aside et les object se déplacent avec le paragraphe auquel ils sont associés lorsque je fais défiler verticalement le texte.

Dans la mesure où je conçois pour l'instant ma version de travail pour visualiser la structuration des (très) nombreuses pages que je compte écrire, je vais simplement laisser dans un premier temps les explications locales (aside) et les explications générales (object) dans le texte.

De toute façon, vu la technicité de mon "cahier des charges", je compte adresser prochainement une demande d'estimation de coût à Alsa (l'agence !).

Bonne journée de début de semaine à tous !
Modérateur
Beka a écrit :
« Il me semble également que le <p> ne peut pas contenir d'autre balises comme <aside>... »
Si, si ! Cela fonctionne tout à fait ! Smiley smile
D'autre part, je suis devenu très "raphaëlien" et utilise systématiquement des balises de structuration pour structurer mon texte. (J'utilise les div pour, par exemple, regrouper des paragraphes consécutifs ayant les mêmes caractéristiques.)

c'est très bien d'utiliser les balises de structurations mais il y a quand meme des règles a respecter. La balise <p> https://dev.w3.org/html5/spec-LC/grouping-content.html#the-p-element ne peut contenir que des éléments de type "Phrasing content" définis ici : https://dev.w3.org/html5/spec-LC/content-models.html#phrasing-content-0

Si tu fais le test : https://jsfiddle.net/undless/je5w7ymz/ tu peux voir que la fermeture du bloc <p> se met en rouge pour montrer une erreur et dans la parti résultat, si tu explore le code tu peux voir que ca s'est transformé en :
<section class="Principale">
    <p>Un paragraphe de mon cours </p><aside>Explication d'un point particulier du paragraphe</aside><p></p>
    <p>Un autre paragraphe de mon cours <object data="url de l'explication sommaire"></object></p>
</section>

Et ca, ca peut te foirer un mise en page assez rapidement.

Beka a écrit :
Ce que je veux néanmoins réaliser, c'est que les aside et les object se déplacent avec le paragraphe auquel ils sont associés lorsque je fais défiler verticalement le texte.

Et bien c'est le cas dans mes deux exemples... non ?

Bonne journée Smiley smile
Beka a écrit :
« Il me semble également que le &lt;p&gt; ne peut pas contenir d'autre balises comme &lt;aside&gt;... »
Si, si ! Cela fonctionne tout à fait ! Smiley smile

Tu peux aussi passer sur les validateurs du w3c pour te convaincre que non (même si les navigateurs sont permissifs)

Beka a écrit :
L'approche Flex est intéressante à étudier.

Jette un œil à ces deux ressources :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/

Beka a écrit :
Dans la mesure où je conçois pour l'instant ma version de travail pour visualiser la structuration des (très) nombreuses pages que je compte écrire, je vais simplement laisser dans un premier temps les explications locales (aside) et les explications générales (object) dans le texte.

En fait, la vrais question est de savoir ce que tu veux comme UX, car malgré tout, la mise en page conditionne le code html.
As tu fais un wireframe, une maquette ?
Pan sur le bec !

Promis, je n'abuserai plus de la permissivité des navigateurs (je travaille sur Chrome) et vais sagement placer les aside et les object à leur place en tant que blocs. Smiley biggrin

Je me suis mal exprimé : je veux, si c'est possible, que les explications locales (aside) et les explications générales (object) soient placés à gauche et à droite de la section principale, mais en regard du paragraphe du texte principal qui précède, et qu'elles défilent vers le bas ou vers le haut avec le texte, en restant toujours en regard du paragraphe auquel elles sont liées.

Or les solutions proposées les placent à gauche et à droite, mais en-haut (ou en-bas par défaut) de la section principale, ce qui ne m'apporte pas grand chose, d'autant plus qu'une page peut contenir un certain nombre (une dizaine, une vingtaine...) d'explications.

De plus, la section principale peut contenir beaucoup de texte avant et après une explication, et une explication peut se trouver à un niveau d'imbrication plus ou moins important. (Par exemple, l'explication que je teste se trouve dans un item de liste, seulement au troisième niveau d'imbrication.)

Je vais donc revenir pour ma version de travail à ma solution première (paragraphe, bloc aside et/ou object dans le flux), qui me permet tout à fait de vérifier dans un premier temps la bonne structuration de mes cours.
Je verrai plus tard pour les différentes sophistications que je prévois, et que je soumettrai en détail lors de ma demande d'estimation de coût.

« En fait, la vrais question est de savoir ce que tu veux comme UX, car malgré tout, la mise en page conditionne le code html.
As tu fais un wireframe, une maquette ? »

UX ?

Non, je suis encore loin de la pré-maquette.
Pour l'instant, ma préoccupation est de convertir mes (volumineux) manuscrits en code, sans autres utilisateurs que moi-même.
Modérateur
Beka a écrit :
Je me suis mal exprimé : je veux, si c'est possible, que les explications locales (aside) et les explications générales (object) soient placés à gauche et à droite de la section principale, mais en regard du paragraphe du texte principal qui précède, et qu'elles défilent vers le bas ou vers le haut avec le texte, en restant toujours en regard du paragraphe auquel elles sont liées.

Or les solutions proposées les placent à gauche et à droite, mais en-haut (ou en-bas par défaut) de la section principale, ce qui ne m'apporte pas grand chose, d'autant plus qu'une page peut contenir un certain nombre (une dizaine, une vingtaine...) d'explications.


Mmmmm non tu t'es bien exprimé... peut être que j'ai mal compris mais nos exemples respectent bien ce que tu dis. Les explications se trouve au niveau de chaque <p> et défilent avec la page quand on scroll... as-tu bien regardé les liens ? je t'ai rajouté du texte dans les paragraphes pour que ca soit plus flagrant... : https://jsfiddle.net/7nr9wzbf/

ou alors je ne comprend clairement pas le "en regard de chaque paragraphe"...
Merci de ta réponse, Laurent,

Je viens de comprendre la différence de compréhension : ce que je veux, c'est que les blocs d'explication soient à l'extérieur de la zone contenant l'ascenseur et que, lorsque je fais défiler le texte à l'aide de l'ascenseur, les blocs suivent le paragraphe auquel ils sont attachés.

Dans vos exemple, les blocs sont à l'intérieur de la zone avec ascenseur.

Je ne vous aurais pas dérangés si c'était ce que je voulais, car il n'y a effectivement pas de véritable difficulté technique.

Je joins une copie d'écran recomposée montrant ce que je veux obtenir : lorsque je déplace l'ascenseur, les deux blocs se déplacent aussi.
Modifié par Beka (04 May 2021 - 10:18)
Le bloc de droite a été placé pour essai et n'a pas de rapport avec le texte.
Modérateur
Bonjour,
overflow:auto ; si il y a des enfants à l'extérieur, il ne seront pas visibles (not overflow:visible Smiley decu ). Pour ce que tu veux faire, il va falloir te servir de JavaScript pour recréer une barre de défilement et la synchroniser avec ta page.

En gros, CSS ne peut pas le faire, overflow:auto/visible sont distincts.

Cdt,
GC

<edit> exemple pour la synchro des scroll de deux éléments https://codepen.io/gc-nomade/pen/qBZvoZe?editors=0010 (ce n'est pas la partie la plus compliqué, c'est comment tu géres ta structure HTML et ou tu ajoute une boite qui ne montre que sa scrollbar)

possible bidouille en exemple https://codepen.io/gc-nomade/pen/yLMBMre ... mais bof Smiley smile
Modifié par gcyrillus (04 May 2021 - 16:56)
Modérateur
Beka a écrit :
Je viens de comprendre la différence de compréhension : ce que je veux, c'est que les blocs d'explication soient à l'extérieur de la zone contenant l'ascenseur et que, lorsque je fais défiler le texte à l'aide de l'ascenseur, les blocs suivent le paragraphe auquel ils sont attachés.
Dans vos exemple, les blocs sont à l'intérieur de la zone avec ascenseur.

Oh WOW effectivement c'est moi qui ai mal saisi toutes mes excuses. Il me manquait la nuance de l'ascenseur.

Beka a écrit :
Je ne vous aurais pas dérangés si c'était ce que je voulais, car il n'y a effectivement pas de véritable difficulté technique.

Ca ne dérange personne et il y a des post pour beaucoup moins que ça Smiley lol

Beka a écrit :
Je joins une copie d'écran recomposée montrant ce que je veux obtenir : lorsque je déplace l'ascenseur, les deux blocs se déplacent aussi.

Effectivement avec la capture c'est beaucoup plus clair... par contre ca me parrait tellement irreel que je n'y ai meme pas pensé. Pourquoi vouloir faire ca plutôt qu'un block sur toute la largeur ? Et surtout quand on scroll comment apparaissent disparaissent les tips sur les cotés ? Ils disparaissent au niveau du haut et du bas du bloc qui a l'ascenseur ?

Sinon gcyrillus a tout dit
Merci gcyrillus et Laurent de vos réponse et de m'avoir montré que ce que je veux à terme obtenir est réalisable. (J'ai notamment apprécié le second exemple et ne sais pas, pour l'instant du moins, en quoi il est bidouilleux et bof. Smiley smile )

Je me doutais bien que ce n'était pas possible en css mais que cela le serait en js.

« Pourquoi vouloir faire ca plutôt qu'un block sur toute la largeur ? »
Parce que je travaille sur un écran de 28", que mon attention de relecture est concentrée sur la partie centrale (celle avec ce fameux ascenseur Smiley smile , et que j'en ai marre d'avoir en permanence à dissocier mon attention entre la zone que je lis et le bord droit de mon écran où le se trouve l'ascenseur de la page.
Et aussi parce que je suis par nature rebelle aux formats par trop standard qu'on impose comme des dogmes sans approche alternative possible.

« Et surtout quand on scroll comment apparaissent disparaissent les tips sur les cotés ? Ils disparaissent au niveau du haut et du bas du bloc qui a l'ascenseur ? »
C'est effectivement ce que je prévois.

Merci encore de votre implication.
Boris
Modérateur
Beka a écrit :
Merci gcyrillus et Laurent de vos réponse et de m'avoir montré que ce que je veux à terme obtenir est réalisable. (J'ai notamment apprécié le second exemple et ne sais pas, pour l'instant du moins, en quoi il est bidouilleux et bof. Smiley smile )


Il est bidouilleux dans le sens ou le JavaScript et moi ne sommes pas vraiment familier, puis que le scroll à partir de la barre ajouté n'est pas vraiment aussi fluide qu'il le devrait avec la molette . Coté ergonomie , je ne suis personnellement pas satisfait.
Beka a écrit :

Merci encore de votre implication.
Boris



De rien, c'est avec plaisir lorsque nous sommes disponibles.
Bonne soirée.

<edit> petite correction du js et ajout de onresize pour remettre la barre de scroll à jour.
Modifié par gcyrillus (04 May 2021 - 21:43)
« Il est bidouilleux dans le sens ou le JavaScript et moi ne sommes pas vraiment familier, puis que le scroll à partir de la barre ajouté n'est pas vraiment aussi fluide qu'il le devrait avec la molette . Coté ergonomie , je ne suis personnellement pas satisfait. »

Mais c'est une ébauche tout à fait prometteuse qui sera affinée en temps voulu.
Merci !

Bonne soirée également !
Sujet clos
Aller à