Problème IE/Mozilla

Problème IE/Mozilla - HTML/CSS - Programmation

Marsh Posté le 09-12-2006 à 09:16:29    

Bonjour,
 
au lieu d'insérer une hauteur j'ai voulu insérer la position de départ du dessus et du haut de mon div,
afin qu'il prenne toute la hauteur.
 
Ca marche avec FF mais pas sous IE,
 
quelle est la solution?
 
http://jerome.monprojet.info/Taekwondo
 

Citation :


#back
 {
 position: absolute;
top: 342px;
 bottom: 10px;
 width: 850px;
 background-image: url(images/background.gif);
 background-repeat: repeat-y;  
 }


 
Mes border aussi semblent buguer :(
 
Update: une chose étrange se passe lorsque j'ouvre mon fichier css sous IE (qui l'ouvre alors dans FrontPage), le ' ; ' derriere les repeat-y ont disparu... Aussi derrière  no-repeat ...  :??:  :??:  :??:  :??:  :??:  :??:  :??:  :??:  :??:


Message édité par jeromeke le 09-12-2006 à 09:46:00
Reply

Marsh Posté le 09-12-2006 à 09:16:29   

Reply

Marsh Posté le 09-12-2006 à 09:41:33    

En CSS, le ';' de la dernière propriété n'est pas une obligation. C'est pour cette raison qu'il n'y en a pas nécessairement lorsque tu utilises un attribut style juste pour une propriété dans une balise.
 
Pour visualiser le résultat de ta page aussi bien dans IE que dans Firefox, pense à mettre quelques chose à afficher dans tes div, ne serait-ce qu'une espace insécable ou un caractère. Là il n'y a rien, ça peut parfois poser problème, y compris sur les éléments positionnés en absolu.
 
Autre remarque : évite les div à outrance et profite du fait que certains éléments sont de type block pour les positionner (comme pour tes menus).

Reply

Marsh Posté le 09-12-2006 à 09:52:13    

Merci!
 
J'ai mis des espaces mais ça ne semble toujours pas marcher...
Je trouve ça aussi bizarre qu'il fait un repeat-y pour une dizaines de pixels sous IE et qu'il s'arrête ensuite :/


Message édité par jeromeke le 09-12-2006 à 09:52:30
Reply

Marsh Posté le 09-12-2006 à 09:54:27    

Espace insécable :
& n b s p ;

Reply

Marsh Posté le 09-12-2006 à 09:57:36    

Je pensais que quand il sagissait que d'une seule espace on pouvait bêtement tapper espace?
 
J'ai mis   : même résultat :(


Message édité par jeromeke le 09-12-2006 à 10:05:20
Reply

Marsh Posté le 09-12-2006 à 10:00:45    

Pourquoi tu as tout positionné en absolu ?

Reply

Marsh Posté le 09-12-2006 à 10:04:48    

Euuuuh, c'est comme ça qu'on apprend à l'école :/
Positionner en absolut donc à partir du parent element précédent: le body, non?

Reply

Marsh Posté le 09-12-2006 à 10:16:27    

En positionnement absolu, ton élément sort du flux pour être positionné par rapport à son conteneur parent, l'élément body dans ton cas.
En fait, le positionnement en absolu est une mauvaise habitude puisqu'elle reprend la logique de positionnement par tableau qui est à banir maintenant.
 
Dans la pratique, les éléments de type block s'affichant les uns en dessous des autres : lorsque tu affiches deux paragraphes (de type block donc), le second se place sous le premier et pas à la suite.
En utilisant cette propriété, tu peux parfaitement positionner des éléments sans avoir recours au positionnement absolu, lequel je rappelle sort l'élément du flux de lecture.
 
Exemple concret : tu utilises une balise div appelée menu pour y mettre surement un menu, menu qui sera en fait une liste non ordonnées, donc une balise ul encadrant des balises li.
ul est un élément de type block, tu n'as donc pas besoin de passer par un conteneur div et tu peux écrire <ul id="menu"> et affecter des propriétés à cet élément.
 
Le risque avec le positionnement absolu est de multiplier à outrance les balise div qui n'ont sémantiquement aucun sens.
En gros, tu remplaces tes balises td de tablleau par des conteneurs. Et si c'est ce qui est enseigné, c'est fort regrettable.
 
Essaie pour visualiser ton problème de mettre des espaces insécables dans toutes tes balises div et accessoirement, affecte une couleur de fond différente pour chacun histoire de bien comprendre ce qui se passe.
A l'occasion, sous FF, tu peux utiliser l'add-on web developer dispo sur le site de Mozilla.

Reply

Marsh Posté le 09-12-2006 à 10:22:41    

Merci beaucoup! Je vais essayer tout ça ce week-end!
 
Oui je viens d'apprendre les divs (j'utilisais que des tableaux au par avant), c'est pas façile pour commencer avec tous les problèmes d'affichage :(
 
A++
 

Reply

Marsh Posté le 10-12-2006 à 22:48:55    

Bonjour, j'ai essayé de résoudre mon problème ce weekend en utilisant le moins de position: absolute possible et en travaillant avec des margin mais tout se déplace et il n'y a plus de structure... Je suis perdu...  
 
Quelqu'un pourrait me mettre sur la bonne piste?


Message édité par jeromeke le 10-12-2006 à 22:52:29
Reply

Marsh Posté le 10-12-2006 à 22:48:55   

Reply

Marsh Posté le 11-12-2006 à 04:24:29    

Le probème ne se pose pas avec IE7...
 
Quand je mets dans mon code juste le left-border avec un background-repeat: repeat-y ça ne marche pas non plus...
 

Citation :

<!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>
<link rel="stylesheet" type="text/css" href="taekwondo.css" />
<title>TAEKWONDO HWARANG LANDEN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
 
<div id="left-border"></div>
 
 
</body>
</html>


Message édité par jeromeke le 11-12-2006 à 04:24:49
Reply

Marsh Posté le 26-12-2006 à 16:40:08    

Le background normallement occupe la totalité du contenu. Etant donné que tu n'as rien dedans, il s'affiche pas. Essaye d'utiliser la propriéte height à la place de bottom (tu peux mettre même height:90%)

Reply

Marsh Posté le 26-12-2006 à 16:50:03    

Sinon, tu peux utiliser un petit javascript qui calcule en fonction de la hauteur de ta fenetre , la hauteur de ton bloc .
css:
 
#bloc {...}
 
<head>
<script type="text/javascript">
 
window.onload = setHeight;
window.onresize = setHeight;
 
<!--
function getWindowHeight() {
   var windowHeight = 0;
   if (typeof(window.innerHeight) == 'number') { // Netscape
    windowHeight = window.innerHeight;
   }
   else {
    if (document.documentElement && document.documentElement.clientHeight) {
     windowHeight = document.documentElement.clientHeight;
    }
    else {
     if (document.body && document.body.offsetHeight) { //client
      windowHeight = document.body.offsetHeight;
     }
    }
   }
   return windowHeight;
  }
 
 function setHeight(){
  var windowHeight=getWindowHeight();
  var blocElement=document.getElementById('bloc');
   
  blocElement.style.height=(windowHeight-30)+'px'; //si par exemple tu as une entete de 30px
}
 
//-->
</script>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed