Calques qui ce font pas la males :)

Calques qui ce font pas la males :) - HTML/CSS - Programmation

Marsh Posté le 09-07-2002 à 01:38:03    

Comment ce site fait t'il pour bien gérer les calques comme ca ? http://www.adrenalyn.net/
 
(Je parle de la zone au centre et de celle en haut a gauche)
 
Moi quand je place un calque sur une page et que je redimentionne la page, les calques ce deplacent et ca fait n'importe quoi.... :(
 
Quelqu'un pourrait me mettre sur une piste ?


---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D
Reply

Marsh Posté le 09-07-2002 à 01:38:03   

Reply

Marsh Posté le 09-07-2002 à 02:04:34    

il suffit de regarder le code... Le site utilise des <iframe> placés dans des <div> en positionnement absolu.

Reply

Marsh Posté le 09-07-2002 à 13:26:30    

pourtant j'ai testé, j'ai pris leur code et je l'ai mis sur une nouvelle page et ca fonctionne pas


---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D
Reply

Marsh Posté le 09-07-2002 à 13:32:28    

Fais voir le code/site.

Reply

Marsh Posté le 09-07-2002 à 13:38:28    

ben je fait juste des tests en local, je prend une partie de leur code et je le test sur une autre page


---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D
Reply

Marsh Posté le 09-07-2002 à 13:41:01    

y'a toujours des sites que je visite et je me demande : mais comment le mec a fait pour faire ca ?
 
c'est comme ce site http://www.jaco-online.net/newsite [...] ontact.php
 
Comment le mec a fait ? on dirai qu'il y a un cadre en haut et en bas je sait pas trop mais ca fait vraiment bien


---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D
Reply

Marsh Posté le 09-07-2002 à 13:44:46    

Dans ce dernier cas c'est des frames.
 
Si tu ne montres pas ton code je ne vois pas trop comment t'aider...

Reply

Marsh Posté le 09-07-2002 à 13:51:19    

je viens de trouver pour les calques, en faite des que je centre les tableaux y'a pu rien qui va,
 
dans cette exemple ca fonctionne :
 

Code :
  1. <table width="745" border="1">
  2.   <tr>
  3.     <td> </td>
  4.   </tr>
  5.   <tr>
  6.     <td>
  7.       <div id="Layer1" style="position:absolute; width:734px; height:170px; z-index:1; left: 15px; top: 46px; overflow: scroll">
  8.         <p>kuykuykuykuykuy r gre gert r et r ety re</p>
  9.         <p> </p>
  10.         <p>trtet ert ret r t ert re t</p>
  11.         <p>t</p>
  12.         <p>r</p>
  13.         <p> </p>
  14.         <p> </p>
  15.         <p> </p>
  16.         <p>t r et er t r terte</p>
  17.       </div>
  18.       <p> </p>
  19.       <p> </p>
  20.       <p> </p>
  21.       <p> </p>
  22.       <p> </p>
  23.     </td>
  24.   </tr>
  25.   <tr>
  26.     <td height="22"> </td>
  27.   </tr>
  28. </table>


---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D
Reply

Marsh Posté le 09-07-2002 à 14:15:40    

OK, dans ce cas, pas besoin de positionnement absolu.
 
Le code nettoyé :

 <table>
    <tr>
      <td> </td>
    </tr>
    <tr>
      <td>
        <div id="Layer1">
          <p>kuykuykuykuykuy r gre gert r et r ety re</p>
          <p> </p>
          <p>trtet ert ret r t ert re t</p>
          <p>t</p>
          <p>r</p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p>t r et er t r terte</p>
        </div>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </td>
    </tr>
    <tr>
      <td class="bas"> </td>
    </tr>
  </table>


Et les styles qui vont bien :

table {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #000000;
}
td {
  border: 1px solid #000000;
}
td.bas {
  height: 22px;
}
div#Layer1 {
  width: 734px;
  height: 170px;
  overflow: scroll;
  z-index: 1;
}

Reply

Marsh Posté le 09-07-2002 à 15:00:45    

mais comme tu peut le voir le tableau n'est pas centré... Si je le centre, et que je centre le calque aussi, la ca fonctionne plus....
 
et tu aurait une idée de comment faut faire pour virer le scroll horizontale ?


---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D
Reply

Marsh Posté le 09-07-2002 à 15:00:45   

Reply

Marsh Posté le 09-07-2002 à 15:05:25    

Dans le code que j'ai mis, le tableau est centré grâce à ces 2 propriétés CSS :
 
table {
 margin-left: auto;
 margin-right: auto;
}
 
Testé rapidement avec IE6 et Mozilla.

Reply

Marsh Posté le 09-07-2002 à 15:09:29    

Bon, je mets le code HTML complet que j'ai utilisé. Le DOCTYPE au début est important, sinon IE6 ne centre pas le tableau (c'est peut-être le problème que tu as eu) :

<!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-1" />
<title>Test layers/tableaux</title>
<style type="text/css">
table {
 margin-left: auto;
 margin-right: auto;
 border: 1px solid #000000;
}
td {
 border: 1px solid #000000;
}
td.bas {
 height: 22px;
}
div#Layer1 {
 width: 734px;
 height: 170px;
 overflow: scroll;
 z-index: 1;
}
</style>
</head>
 
<body>
  <table>
    <tr>
      <td> </td>
    </tr>
    <tr>
      <td>
        <div id="Layer1">
          <p>kuykuykuykuykuy r gre gert r et r ety re</p>
          <p> </p>
          <p>trtet ert ret r t ert re t</p>
          <p>t</p>
          <p>r</p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p>t r et er t r terte</p>
        </div>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </td>
    </tr>
    <tr>
      <td class="bas"> </td>
    </tr>
  </table>
</body>
 
</html>


C'est du XHTML mais ça peut s'adapter facilement en HTML 4.01


Message édité par gm_superstar le 09-07-2002 à 15:10:58
Reply

Marsh Posté le 09-07-2002 à 20:58:17    

Deja je te remercie beaucoup de m'avoir aidé !
 
 
Ensuite je vais encore t'embeter :) Tu serait comment virer le scroll horizontal ?


---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D
Reply

Marsh Posté le 09-07-2002 à 21:18:29    

ok j'ai trouvé tous seul, fallait mettre auto au lieu de scroll.... J'te reremercie @+


---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D
Reply

Marsh Posté le 09-07-2002 à 21:22:04    

Essaye overflow: auto; Si le contenu de ton <div> ne dépasse pas la largeur de celui-ci les barres ne devraient pas apparaître.
 
Sinon, pour que la barre horizontale n'apparaisse jamais tu peux utiliser overflow-x: hidden; mais ça ne marche qu'avec IE 5 et +

Reply

Marsh Posté le 09-07-2002 à 21:23:40    

DeaD_J a écrit a écrit :

ok j'ai trouvé tous seul, fallait mettre auto au lieu de scroll.... J'te reremercie @+


:)

Reply

Sujets relatifs:

Leave a Replay

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