Remplacer un tableau par des div... Height 100% ??

Remplacer un tableau par des div... Height 100% ?? - HTML/CSS - Programmation

Marsh Posté le 02-06-2004 à 15:33:14    

Structure :
 

       <div id="menu">
            <div class="menu_block">
                Sub menu<br>
                Sub menu<br>
                Sub menu<br>
            </div>
            <div class="menu_block">
                Sub menu<br>
                Sub menu<br>
            </div>
            <div class="menu_block">
                Sub menu<br>
                Sub menu<br>
                Sub menu<br>
                Sub menu<br>
                Sub menu<br>
            </div>
            <div class="menu_block">
                Sub menu<br>
                Sub menu<br>
                Sub menu<br>
                Sub menu<br>
            </div>
      </div>


 
Je veux que les 4 divs "menu_block" soient les uns à côté des autres. Ca c'est fait.
Ensuite, je veux que ces 4 divs fassent la même hauteur... Comment faire, sâchant que :
-> La taille maximale des divs dépends du plus gros d'entre eux.
-> Cette taille est inconnue, et je ne peux pas la fixer (dynamique)
 
Actuellement niveau css, j'ai ça :
 

#menu
{
 position: absolute;
 top: 75px;
 left: 0px;
 width: 736px;
 background-color: #f5f5f5;
}
 
.menu_block
{
 border-right: #aaaaaa 1px solid;
 float: left;
 width: 184px;
 display: block;
 padding: 10px;
 border-bottom: #aaaaaa 1px solid;
 height: 100%;
}


 
Mais le height: 100% n'est pas pris en compte, auto marche pas mieu.


Message édité par Arjuna le 02-06-2004 à 15:33:44
Reply

Marsh Posté le 02-06-2004 à 15:33:14   

Reply

Marsh Posté le 02-06-2004 à 15:37:09    

OK, dans #menu, si je mets "height: 1px;" ça marche... Sous IE 6.0 SP1 du moins. Mais bon, si possible un truc pas porc c'est mieu (et qui marche sous IE 5 et ultérieur par contre, moz c'est bien, mais c'est pas la cible du site)

Reply

Marsh Posté le 02-06-2004 à 17:56:44    

En l'absence de réponse, j'ai utilisé la bidouille à 1px (haha)
 
Par contre, maintenant j'ai un autre problème...
 
x divs les un derrières les autres, dans un div plus grand.
Les divs font 50% en largeur.
 
Avec un align float:left
 
Le but : Afficher de façon "sexy" des news sur deux colonnes.
 
Problème : Si la news 1 est grosse, puis deux petites, les deux petites se mettent bien à droite de la grosse.
Mais si la 1° est un peu plus petite que la seconde, alors la troisième se met sous la seconde (à droite), et la quatrième se met tout en dessous à gauche, au niveau du bas de la 3°... Il me reste donc un énorme trou blanc entre la news 1 et la news 4 (spa clair, désolé, vous verrez mieu là)
 
http://perso.wanadoo.fr/magicbuzz/ge/default.htm

Reply

Marsh Posté le 02-06-2004 à 18:42:19    

Arjuna a écrit :

En l'absence de réponse, j'ai utilisé la bidouille à 1px (haha)
 
Par contre, maintenant j'ai un autre problème...
 
x divs les un derrières les autres, dans un div plus grand.
Les divs font 50% en largeur.
 
Avec un align float:left
 
Le but : Afficher de façon "sexy" des news sur deux colonnes.
 
Problème : Si la news 1 est grosse, puis deux petites, les deux petites se mettent bien à droite de la grosse.
Mais si la 1° est un peu plus petite que la seconde, alors la troisième se met sous la seconde (à droite), et la quatrième se met tout en dessous à gauche, au niveau du bas de la 3°... Il me reste donc un énorme trou blanc entre la news 1 et la news 4 (spa clair, désolé, vous verrez mieu là)
 
http://perso.wanadoo.fr/magicbuzz/ge/default.htm


 
y a comme un soucis d'affichage avec Mozilla  :sweat:  
 
http://files.shawt.net/users/Flyman30/magic.png

Reply

Marsh Posté le 02-06-2004 à 19:22:42    

Dans ce cas précis, l'organisation est visiblement tabulaire donc --> tableau.

Reply

Marsh Posté le 02-06-2004 à 20:00:25    

Hermes le Messager a écrit :

Dans ce cas précis, l'organisation est visiblement tabulaire donc --> tableau.


