28221 sujets

CSS et mise en forme, CSS3

Largeur et positionnement absolu, qui est dans le vrai?

Voila, je cherchais à créer un schéma de génération d'agenda et j'avais créer la maquette suivante:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns='http://www.w3.org/1999/xhtml'> 
<head> 
<meta http-equiv='content-Type' content='text/html; charset=iso-8859-15' /> 
<title>Test</title> 
<style type="text/css"> 
body { 
  font-size: 11px; 
} 
table { 
  width:600px; 
  border-collapse: collapse; 
} 
tr.unworked td.content { 
  background: #678; 
} 
tr.worked td.content { 
  background-color: #CEC; 
} 
td { 
  border: 1px solid black; 
  height: 13px; 
  z-index:1; 
  padding: 0; 
  position: relative; 
} 
td.hour { 
  width: 32px; 
  text-align: center; 
  vertical-align: middle; 
  background-color: lightgrey; 
} 
#first { 
  height: 53px; 
  border: 1px solid orange; 
  z-index:2; 
} 
#second { 
  height: 25px; 
  border: 1px solid red; 
  z-index:3; 
} 
#thirdth { 
  height: 25px; 
  border: 1px solid orange; 
  z-index:4; 
} 
#first, #second, #thirdth { 
  background: white; 
  border-left-width: 4px; 
  padding: 0 4px; 
  width: 552px;  
  position: absolute; 
} 
</style> 
</head> 
<body> 
<table> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">1</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">2</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">3</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">4</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">5</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">6</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">7</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">8</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">9</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">10</td> 
  <td class="content"><div id="first">De 10 à 12</div></td> 
 </tr> 
 <tr class="worked"> 
  <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">11</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
  <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">12</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">13</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"><div id="second">De 13h30 à 14h30</div></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">14</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">15</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">16</td> 
  <td class="content"><div id="thirdth">De 16 à 17</div></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">17</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="worked"> 
   <td rowspan="2" class="hour">18</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="worked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">19</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">20</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">21</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">22</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">23</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
  <tr class="unworked"> 
   <td rowspan="2" class="hour">24</td> 
  <td class="content"></td> 
 </tr> 
 <tr class="unworked"> 
   <td class="content"></td> 
 </tr> 
</table> 
</body> 
</html>


Sous IE, le résultat est un peu foireux, mais je m'y attendais. Par contre, sous firefox 1.0, c'est tout aussi catastrophique (mais dans un autre genre), tandis que sous Opera, le redu est celui escompté.

J'ai beau relire mon code et regarder les spec CSS, je ne vois pas ce que j'aurais pu foirer. Alors je vous sousmet la chose en espérant que vous pourrez me dire si l'un des browsers a raison, et, si ce n'est pas opera, pourquoi.
Administrateur
Effectivement, je viens de reprendre le code et rien ne paraît suspect Smiley confus
C'est plutôt curieux. Il faudrait voir avec un exemple plus simple, pour faire des tests.
bonjour,

moi je trouve certains codes étranges
genre balise td avec z-index et position :relative

si tu enleves ça, je pense que cela va se presenter un peu mieux

de plus les cellules d'un tableau s'effondrent si elles n'ont pas de contenu,
donc toutes tes cellules < td class="content"> disparaissent sous firefox
insere un &nbsp; dans une cellule,
Administrateur
Je ne suis pas sûr, Alfredwallace.

- il me semble que z-index n'est pas pris en compte sur les positionnements non absolus (absolute et fixed), donc il ne devrait pas avoir d'incidence ici.
- le problème des contenus de cellule se posait à l'époque de NN4 je crois. De plus, chaque cellule a une largeur et hauteur précisées ici.

En tout cas, Gizmo n'a rien à perdre à essayer Smiley cligne
- le z-index doit être pris en compte pour tous les éléments, quelque soit le mode de display. Seulement, cela a effectivement rarement une incidence pour les éléments dans le flut courant.

- la hauteur des cellules est spécifé et c'est cela qui doit primer, même sur la hauteur ou la présence d'un quelconque caractère inséré dans ces cellules.
Administrateur
Après vérif, les z-index s'appliquent à tous les éléments positionnés (donc relatif, absolu et fixé).

Et après tests, cela fonctionne effectivement très bien sur les positions relatives.

Bref, ça n'avance pas le schmilblick Smiley ohwell
Raphaël a écrit :

Bref, ça n'avance pas le schmilblick Smiley ohwell

Oui mais même, j'avais raison lol !!!!!!!!!!!!!!!!
Non, non je me la pète pas du tout Smiley lol

Pour ce qui est de la gestion de calendrier (grosso modo c'est ça), je peux t'indiquer ce lien par contre :
http://www.sutekidane.net/blog/14-afficher-calendrier-php-css.html

Peut être qu'en brodant dessus, il y a moyen de faire ce que tu veux... enfin je suis même pas certain d'avoir capté le problème mais bon ....
euh, ouais, mais non. Ce qui était intéressant ici, c'est la fonction agenda avec étalement visuel des rdv. le lien que tu donnes ne permet pas cela du tout.
Wé, je me doutais bien que ça corredpondait pas à ce que tu voulais, mais au cas où Smiley cligne

T'aurais pas un exemple en ligne de ton truc, parcequ'à vrai dire, j'imagine pas vraiment ce que ça donne Smiley confus
non, pas encore d'exemple, c'est un juste un prototype non fonctionnel. Si le bug est confirmé, je trouverai un autre système.
Bah tu as dû tester sur une page pour te rendre compte du bug, donc une version en ligne nous permettrais de mieux cerner le problème, et voir s'il y a des solutions Smiley cligne
Sujet clos
Aller à