28172 sujets

CSS et mise en forme, CSS3

Bordure et balise object (IE8)

IE8.0 met une bordure grise de 1px autour du contenu de la balise object et je ne parviens pas à la supprimer.
Le DOCTYPE est en XHTML 1.0 Strict
La CSS pour object est avec margin: 0px; padding: 0px et border: none
(PS: si cela a déjà été traité, merci de m'indiquer un lien car je n'ai pas trouvé, y compris dans les CCS types)
Et voici pour le code simplifié:

Ce qui va être dans OBJECT:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
    <title>Bandeau</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="language" content="fr" />
    <meta http-equiv="Content-Language" content="fr" />

    <link rel="stylesheet" type="text/css" href="./Styles/essaiS.css" media="screen" />

</head>

<body>
Bandeau 
</body>
</html>


Ce qui appelle OBJECT:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
    <title>Page principale</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="language" content="fr" />
    <meta http-equiv="Content-Language" content="fr" />

    <link rel="stylesheet" type="text/css" href="./Styles/essaiS.css" media="screen" />

</head>

<body>
  <object class="bandeau" type="text/html" data="bdo0.htm"></object>
  <div class="menuh">
      Menu
  </div>
Suite
</body>
</html>



Et enfin la CSS

html
  {font-size: 100%; with: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: none; overflow: auto}
