Entête flottante

[Bandit]

Bonjour,

J'utilise une ligne flottante sur un tableau (la première). Sous IE, cela fonctionne parfaitement mais sous FF, la taille des cellules de la première ligne est tronquée !?

Si quelqu'un peut m'aider à résoudre ce problème. Merci.

Code : Tout sélectionner

        <table class="tableautitle" >
<script language="javascript">
var db, ie, op, strict, entete, inity;
ie = document.all ? 1 : 0;
op = window.opera ? 1 : 0;
strict = document.compatMode ==  "CSS1Compat" ? 1 : 0;
function enteteFlottante(id) {
  db = ie&!op&&strict ? document.documentElement : document.body;
  entete = document.getElementById(id);
  entete.style.position = "absolute";
  inity = entete.offsetTop;
var table_entete = document.getElementById("first_" + id);
table_entete.style.height = entete.offsetHeight - 2*entete.childNodes[0].offsetTop;
fixEntete();
}
function fixEntete() {
  sy = ie ? db.scrollTop : pageYOffset;
  y = entete.offsetTop;
  dy = y-sy;
  if (sy > inity) {
	y = sy+parseInt(dy*.9);
  } else {
	y = inity;
  }
  entete.style.top = y+"px";
  setTimeout('fixEntete()', 20);
}
window.onload = function(){ enteteFlottante("entete_piste.composantvisuel_dboracle_entite_liste") };
</script>
<tr id='entete_piste.composantvisuel_dboracle_entite_liste'><td><div>CODE</div></td><td><div>PAYS</div></td><td><div>LIBELLE</div></td><td><div>TYPE CODE</div></td><td>UNITE></td><td><div>NIVEAU</div></td></tr>
<tr id="first_entete_piste.composantvisuel_dboracle_entite_liste">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="lignepaire" ><td><div>0161004</div></td><td><div>004</div></td><td><div>PERLE LAIT LIGNE COCO 4X110G</div></td><td><div>1</div></td><td><div>04</div></td><td><div>040401210</div></td></tr>
<tr class="ligneimpaire" ><td><div>0161007</div></td><td><div>004</div></td><td><div>YOP A BOIRE COCO 750 G.</div></td><td><div>1</div></td><td><div>04</div></td><td><div>040400807</div></td></tr>
.....
.....
....
</table>

[SB]

Tout à la fin de ton script, remplace

Code : Tout sélectionner

window.onload = function(){ enteteFlottante("entete_piste.composantvisuel_dboracle_entite_liste") };

par

Code : Tout sélectionner

window.onload = enteteFlottante("entete_piste.composantvisuel_dboracle_entite_liste");

[Bandit]

Désolé, cela ne fonctionne pas.
En effet, cette fois je n'ai plus d'entete flottante.

[SB]

Peut être ais-je mal compris ce que tu voulais. Avec ton code ça donne ça, avec la modif ça. Ce n'est pas ce que tu veux obtenir ?

[Invité]

J'ai mis le fichier complet à cette adresse :

http://80.15.217.157/soludevbuilder-web/jsp/entete.htm

C'est surement un attribut de style à positionner sur la première ligne du tableau mais lequel ?

[SB]

Ah ok j'ai compris. Mais je crains qu ton problème ne soit plus compliqué que tu ne le penses. Tu n'as pas fixé de longueur à tes colonnes qui sont donc de la longueur de leur contenu. En mettant une position:absolute à ta première ligne, FF considère que tu la sors du flux et qu'elle n'est plus soumise à la longueur du contenu du reste du tableau mais seulement à son propre contenu d'où le décalage.
A part en fixant des longueurs je ne vois pas trop comment t'en sortir.

[Bandit]

Le problème est que si je ne positionne pas position:absolute, je n'ai plus d'entete flottante.

Mais merci pour cette dernière réponse, je vais pouvoir procéder à d'autres essais car là j'étais bloquer.

[Bandit]

yo man, j'ai trouvé.

