28200 sujets

CSS et mise en forme, CSS3

[Résolu] Grid css et redimensionnement

Bonjour,

J'utilise le système de grid pour intégrer une page.
J'ai superposé le bloc de droite sur le bloc de gauche(20%).
Et un texte collé à gauche du bloc de droite verticalement.
Et un paragraphe centrer sur bloc gauche.

Voici le code: https://jsfiddle.net/whrtodgv/

Le souci c'est que quand je redimensionne la page le texte vertical se décale à chaque fois vers la droite Smiley ohwell . Est ce que je dois faire plusieurs media queries pour replacer le texte.
Ou bien est ce que vous avec une autre solution ?

Merci de votre aide,
Administrateur
Bonjour,

je n'ai pas regardé comment était décalé actuellement le texte (et si le fait que l'image à droite n'occupait pas toute la largeur pouvait jouer) mais je te propose de définir une autre grille : disons 8 colonnes avec tes images occupant 4 colonnes (1 à 5 et 5 à 9===-1) et le texte explicitement placé en colonne 4 (ou 3).
Chaque élément placé dans la grille doit bien entendu être un grid item donc enfant (direct) du grid container actuel
Merci pour la réponse.

L'image occupe bien toute la largeur de l'espace il a un widhth:100%;
J'ai mis mis le deuxième bloc en position relative avec un left: -170px;. pour superposé l'image de droite sur celui de gauche.

Le souci c'est que les éléments qui sont à l’intérieur du bloc de droite ne restent pas en place lorsque je redimensionne l'écrans les éléments h1 et p se déplace sur tous l'écrans. Alors que ils sont bien dans une balise div qui encapsule le tout.

Une solution ? Smiley biggrin
Modifié par dop10 (13 Dec 2019 - 19:08)
Administrateur
Ah le blanc à droite c'est après décalage de 20% vers la gauche de l'image de droite, et cette dernière fait bien toute la largeur, ok.

Je voyais le titre sur l'image de gauche dans le Fiddle, mais après changement de la largeur c'est plus clair Smiley smile

Ce à quoi je pensais c'est https://jsfiddle.net/mp9cuon0/

Dans le code HTML, le titre h1 est sorti de son parent et vient avant la 2e image (parce qu'il doit rester avant le paragraphe de texte sinon ça veut rien dire…

La grille devient une grille de 10 colonnes et 1fr est "amélioré" en minmax(0, 1fr) (grosse astuce pour que ce soit VRAIMENT 1fr / 10 colonnes de même largeur qqsoit le contenu. Bizarre et super compliqué mais c'est comme ça)

L'image 1, le titre et l'image 2 sont explicitement placés en rangée 1, dans la colonne qui va bien et pour les images s'étalent sur 5 colonnes.
On ne veut pas de l'auto-placement (ça remplace avantageusement le positionnement absolu).
Un problème restant : comme le titre vient avant la 2e image dans le code HTML, il est recouvert par celle-ci. z-index: 1; le fait passer au-dessus (yep z-index fonctionne avec Grid Layout).

Comme les transformations de 90deg fichent le brin (la largeur devient la hauteur et réciproquement) et que je voulais ajouter un fond translucide au titre pour le rendre lisible, ces transformations sont remplacées par "writing-mode" de haut en bas, de droite à gauche (il n'existe pas de gauche à droite ou alors avec une valeur non standard que seul Firefox reconnaît doooonc on tourne de 180deg et c'est bon Smiley smile ). Ça ça n'inverse pas X et Y

*{
.container {
    display: grid;
   grid-template-columns: repeat(10, minmax(0, 1fr)) ;
   grid-template-rows: 100% ; 
    /*grid-gap: 10px;*/
}


#one {
  grid-column: 1 / span 5;
  grid-row: 1; 
}

#two{
  position: relative;
  grid-column: 6 / span 5;
  grid-row: 1;
}

.container h1 {
    grid-column: 6;
    grid-row: 1;
    z-index: 1;
    writing-mode: tb-rl;
    transform: rotate(180deg);
    padding-right: 1rem; /* à gauche après rotation */
    background-color: rgba(255, 255, 255, 0.7);
   
}
Meilleure solution
Modérateur
bonsoir,

pour les rotation de texte, tu peut te servir de writing-mode. Flex peut aussi être utile ici pour ne pas avoir a se soucier de la hauteur du parent.

ex: https://jsfiddle.net/xpbLhye9/

édit , oups pas vue les derniers echanges.
Modifié par gcyrillus (13 Dec 2019 - 20:05)
Sujet clos
Aller à