Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
768 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°263851
xkamui
Their Destiny Was Foreordained
Posté le 06-12-2002 à 23:29:11  profilanswer
 

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
mood
Publicité
Posté le 06-12-2002 à 23:29:11  profilanswer
 

n°263854
gm_superst​ar
Appelez-moi Super
Posté le 06-12-2002 à 23:35:17  profilanswer
 

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
n°263860
xkamui
Their Destiny Was Foreordained
Posté le 06-12-2002 à 23:53:47  profilanswer
 

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

n°263863
gm_superst​ar
Appelez-moi Super
Posté le 07-12-2002 à 00:00:10  profilanswer
 

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
n°263880
xkamui
Their Destiny Was Foreordained
Posté le 07-12-2002 à 00:17:40  profilanswer
 

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

n°263902
Hermes le ​Messager
Breton Quiétiste
Posté le 07-12-2002 à 00:31:25  profilanswer
 

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).

n°263917
gm_superst​ar
Appelez-moi Super
Posté le 07-12-2002 à 00:47:35  profilanswer
 

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
n°263951
xkamui
Their Destiny Was Foreordained
Posté le 07-12-2002 à 01:52:23  profilanswer
 

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, @+

n°264278
Flyman30
Posté le 07-12-2002 à 09:02:40  profilanswer
 

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:

n°264286
gm_superst​ar
Appelez-moi Super
Posté le 07-12-2002 à 10:47:10  profilanswer
 

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
mood
Publicité
Posté le 07-12-2002 à 10:47:10  profilanswer
 

n°264296
xkamui
Their Destiny Was Foreordained
Posté le 07-12-2002 à 11:57:11  profilanswer
 


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
n°264301
gizmo
Posté le 07-12-2002 à 12:07:47  profilanswer
 

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.

n°264313
Hermes le ​Messager
Breton Quiétiste
Posté le 07-12-2002 à 12:48:12  profilanswer
 

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é.
 

n°264315
gizmo
Posté le 07-12-2002 à 12:51:53  profilanswer
 

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 ;)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[CSS] Pkoi ça marche ça ??!!Souci d'affichage de contenu généré via CSS
Longueur d'une variable... [ - Job's Done - ]Cellspacing et cellpadding d'un tableau en CSS
Centrage de tableau en CSS[HTML/JS/CSS] problème avec les styles!!
[CSS] Validateur down ?fread et fwrite [ - Job's Done - ]
Plus de sujets relatifs à : [CSS] faire des boites... [ - Job's Done - ]


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR