[RESOLU]Page responsive et thème w3ss
Bonjour j'utilise le thème W3css qui est responsive pour ma page statique http://wendling.xyz/static12/16-17-cdt-essai j'utilise le calendrier http://www.luxsoft.eu/index.php?pge=dtail
Je l'ai incorporé grâce à la balise object avec des dimensions heigth et weight fixe je ne sais pas comment la rendre responsive. Auriez-vous une idée à ce sujet ? En vous remerciant.
Je l'ai incorporé grâce à la balise object avec des dimensions heigth et weight fixe je ne sais pas comment la rendre responsive. Auriez-vous une idée à ce sujet ? En vous remerciant.
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
<object width="100%" height="600" data="http://wendling.xyz/cal/?cal=mycal"; type="text/html"></object>
mais pour obtenir une page full responsive, la question à se poser est de savoir si le calendrier l'est lui-même
Sur ta page de test, la balise <objet> est elle même contenue dans une <section> contenue dans un <article>, etc.
Chemin html jusqu'au calendrier : /html/body/main/section(1)/article/section(2)/object
Le thème que tu utilises est responsive et comporte 2 colonnes dont chacune des largeurs varie en fonction de la résolution de l'écran
<html>et <body> n'ont pas de largeur définie -> c'est 100% par défaut
<main> a une largeur de 100%
<section(1)> a une largeur variable, définie par les classes "w3-col l8 s12"
<article> et <section(2)>n'ont pas de largeur définie -> c'est 100% par défaut
si <objet> a une largeur de 100%, quelle est la largeur du calendrier ? pour simplifier celle de <section(1)>
(je ne prends pas en compte les margin et padding éventuels)
[list=*]
[*]si résolution écran < 600px : largeur section(1) = 100% et donc largeur calendrier = max 600px[/*]
[*]si résolution écran 601px<>993px : largeur section(1) = 66.6667% et donc largeur calendrier = résolution écran *66.6667% = min 400px, max 662px[/*]
[*]si résolution écran > 994px : largeur section(1) = 66.6667% et donc largeur calendrier = résolution écran *66.6667% = min 663px (normalement dans ton thème il y a une limite max-width de 980px pour <main> avec la classe .w3-content mais elle ne semble pas être active/utilisée dans ta page, donc largeur max infinie pour le moment)
[/list]
Merci pour l'explication, je ne suis pas sûr d'avoir tout saisi mais le paragraphe "simplifier" est à ma portée.
Essayons avec la métaphore des boites.
Considère chaque balise html (<html>, <body>, <main>, <section>,<article> et <object>) comme une boite et appliquons l'axiome suivant : la taille (hauteur et largeur) d'une boite dépend de la taille de la boite qui la contient.
A cela ajoutons qu'il existe 2 types de boites : les boites ayant une taille exprimée en unité finie (pixel) et celles ayant une taille exprimée en unité relative (%)
Avec un thème responsive, il est d'usage d'utiliser les unités relatives, et la seule valeur finie connue est la résolution de l'écran. (Sinon ça va coincer à un moment
Donc le calendrier est contenu dans <objet>, contenu dans <section(2)>, contenu dans <article>, contenu dans <section(1)>, etc., contenu dans l'écran. Nous avons des largeurs exprimées en pourcentage partout, et la seule valeur finie dans tout cela est la largeur de la résolution de l'écran.