body
  {font-family: "Georgia", serif; font-size: 1.0em; font-weight: 200; color:#000000; background: #F8F4FF; width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: none; overflow: auto}
div, img, object
  {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: none}

/* entete */
object.bandeau
  {display: block; width: 95%; height: 94px; margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; border: none}

/* Menu haut sous le bandeau */
div.menuh
  {display: block; clear: both; font-family: "Arial", sans-serif; font-size: 1.0em; font-weight: 200; background: #DBD4FF; min-width: 1000px; height: 56px}


Merci
Bonjour/bonsoir

peut-etre peut tu essayer de positionner la balise object dans un div .
  <div class="bandeau"><object class="bandeau" type="text/html" data="bdo0.htm"></object></div>


Dimensionne ce div comme tu le fait pour object et positionne le en marge automatique , adjoint lui un : overflow:hidden et un position:relative;

Pour object:

position:absolute;
width:100%;
height:100%;
top:0;left:0;


Pour cibler IE7 et IE8 (a verifier dans IE6 , mais les border:none a html et body devraient deja suffirent ) , passer ces régles de preference via le commentaires conditionnels .

object {
padding:2px;/* pas vraiment coherent , mais bon , IE l'est-il en matiere de style ? */
margin:-4px;
}


(N.B. : le clippage css marche pour IE8 avec les valeurs '100%' )

ce qui donnerait en final un code test CSS comme ceci :


div.bandeau { 
width: 95%; height: 94px;
  margin: 0px auto; 
  padding: 0px ;
  position:relative;
  overflow:hidden;
  }
object.bandeau 
  {position:absolute;
  width: 100%; 
  height: 100%;
  top:0;
  left:0;  
  padding:2px  ;
  margin:-4px;
  }


Aprés faut voir , sur de veritables pages , si ce padding ne provoque pas un d'autres soucis .

GC
sellig a écrit :
Et voici pour le code simplifié:

Ce qui va être dans OBJECT:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
    <title>Bandeau</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="language" content="fr" />
    <meta http-equiv="Content-Language" content="fr" />

    <link rel="stylesheet" type="text/css" href="./Styles/essaiS.css" media="screen" />

</head>

<body>
Bandeau 
</body>
</html>


Attention ! un document (X)HTML ne doit comporter qu'un seul doctype, un seul élément html, un seul élément head et un seul élément body. Autrement dit, comme le rappelle la définition de l'élément object dans la spécification HTML 4.01, l'élément object n'autorise comme éléments enfants que l'élément param et les éléments de bloc et en ligne. Par conséquent, ton élément object ne doit contenir, en guise de contenu alternatif, que ceci (si je reprends le bout de code que tu produis) :
<object>
  Bandeau
</object>

Toutefois, si ton contenu appelé par object est une page HTML, rien ne t'empêche d'utiliser l'élément iframe, auquel cas il faudra utiliser le doctype XHTML 1.0 transitionnel (le mode strict n'autorise pas l'utilisation de l'élément iframe). Dans ce cas, on aura le code suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
 
<head> 
    <title>Page principale</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="language" content="fr" /> 
    <meta http-equiv="Content-Language" content="fr" /> 
 
    <link rel="stylesheet" type="text/css" href="./Styles/essaiS.css" media="screen" /> 
 
</head> 
 
<body> 
  <iframe class="bandeau" src="bdo0.htm" title="Intitulé en rapport avec le contenu de la page appelée">
    <a href="bdo0.htm">lien vers la page appelée (pour les agents utilisateurs qui ne prennent pas en charge les cadres, à commencer par les robots des moteurs de recherche)</a>
  </iframe> 
  <div class="menuh"> 
      Menu 
  </div> 
Suite 
</body> 
</html>

Mais, reste à savoir ce que tu entends par « bandeau » (bandeau en Flash ? bandeau sous forme d'une simple image ?). Smiley rolleyes
Modifié par Victor BRITO (16 Oct 2009 - 10:22)
Bonsoir Victor,

Merci beaucoup Victor, j'étais passé à côté de ce problème fondamental dans mon cas (faudra pas le répéter!).
Justement le fond du pb est de rester en "strict".
Je m'explique: l'environnement de ce problème "technique" est la reprise d'un site en "frame", dont les utilisateurs veulent conserver la présentation (en plus: pas de javascript, pas de php, du html et du css point.)
Le bandeau d'origine est du HTML, avec image, titre et date de mise à jour générale du site(pas de flash). Ce "frame-bandeau" est repris sur la totalité des fenêtres, une quarantaine au total.
Or l'avantage du frame, en l'occurence, était de ne faire qu'une fois la mise à jour du pgm HTML pour la date.
Si la piste object n'est pas bonne ... je me vois mal proposer une solution qui implique (en dehors de la refonte du découpage des programmes) une maintenance régulière sur plusieurs page pour une même information!

Faire sauter les "frames" ne va pas être si facile! aie aie aie html5!!!
En attendant si qn a une piste d'analyse ... !
Étant donné les précisions que tu viens d'apporter (le fait que ton bandeau correspond à un simple header), tu n'as donc besoin ni de l'élément iframe ni de l'élément object. Il suffit juste d'insérer le code HTML correspondant au bandeau, comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">  
<head>  
    <title>Page principale</title>  
  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <meta name="language" content="fr" />  
    <meta http-equiv="Content-Language" content="fr" />
    <link rel="stylesheet" type="text/css" href="./Styles/essaiS.css" media="screen" />
</head>  
  
<body>  
  <!-- Bandeau -->
  <div id="bandeau">
    <h1><img src="image-du-bandeau.png" alt="Intitulé du site" /></h1>
    <p>Site mis à jour le 18 octobre 2009</p>
  </div>  
  <div class="menuh">  
      Menu  
  </div>  
Suite  
</body>  
</html>

Pour que le bandeau soit repris sur la totalité des pages, tout en facilitant sa maintenance, il faudra que tu utilises PHP, qui permet l'inclusion du code contenu dans un fichier dans un autre (grâce à la fonction include (), notamment). Dans ton cas, ça donnera, par exemple :
fichier bandeau.html
  <!-- Bandeau -->
  <div id="bandeau">
    <h1><img src="image-du-bandeau.png" alt="Intitulé du site" /></h1>
    <p>Site mis à jour le 18 octobre 2009</p>
  </div>

fichier index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">  
<head>  
    <title>Page principale</title>  
  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <meta name="language" content="fr" />  
    <meta http-equiv="Content-Language" content="fr" />
    <link rel="stylesheet" type="text/css" href="./Styles/essaiS.css" media="screen" />
</head>  
  
<body>  
<?php include ('bandeau.html'); ?>  
  <div class="menuh">  
      Menu  
  </div>  
Suite  
</body>  
</html>

Tu peux avantageusement reproduire l'opération pour d'autres parties de page, comme le menu ou le pied de page.

Si tu ne maîtrises pas le PHP, je te conseille d'aller faire un tour sur le site PHP Débutant et de parcourir les tutos du menu de droite (plus particulièrement celui sur les pseudo-frames). Smiley cligne
Victor,

Je te remercie, pour l'include php (j'avais proposé cette piste), mais le pb c'est que je n'ai droit ni à javascript ni à php, uniquement du html et du css!!! (j'aurai dû le mettre en gras dans mon post précédent).
Et là je tourne en rond!
Sujet clos
Aller à