Il suffit de positionner la largeur des colonnes sur le offsetWidth avant d'appliquer le position: absolute de cette manière :

Code : Tout sélectionner

td = entete.getElementsByTagName("td");
for (i = 0; i < td.length; i++) {
  td[i].style.width = td[i].offsetWidth;
}
td = table_entete.getElementsByTagName("td");
for (i = 0; i < td.length; i++) {
  td[i].style.width = td[i].offsetWidth;
}
entete.style.position = "absolute";

et le tour est joué.

Merci encore.

[calimo]

Attention tout de même si le javascript est désactivé ça ne va pas aller. Fait bien attention à la séparation des couches contenu/style/dynamique

[ottomar]

c'est quoi flottante? c'est fixe (ton lien ne marche pas)
si c'est fixe (ne bouge pas quand tu scrolles la page) ya moyen avec le css
(j'vais encore écrire une c...)
---------

dans le css

.entete {
position: absolute;
top: 2em;
right: 1em;
width: 100%;
}
html>body .entete {
position: fixed;
}

----------
dans le html

<div class="entete">
...................
</div>

http://openweb.eu.org/articles/initiati ... nexe3.html

[Bandit]

OK, je remet le fichier sur la même adresse à savoir :
http://80.15.217.157/soludevbuilder-web/jsp/entete.htm

et non cela n'est pas fixe.

J'ai un autre tout petit problème sur le formulaire que j'ai ajouté en haut de cette page : pouquoi diable FF ne veut pas prendre en compte le style défini pour la valeur sélectionnée dans le champ de type "select" ?

Code : Tout sélectionner

<form name="form">
<table>
  <tr>
    <td class="lignepaire">Test</td>
    <td class="lignepaire">
    <div id="formselect">
    <select name="column" value="post">
      <option value="post" selected>post</option><option value="get">get</option>
    </select>
    </div>
    </td>
  </tr>
</table>
</form>

avec le style formselect défini comme suit :

Code : Tout sélectionner

#formselect option {
	font-family: verdana, arial, helvetica, sans-serif;
	width: 100%;	
	font-size: 12px;
	font-weight: bold; 
	color: #126EA4;
	background-color: #DDDDFF;
}

Avec IE c'est nickel sauf qu'il ne prend pas en compte le style bold.

[ottomar]

je crois que... (mais les spécialistes confirmeront)
---
tu t'embetes bien avec ton java pour ta barre flottante (alors qu'elle est 'fixe' en termes css)
----------
ton blème de selection
étrange de faire une 'table' pour! c'est souvent ça la cause des dif d'affichage entre ie et les autres
mais là je ne connais pas
regarde peut-etre le code-source d'une page web avec un selecteur d'apparence

[Blustuff]

Exact, la table est un peu superflue ^^ Agrandissez la div pour qu'elle fasse tooouuuut votre "Test" + Select, et donnez lui les propriété css de votre lignepaire :

Code : Tout sélectionner

<div id="formselect">Test
<select name="column" value="post">
  <option value="post" selected>post</option>
  <optionvalue="get">get</option>
</select>
</div> 

Code : Tout sélectionner

.lignepaire, #formselect
{
  ...
}

Notez aussi, que la div semblait un peu superflue. Vous auriez très bien pu donner l'id au select. L'image de fond des options ne marche que lorsque l'on déroule. Ca à l'air d'être un choix de lisibilité pour Firefox.

Enfin, la mention "Fixed" veut dire Fixé... pour l'écran, pas la page. En gros, c'est ce que vous appellez flottant. Avantage majeur de son utilisation : votre page marchera même lorsque le Javascript sera desactivé sur le client.

[ottomar]

fix' & roll'
---------
pour convaincre de la simplicité de la chose

[Blustuff]

En fait le fait qu'avec le Javascript les éléments se décalent un peu pour donner l'idée de mouvement, convainc assez de la capaciter à "flotter". ^^ C'est en fait toujours dommage pour la lisibilité du site : /