ça changera rien à mon problème. Si j'ai une news de 50 lignes et à côté une news de 5 lignes, je vais avoir un trou énorme avant l'apparition de la ligne du tableau suivante, ce que je veux justement éviter. En fait, je veux un affichage naturel, comme ce qu'on peut avoir dans une page de journal : des colonnes les unes à côté des autres, et les paragraphes qui ne sont pas en face les uns des autres, et de taille différente (par contre, évidement, je ne tiens pas à couper une news en deux pour avoir un affichage "pile poil", juste une ventillation correcte des news entre les deux colonnes... Y'a vraiment pas moyen de faire ça ?

Reply

Marsh Posté le 02-06-2004 à 20:02:43    

Flyman30 a écrit :

y a comme un soucis d'affichage avec Mozilla  :sweat:  
 
http://files.shawt.net/users/Flyman30/magic.png


Ouais en effet, il va falloir que je regarde ça.
Mais d'un autre côté, le site actuel merde à 100% avec tout ce qui n'est pas IE, et aucun client ne s'en est jamais plainds, simplement parcequ'ils sont tous sous IE. A partir de là, je tiens pas à m'éterniser sur l'affichage sous Moz, je préfère obtenir un résultat léché sous IE et un truc tout pas beau sous Moz, plutôt qu'un truc moyen qui passe partout (sinon je le fait en HTML 2.0 ça va être rapide :whistle: )

Reply

Marsh Posté le 02-06-2004 à 20:04:42    

Arjuna a écrit :

Ouais en effet, il va falloir que je regarde ça.
Mais d'un autre côté, le site actuel merde à 100% avec tout ce qui n'est pas IE, et aucun client ne s'en est jamais plainds, simplement parcequ'ils sont tous sous IE. A partir de là, je tiens pas à m'éterniser sur l'affichage sous Moz, je préfère obtenir un résultat léché sous IE et un truc tout pas beau sous Moz, plutôt qu'un truc moyen qui passe partout (sinon je le fait en HTML 2.0 ça va être rapide :whistle: )


 
heu, là, je t'arrête, tu dis n'importe quoi. Tout ce que l'on peut faire avec IE, on peut le faire sous Moz ou opera....

Reply

Marsh Posté le 02-06-2004 à 20:36:59    

Arjuna a écrit :


Je veux que les 4 divs "menu_block" soient les uns à côté des autres. Ca c'est fait.


Pas de "_" dans le nom des classes. Utilise le trait d'union.

Arjuna a écrit :


Ensuite, je veux que ces 4 divs fassent la même hauteur... Comment faire, sâchant que :
-> La taille maximale des divs dépends du plus gros d'entre eux.
-> Cette taille est inconnue, et je ne peux pas la fixer (dynamique)


C'est une limitation des DIV... Il n'y a pas tellement de solution si ce n'est de ruser avec une image de fond qui-va-bien appliquée au DIV conteneur...
Utiliser pas un tableau n'est pas spécialement choquant vu que tu as un intitulé et un menu correspondant, ça se rapproche des données tabulaires.


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

Marsh Posté le 02-06-2004 à 20:37:22    

Arjuna a écrit :

Y'a vraiment pas moyen de faire ça ?


Non.
 
Edit: ou alors faut monter une usine à gaz en JS...


Message édité par gm_superstar le 02-06-2004 à 20:37:50

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

Marsh Posté le 02-06-2004 à 20:37:22   

Reply

Marsh Posté le 02-06-2004 à 21:08:42    

C'est relou... Bon, ben ça va finir par un truc pourri quoi...
 
Franchement au W3C ils pourraient penser depuis tout ce temps que l'affichage en colone ça peut être utile... N'importe quel traîtement de texte sous MS-DOS le gère depuis 10 ans :sweat:

Reply

Marsh Posté le 02-06-2004 à 21:10:22    

gm_superstar a écrit :

Pas de "_" dans le nom des classes. Utilise le trait d'union.
 
C'est une limitation des DIV... Il n'y a pas tellement de solution si ce n'est de ruser avec une image de fond qui-va-bien appliquée au DIV conteneur...
Utiliser pas un tableau n'est pas spécialement choquant vu que tu as un intitulé et un menu correspondant, ça se rapproche des données tabulaires.


Pas bien compris ton histoire d'image de fond... Elle vient faire quoi là-dedans ?
 
PS: je parle bien des 4 blocks en bas hein, pas des menus en haut, eux ils sont ok, y'a pas de problème avec, ils font ce que je veux.

Reply

Marsh Posté le 02-06-2004 à 21:46:30    

