Positionnement "responsive" d'un texte |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
ap314
Newbie Depuis le: 18 Mai 2011 Pays: France Status: Inactif Points: 6 |
Options des messages
Thanks(0)
Envoyé : 03 Feb 2020 à 10:05 |
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"
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
|
|
jjb1
Senior Member Depuis le: 27 Feb 2013 Pays: France Status: Inactif Points: 848 |
Options des messages
Thanks(0)
|
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).
|
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Options des messages
Thanks(0)
|
Petite erreur de syntaxe:
J'ai ajouté le and et enlevé le ; entre 80% et !important Edité par Hobby001 - 03 Feb 2020 à 14:37 |
|
ap314
Newbie Depuis le: 18 Mai 2011 Pays: France Status: Inactif Points: 6 |
Options des messages
Thanks(0)
|
(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
|
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |