Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Web Café > Code (JS, PHP, CSS etc.), techniques etc.
  Nouveaux messages Nouveaux messages Fil RSS  - Positionnement "responsive" d'un texte
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Positionnement "responsive" d'un texte

 Répondre Répondre
Auteur
Message
ap314 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: May 18 2011
Pays: France
Status: Inactif
Points: 6
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ap314 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Positionnement "responsive" d'un texte
    Envoyé : Feb 03 2020 à 9:05am
Bonjour, 

je souhaite créer une page qui s'adapte à la dimension du terminal sur lequel elle est visualisée.

Elle est constituée dans sa partie centrale d'un iframe permettant l'affichage d'un agenda Google et d'un texte explicatif situé à droite de l'iframe.  (http://test.rando-houdemont.fr/Test.htm)

Ce que je cherche à faire: si la largeur de la fenêtre de visualisation est inférieure à 1024px, afficher le texte sous le cadre de l'agenda en le redimensionnant 80% de la largeur de la fenêtre.

La partie agenda est définie de la façon suivante :
 - iframe avec visualisation de 855x550px  (c'est l'intégration d'un agenda Google)

Le texte est un élément multi-ligne (positionnement "par défaut" à droite de la partie Agenda):
 - Largeur : 22%
 - Hauteur: auto
 - Redimensionnement : largeur seulement
 - Classe perso : TexteC

Ces spécifications correspondent à l'affichage "par défaut". J'ai ajouté un bloc de code CSS source en position "Header"

@media only screen (max-width:1024px){
.TexteC {width:80%; !important; }
}

Lorsque je visualise la page dans une fenêtre < 1024px, le texte apparaît bien sous l'agenda, mais sa largeur reste fixée à 22% de la fenêtre et non à 80% comme souhaitée dans le bloc de code.

Pouvez vous m'aider. D'avance merci.
Bien cordialement
apP314



Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Feb 27 2013
Pays: France
Status: Inactif
Points: 626
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Feb 03 2020 à 1:03pm
Je pense qu'en rangeant vos deux éléments dans un panneau d'élément à 100% et les dimensionnant respectivement à 80% et 20%, vous pourriez régler votre problème (quitte à imposer des largeurs maxima).
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 4987
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Feb 03 2020 à 1:35pm
Petite erreur de syntaxe:


@media only screen and (max-width:1024px){
.TexteC {width:80% !important; }
}

J'ai ajouté le and et enlevé le ; entre 80% et !important 




Edité par Hobby001 - Feb 03 2020 à 1:37pm
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.
Haut de la page
ap314 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: May 18 2011
Pays: France
Status: Inactif
Points: 6
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer ap314 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Feb 03 2020 à 4:21pm
(re)bonjour.

Merci à Hobby001 et JJB1 pour vos réponses.

Je viens de tester la solution de Hobby001 (erreur de syntaxe) : cela fonctionne très bien.  

En ce qui concerne la proposition de jjb1, je vais la tester pour améliorer mon expérience avec OpenElement.

Je pense toutefois retenir la correction proposée par Hobby001, car je pourrai la généraliser à d'autres pages du site beaucoup plus facilement me semble-t-il.

Un grand merci à vous deux.

bonne fin de journée,
bien cordialement

apP314



Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,032 secondes.
Acheter votre vélo en ligne