[CSS] faire des boites... [ - Job's Done - ]

faire des boites... [ - Job's Done - ] [CSS] - HTML/CSS - Programmation

Marsh Posté le 06-12-2002 à 23:29:11    

voilà peu près ce que je veux faire, sachant que la partie contenu (ici en bleu) à une hauteur variable :  
 
http://xkamui.com.free.fr/divers/hfr/howtodo.png
 
la partie rouge reste en haut, la partie bleu varie dans sa hauteur, mais la partie verte reste en bas quelque soit la hauteur de bleu... que cette dernière prenne toute la hauteur de la page ou non...
 
voici ce que j'ai en css :  

Code :
  1. /** TABS **/
  2. .tab-main    {width: 900px; height: 100%; border-collapse: collapse;}
  3. .tab-top     {width: 886px; height: 50px; border-collapse: collapse; background-color: #F6F6F6;}
  4. .tab-menubar {width: 886px; height: 25px; border-collapse: collapse; background-image: url(../img/menubar/bgmenu.png);}
  5. .tab-content {width: 886px; height: 100%; border-collapse: collapse;}
  6. .tab-bottom  {width: 886px; height: 25px; border-collapse: collapse; background-color: #F6F6F6;}
  7. /** CELS **/
  8. /* main */
  9. .td-main-1 {width: 7px; height: 100%; padding: 0px; background-image: url(../img/index/bord-left.png);}
  10. .td-main-2 {width: 886px; height: 100%; padding: 0px; vertical-align: top; text-align: middle;}
  11. .td-main-3 {width: 7px; height: 100%; padding: 0px; background-image: url(../img/index/bord-right.png);}
  12. /* top */
  13. .td-top    {width: 886px; height: 50px; padding: 0px; vertical-align: top; text-align: middle;}
  14. /* menu */
  15. .td-extrem {width: 3px; height: 25px; padding: 0px;}
  16. .td-thumbs {width: 80px; height: 25px; padding: 0px;}
  17. /* content */
  18. .td-content{width: 886px; padding: 9px; vertical-align: top; text-align: left;}
  19. /* bottom */
  20. .td-bottom {width: 886px; height: 25px; padding: 0px; border-top: solid 1px #A5A5A5;}


 
en fait, je veux faire ça pour avoir, de chaque côté, une image qui se répéte...
 
si vous voulez le fichier html pour voir, demandez moi...


Message édité par xkamui le 09-12-2002 à 13:16:19
Reply

Marsh Posté le 06-12-2002 à 23:29:11   

Reply

Marsh Posté le 06-12-2002 à 23:35:17    

Il est évident que ceci peut être résolu facilement avec dev DIV. Par contre avec les tableaux...
 
Question : Si le contenu de la page dépasse la hauteur de l'écran, il se passe quoi avec le vert ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-12-2002 à 23:53:47    

le vert doit normalement être sous le bleu koi k'il arrive....
 

  • en ce moment, et avec le code css en question:  le vert n'apparait pas


  • si le bleu < hauteur de la page : espace entre le bas du bleu et le haut du vert, et le vert en bas de la page (bref, comme l'image)


  • si le bleu >= hauteur de la page, le vert se retrouve sous le bleu, collé à lui

Reply

Marsh Posté le 07-12-2002 à 00:00:10    

xkamui a écrit :

si le bleu >= hauteur de la page, le vert se retrouve sous le bleu, collé à lui


Y'a pas 360000 manières de faire comme ça : soit en faisant des frames, soit en utilisant la propriété position: fixed (mais ça marche pas avec IE), soit en donnant une propriété d'overflow à la partie bleue (c'est à dire que des barres de défilement apparaîtront le texte dépasse la hauteur maxi)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-12-2002 à 00:17:40    

non non, je ne veux pas que vert soit toujours toujours visible...
 
je veux qu'il soit && visible && en bas si bleu < hauteur de la page... car si bleu >= hauteur de la page, vert se pousse normalement  sous lui, et là, les scrollbar apparaissent sur tout le document

Reply

Marsh Posté le 07-12-2002 à 00:31:25    

xkamui a écrit :

non non, je ne veux pas que vert soit toujours toujours visible...
 
je veux qu'il soit && visible && en bas si bleu < hauteur de la page... car si bleu >= hauteur de la page, vert se pousse normalement  sous lui, et là, les scrollbar apparaissent sur tout le document


 
je vais laisser répondre les experts, mais je doute que cela soit possible (du moins en étant compatible IE, Mozilla et Opera).

Reply

Marsh Posté le 07-12-2002 à 00:47:35    

Hermes le Messager a écrit :

je vais laisser répondre les experts, mais je doute que cela soit possible (du moins en étant compatible IE, Mozilla et Opera).


Je confirme.
 
Il y a une condition qu'on ne peut pas résoudre actuellement : lorsqu'il n'y a pas assez de bleu le vert doit être "accroché" à l'écran (la zone de visualisation) => sa position dépend la taille de l'écran. Lorsqu'il y a trop de bleu, le vert n'est alors plus accroché en bas de l'écran => sa position ne dépend plus de l'écan.
 
Le passage de l'un à l'autre n'est pas possible (à moins de faire une usine à gaz en JS)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-12-2002 à 01:52:23    

si c'est possible !!!
j'ai trouvé !!!!!
 
en fait, il suffit de mettre les 3 lignes dans un tableau de plus...
 
merci quand même, @+

Reply

Marsh Posté le 07-12-2002 à 09:02:40    

xkamui a écrit :

si c'est possible !!!
j'ai trouvé !!!!!
 
en fait, il suffit de mettre les 3 lignes dans un tableau de plus...
 
merci quand même, @+


 
Tu as trouvé une solution soit, mais les normes nous demande de ne plus utiliser de tableau pour la mise en page!  :kaola:

Reply

Marsh Posté le 07-12-2002 à 10:47:10    

xkamui a écrit :

si c'est possible !!!
j'ai trouvé !!!!!
 
en fait, il suffit de mettre les 3 lignes dans un tableau de plus...
 
merci quand même, @+


URL ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-12-2002 à 10:47:10   

Reply

Marsh Posté le 07-12-2002 à 11:57:11    


oups oui pardon...
 
en rouge, ce qu'il fallait ajouter :
 

Code :
  1. <html>
  2. <head>
  3. <title>xkamui.com v.5</title>
  4. <link rel="stylesheet" href="http://xkamui.com.free.fr/v5/style/main.css" type="text/css"/>
  5. </head>
  6. <body>
  7. <table class="tab-main" summary="tab-main">
  8. <tr>
  9.   <td class="td-main-1"></td>
  10.   <td class="td-main-2">
  11.  
  12.   <table class="tab-all" summary="tab-all">
  13.    <tr>
  14.     <td class="td-bann">
  15. <!-- BANNIERRE -->
  16.     <table class="tab-top" summary="tab-top">
  17.      <tr>
  18.       <td class="td-top"></td>
  19.      </tr>
  20.     </table>
  21.    
  22.     </td>
  23.    </tr>
  24.    <tr>
  25.     <td class="td-menu">
  26. <!-- BARRE DE MENU -->
  27.     <table class="tab-menubar" summary="tab-menubar">
  28.      <tr>
  29.       <td class="td-extrem"><img src="img/menubar/menu-extrem.png" alt="img-extrem-start" /></td>
  30.    <?
  31.    for ($i=0;$i<count($rub);$i++)
  32.     {
  33.     if ($id==$i){$picstatus="on";} else {$picstatus="off";}
  34.     echo "
  35.       <td class=\"td-thumbs\"><a href=\"index.php?id=".$i."\"><img src=\"img//menubar/menubar-".$color."/".$rub[$i]."-".$picstatus.".png\" class=\"img-thumbs\" alt=\"img-".$rub[$i]."\" /></a></td>
  36.     ";
  37.     }
  38.    ?>
  39.       <td class="td-extrem"><img src="img/menubar/menu-extrem.png" alt="img-extrem-end" /></td>
  40.      </tr>
  41.     </table>
  42.    
  43.     </td>
  44.    </tr>
  45.    <tr>
  46.     <td class="td-txts">
  47. <!-- CONTENU -->
  48.     <table class="tab-content" summary="tab-content">
  49.      <tr>
  50.       <td class="td-content">
  51.    
  52.       <? include ("url/".$rub[$id]."/".$rub[$id].".txt" ); ?>
  53.    
  54.       </td>
  55.      </tr>
  56.     </table>
  57.    
  58.     </td>
  59.    </tr>
  60.    <tr>
  61.     <td class="td-copy">
  62. <!-- COPYRIGHT -->
  63.     <table class="tab-bottom" summary="tab-bottom">
  64.      <tr>
  65.       <td class="td-bottom">copy copy</td>
  66.      </tr>
  67.     </table>
  68.    
  69.     </td>
  70.    </tr>
  71.   </table>
  72.  
  73.   </td>
  74.   <td class="td-main-3"></td>
  75. </tr>
  76. </table>
  77. </body>
  78. </html>


 
valaaa, et ça passe même au validateur


Message édité par xkamui le 07-12-2002 à 18:33:01
Reply

Marsh Posté le 07-12-2002 à 12:07:47    

ce n'est pas parce que ca passe au validateur que c'est correct!
La preuve: tu utilises un height:100% pour ton tableau principal, ce qui est interdit. Et ça, c'est trop complexe à vérifier par le validateur.

Reply

Marsh Posté le 07-12-2002 à 12:48:12    

gizmo a écrit :

ce n'est pas parce que ca passe au validateur que c'est correct!
La preuve: tu utilises un height:100% pour ton tableau principal, ce qui est interdit. Et ça, c'est trop complexe à vérifier par le validateur.


 
Entièrement d'accord avec toi Gizmo, mais il faut bien reconnaitre dans son cas que les CSS ne lui donne pas de solution pour ce qu'il veut faire exactement.  
Après, peut-être que ce qu'il veut faire "est mal", mais ça c'est une autre question.
En l'état actuel des choses, il n'a pas le choix.
 
Enfin, je termine en disant que visiblement, il met bcp de bonne volonté à s'adapter aux règles et qu'il se pose des questions, ce qui n'est pas le cas de la grande majorité des acteurs du marché. Donc, il doit être encouragé.
 

Reply

Marsh Posté le 07-12-2002 à 12:51:53    

certes, mais je voulais juste préciser que ce fier les yeux fermé à une machine n'est pas une bonne chose non plus. Il ne faut pas oublier qu'elle est concue par des humains à la base ;)

Reply

Sujets relatifs:

Leave a Replay

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