28172 sujets

CSS et mise en forme, CSS3

Background-image d'un <object> : problème FF

Bonjour

J'ai un souci. Je veux mettre en fichier externes à mes pages HTML (300 pages) un fichier avec le "fond de page". Ce dernier a une centaine de lignes et s'adapte en fonction de l'environnement (media queries). Je n'en ai gardé qu'un petit bout de fichier de page et qu'une seule ligne du fichier externe pour l'exemple, ce qui évidemment donne une solution un peu ridicule.
Voici les codes:

Fichier exemple.css
==============

body  {
    color: red;
    font-size:20px;  
    background-color:white;
    background-image:url('http://maisonsjdm.com/bluebump-prison.jpg');
  }

 .section {
    position:relative; 
    width:34em; height:25em; 
    text-align:center;
    margin-left: auto; margin-right: auto;
    margin-top: auto; margin-bottom: auto;
    border: 1px yellow solid;
  }
 .calque{
    width:inherit; height:inherit;
    display:block;
	margin: 0px; padding: 0px;
    border: 1px red dashed;
 }
 .texte {
    position:absolute; 
    margin:0px; padding:0px;
    border: 1px blue dashed;
    left : 7%; top : 10%; width: 85%; height: 76%;
 }


Fichier exemple.html
===============

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="exemple.css">
</head>
<body>
<div class="section">
<OBJECT data = "exempleFondDePage.html" type = "text/html" class="calque"></OBJECT>
<div class="texte">
<h2>Introduction</h2>
</div>
</div>
</body>
</html>


Fichier exempleFondDePage.html
========================

<link rel="stylesheet" href="exemple.css">

Ce qui ne va pas
=============

Lorsqu'on passe dans le fichier de fond de page, appelé par la balise <object>, il y a réinterprétation implicite d'un <body>, ce qui fait qu'on réinitialise le background-image en le recalant en haut à gauche du bloc de l'objet. En conséquence, le fond d'écran tuilable est cassé et donne un effet moche. On s'en aperçoit en redimensionnant la fenêtre écran.

J'ai essayé un tas de trucs : mettre des background-image:none un peu partout, mais rien n'y fait. Par contre, avec un vieil IE, ça marche... va comprendre.

[Edit :] Chrome a le même défaut que FF...

Quelqu'un a déjà vu ce problème ? Une solution ?
Modifié par 6l20 (04 Feb 2013 - 18:44)
Je croyais avoir trouvé une solution :

Mettre "opacity: 0; " dans le style de la classe ".calque"

Ca supprime bien l'image de fond décalé, mais maintenant je ne vois plus mes graphismes de fond de page...

Rajouter au fichier exempleFondDePage.html la ligne :

<div style="border: 5px black solid; border-radius: 20px; width:98%; height:96%;" />

Ce cadre à bords arrondis doit rester visible...

je patauge !

Exemple en ligne sur : http://maisonsjdm.com/test/exemple.html
Modifié par JiPe38 (04 Feb 2013 - 12:32)
Je comprend rien ce que tu raconte Smiley sweatdrop

Tu veut :
- mettre un motif qui se répète à tes pages ?
- ajouter du contenue html à d'autre page html ?
Cancre a écrit :
Je comprend rien ce que tu raconte Smiley sweatdrop

Tu veut :
- mettre un motif qui se répète à tes pages ?
- ajouter du contenue html à d'autre page html ?


Les deux. Je veux mettre un motif identique sur chacune de mes pages et pour ne pas avoir à modifier chaque page (y'en a 300) en cas de changement de ce motif, je mets ce motif dans un fichier externe que je lie par l'inclusion d'un <object>
Donc tu vas devoir quand même ajouter un <object> dans tes 300 pages ?

Du coup je comprend pas bien l'intéret d'un <object> comme, tu pourrais très bien ajouter à la place, un appel à une feuille de style spécifique, voir même ajouter le script du background directement dans la feuille existante
Bonsoir,

J'ai l'impression d'avoir abusé du jus de houblon, et j'avoue ne pas comprendre non plus la problématique Smiley confus
JiPe38 a écrit :
Je veux mettre un motif identique sur chacune de mes pages et pour ne pas avoir à modifier chaque page

Oui, c'est un peu le principe des feuilles de styles, en tout cas l'un de ses avantages...
Si le motif de fond a besoin d'être modifié, il n'y a qu'une ligne à modifier dans la feuille de styles associée à toutes tes pages (X)HTML.
Je ne vois pas non plus le besoin de l'utilisation d'une balise object, ni le besoin formulé de devoir "ajouter" du contenu dynamiquement dans votre (vos) page(s) (que l'on gérerait plus volontiers via un langage idoine).

Un schéma, une explication plus pertinente à disposition ?
Oui c'est bien le principe. Je modifie une fois pour toute mes pages pour y inclure la balise <object....> qui appelle un fichier fondDePage.html, et ensuite si je veux faire évoluer mes fonds de page je ne modifie que ce fichier. Dans d'autres langages on appelle ça "faire une macro".

Ce fichier de fond de page est complexe, car on change de fond de page suivant le type de media, avec des "media queries". Suivant que je suis sur écran (format paysage ou portrait, tailles variées), ou sur imprimante (A4, US letter, A5, format livre...), sur liseuse noir et blanc, etc... les fonds de page sont différents. Et vu le nombre de formats, faut pouvoir être réactif.
Si c'était toujours destiné à être lu en ligne, la bonne solution serait de faire ça en php. Mais ça doit pouvoir se lire hors ligne (tablettes, liseuses...), et en format epub.

Pour dire les choses plus simplement, et couper court aux spéculations sur les différentes manières de faire un site réactif à son environnement, mon souci est de faire un <object type="text/html">, qui rappelle le fichier css de sa page html ancètre, et dont le fond soit transparent. Je n'y arrive pas, et j'apprécierais le conseil si quelqu'un sait faire.
Modifié par JiPe38 (04 Feb 2013 - 18:59)
J'ai trouvé une solution. Dans mon fichier exempleFondDePage.html, je remets une définition du style pour le <body>. Dans le fichier css, sur la règle .calque, je rajoute:
background-clip: border-box;

Mais en poursuivant les tests, j'arrive sur d'autres anomalies. Les Media queries fonctionnent mal, par exemple sur un même test min-height je trouve deux valeurs différentes sur deux règles différentes, d'où un affichage délirant. En fait, je pense que le problème de fond vient du fait que dans mon <object> je réinterprète le même fichier css, et ça... le navigateur n'aime pas.

Donc je vais supprimer cet appel de fichier css dans ma "macro" et refaire localement dans ce fichiers tous les styles propres à mes fonds de page.

Là ça devrait marcher. Seul inconvénient, j'ai deux zones de style distinctes à maintenir.
Modifié par JiPe38 (05 Feb 2013 - 20:17)
Encore moi, désolé de faire les questions et les réponses, mais j'avance sur le sujet, donc mon opinion se modifie d'heure en heure. Voici mes "nouvelles "conclusions :

- Lors de la déclaration d'un <object> avec le type MIME text/html, la zone délimitée par l'objet est considérée comme une nouvelle fenêtre de navigateur, vierge au départ, et dans laquelle on construit une "page web" indépendante de la page appellante : il y a donc création d'un nouveau document, d'un nouveau DOM, en toute indépendance de l'ancien. Aucune des propriétés css de la page appellante n'est transmise à la page fille.

- Cette page fille peut redéclarer ses propres règles css, voire sans problème réutiliser le même fichier css que sa page mère. En contradiction évidemment avec mes conclusions (erronnées) précédentes.

- Pour ce qui concerne les fonds d'écran, il y a réinitialisation de la position de l'image déclarée en background-image. Seule possibilité, comme je l'ai écrit plus haut, mettre une règle background-clip sur la balise object, redéclarer un <style> body {bakground-image:none; background-color:transparent} </style>dans la page fille.

- Pour ce qui concerne les media-queries, notamment de dimension, dans l'object, elles sont relatives à la taille du bloc <object> et non à la taille de la zone d'écran du navigateur. Donc évidemment il faut les gérer spécifiquement, en rapport avec les dimensions attribuées à l'object.

J'en suis là. Si je me trompe dans ce que j'écris ci-dessus, merci au gourou qui saura me remettre dans le droit chemin...
Modifié par JiPe38 (06 Feb 2013 - 10:20)
Sujet clos
Aller à