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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°749003
Arjuna
Aircraft Ident.: F-MBSD
Posté le 02-06-2004 à 15:33:14  profilanswer
 

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
mood
Publicité
Posté le 02-06-2004 à 15:33:14  profilanswer
 

n°749006
Arjuna
Aircraft Ident.: F-MBSD
Posté le 02-06-2004 à 15:37:09  profilanswer
 

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)

n°749210
Arjuna
Aircraft Ident.: F-MBSD
Posté le 02-06-2004 à 17:56:44  profilanswer
 

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

n°749277
Flyman30
Posté le 02-06-2004 à 18:42:19  profilanswer
 

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

n°749346
Hermes le ​Messager
Breton Quiétiste
Posté le 02-06-2004 à 19:22:42  profilanswer
 

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

n°749422
Arjuna
Aircraft Ident.: F-MBSD
Posté le 02-06-2004 à 20:00:25  profilanswer
 

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 ?

n°749424
Arjuna
Aircraft Ident.: F-MBSD
Posté le 02-06-2004 à 20:02:43  profilanswer
 

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

n°749429
Hermes le ​Messager
Breton Quiétiste
Posté le 02-06-2004 à 20:04:42  profilanswer
 

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

n°749492
gm_superst​ar
Appelez-moi Super
Posté le 02-06-2004 à 20:36:59  profilanswer
 

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
n°749494
gm_superst​ar
Appelez-moi Super
Posté le 02-06-2004 à 20:37:22  profilanswer
 

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
mood
Publicité
Posté le 02-06-2004 à 20:37:22  profilanswer
 

n°749544
Arjuna
Aircraft Ident.: F-MBSD
Posté le 02-06-2004 à 21:08:42  profilanswer
 

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:

n°749549
Arjuna
Aircraft Ident.: F-MBSD
Posté le 02-06-2004 à 21:10:22  profilanswer
 

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.

n°749596
foxcssfox
The design of CSS...
Posté le 02-06-2004 à 21:46:30  profilanswer
 

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. <!--
  8. /*************************
  9. ****** les titres*********
  10. *************************/
  11. h3{
  12. font-size: 17px;
  13. color : #FFF;
  14. text-align : center;
  15. margin: 0;
  16. }
  17. #rouge h3{background-color: red;}
  18. #vert h3{background-color: green;}
  19. #bleu h3{background-color: blue;}
  20. #jaune h3{background-color: jaune;}
  21. /*************************
  22. ****** les blocs*********
  23. *************************/
  24. #rouge,
  25. #vert,
  26. #bleu{
  27. width: 200px;
  28. float: left;
  29. }
  30. #jaune{
  31. border-left: 1px solid Yellow;
  32. }
  33. #rouge{
  34. border-left: 1px solid red;
  35. }
  36. #vert{
  37. border-left: 1px solid green;
  38. }
  39. #bleu{
  40. border-left: 1px solid blue;
  41. }
  42. /*************************
  43. ****** les listes*********
  44. *************************/
  45. ul {
  46. list-style : none;
  47. }
  48. /*************************
  49. ****** les liens*********
  50. *************************/
  51. a, a:link, a:visited, a:active{
  52. text-decoration: none;
  53. font-weight: bold;
  54. }
  55. a:hover{
  56. text-decoration: underline;
  57. color: black;
  58. }
  59. #rouge a:link, #rouge a:visited, #rouge a:active{color: red;}
  60. #bleu a:link, #bleu a:visited, #bleu a:active{color: blue;}
  61. #vert a:link, #vert a:visited, #vert a:active{color: green;}
  62. #rouge a:hover,
  63. #bleu a:hover,
  64. #vert a:hover{color: black;}
  65. --!>
  66. </style>
  67. </head>
  68. <body>
  69. <div id="general">
  70. <div id="rouge">
  71.   <h3>TITRE 1</h3>
  72.    <ul>
  73.        <li><a href="page1.html"><span>lien1</span></a></li>
  74.        <li><a href="page1.html"><span>lien1</span></a></li>
  75.        <li><a href="page1.html"><span>lien1</span></a></li> 
  76.        <li><a href="page1.html"><span>lien1</span></a></li>
  77.          <li><a href="page1.html"><span>lien1</span></a></li>
  78.          <li><a href="page1.html"><span>lien1</span></a></li>
  79.      </ul>
  80. </div>
  81. <div id="vert">
  82.  <h3>TITRE 2</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="bleu">
  93.  <h3>TITRE 3</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>
  104. </body>
  105. </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
n°751047
Arjuna
Aircraft Ident.: F-MBSD
Posté le 03-06-2004 à 16:26:04  profilanswer
 

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.


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

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

 

Sujets relatifs
Remplacer les accentsRemplacer "es" à la fin d'un mot par e
conversion adresse de tableau de pointeursParcourir un tableau à colonnes variables
sauver un tableau de short dans un format d'imagerechercher et remplacer dans une QString
efacer les caractere d'un tableau de charProblème de tableau dynamique
[JSP/SERVLET] Stocker un tableau dans un cookiepasser tableau js à autre page web
Plus de sujets relatifs à : Remplacer un tableau par des div... Height 100% ??


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