Je pense que tu te compliques trop la vie ARJUNA : ou tu fais des tableaux ou tu fais des blocs... Si tu fais des blocs, ne pense plus en "tableau" : ton code HTML pourrais être beaucoup plus simple :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.   <title>TEST BLOC</title>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style>
  7. <!--
  9. /*************************
  10. ****** les titres*********
  11. *************************/
  12. h3{
  13. font-size: 17px;
  14. color : #FFF;
  15. text-align : center;
  16. margin: 0;
  17. }
  19. #rouge h3{background-color: red;}
  20. #vert h3{background-color: green;}
  21. #bleu h3{background-color: blue;}
  22. #jaune h3{background-color: jaune;}
  24. /*************************
  25. ****** les blocs*********
  26. *************************/
  28. #rouge,
  29. #vert,
  30. #bleu{
  31. width: 200px;
  32. float: left;
  33. }
  35. #jaune{
  36. border-left: 1px solid Yellow;
  37. }
  38. #rouge{
  39. border-left: 1px solid red;
  40. }
  41. #vert{
  42. border-left: 1px solid green;
  43. }
  44. #bleu{
  45. border-left: 1px solid blue;
  46. }
  48. /*************************
  49. ****** les listes*********
  50. *************************/
  52. ul {
  53. list-style : none;
  54. }
  56. /*************************
  57. ****** les liens*********
  58. *************************/
  59. a, a:link, a:visited, a:active{
  60. text-decoration: none;
  61. font-weight: bold;
  62. }
  63. a:hover{
  64. text-decoration: underline;
  65. color: black;
  66. }
  67. #rouge a:link, #rouge a:visited, #rouge a:active{color: red;}
  68. #bleu a:link, #bleu a:visited, #bleu a:active{color: blue;}
  69. #vert a:link, #vert a:visited, #vert a:active{color: green;}
  71. #rouge a:hover,
  72. #bleu a:hover,
  73. #vert a:hover{color: black;}
  74. --!>
  75. </style>
  76. </head>
  78. <body>
  79. <div id="general">
  81. <div id="rouge">
  82.   <h3>TITRE 1</h3>
  83.    <ul>
  84.        <li><a href="page1.html"><span>lien1</span></a></li>
  85.        <li><a href="page1.html"><span>lien1</span></a></li>
  86.        <li><a href="page1.html"><span>lien1</span></a></li> 
  87.        <li><a href="page1.html"><span>lien1</span></a></li>
  88.          <li><a href="page1.html"><span>lien1</span></a></li>
  89.          <li><a href="page1.html"><span>lien1</span></a></li>
  90.      </ul>
  91. </div>
  92. <div id="vert">
  93.  <h3>TITRE 2</h3>
  94.    <ul>
  95.        <li><a href="page1.html"><span>lien1</span></a></li>
  96.        <li><a href="page1.html"><span>lien1</span></a></li>
  97.        <li><a href="page1.html"><span>lien1</span></a></li> 
  98.        <li><a href="page1.html"><span>lien1</span></a></li>
  99.          <li><a href="page1.html"><span>lien1</span></a></li>
  100.          <li><a href="page1.html"><span>lien1</span></a></li>
  101.      </ul>
  102. </div>
  103. <div id="bleu">
  104.  <h3>TITRE 3</h3>
  105.    <ul>
  106.        <li><a href="page1.html"><span>lien1</span></a></li>
  107.        <li><a href="page1.html"><span>lien1</span></a></li>
  108.        <li><a href="page1.html"><span>lien1</span></a></li> 
  109.        <li><a href="page1.html"><span>lien1</span></a></li>
  110.          <li><a href="page1.html"><span>lien1</span></a></li>
  111.          <li><a href="page1.html"><span>lien1</span></a></li>
  112.      </ul>
  113. </div>
  115. </div>
  116. </body>
  117. </html>


 
Voila, j'ai fait ça vite fait, pour aider certains d'entre vous à comprendre les CSS


Message édité par foxcssfox le 02-06-2004 à 21:48:11

---------------
"Nous sommes tous dans le caniveau, mais certains d'entre nous regardent les étoiles" Oscar Wild
Reply

Marsh Posté le 03-06-2004 à 16:26:04    

J'en en effet pensé à l'élément liste pour la partie des menus, mais je préfère la souplesse de divs imbriqués, dedans je paramètre ce que je veux, alors que dans un <li> on ne peux pas mettre tout ce qu'on veut.

Reply

Sujets relatifs:

Leave a Replay

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