Plizz, pourriez-vous m'aider à déménager mes boîtes ???

Plizz, pourriez-vous m'aider à déménager mes boîtes ??? - HTML/CSS - Programmation

Marsh Posté le 01-11-2003 à 12:47:14    

Hello !
 
Pas de mise en boîte SVP, j'essaye de "mettre en page" un petit site web perso avec des feuilles de styles...  
 
Oui mais voilà, j'aimerais avoir le beurre, l'argent du beurre et le sourire de la crémière (voire plus si affinités) ! En d'autres termes, j'aimerais avoir un rendu aussi équivalent que possible avec un maximum de navigateurs (disons IE5.x et +, Mozilla 1.x et les Netscape bâtis dessus, et Opera - que je n'ai jamais utilisé, faudra que je l'essaie, ne serait-ce qu'à des fins de tests !)
 
Ci-dessous, vous trouverez le code résultant de mes premiers efforts (les couleurs sont beurk, je sais, je ne fais que tester pour le moment). Et voici les questions qui vont avec :

  • j'ai un problème de positionnement avec Mozilla (j'utilise en ce moment la version 1.4) pour la div d'id "contenu" : sans bordure, elle est placée contre le haut de la fenêtre. Avec une bordure d'épaisseur très faible, tout rentre dans l'ordre... mais évidemment, vu le modèle standard de boîtes que respecte Mozilla, la largeur de la div s'en trouve affectée, ce qui pose problème ;
  • d'une façon générale, comment se tirer des difficultés qu'entraîne (pour moi) le modèle standard du W3C concernant la taille des boîtes ?
  • comment centrer verticalement (avec des valeurs rationelles, et non déterminées empiriquement) la boîte encadrée en marron ?


Merci d'avance à ceux qui me liront, un plus grand merci encore à ceux qui me répondront (j'espère qu'il y en aura ;) !)
 
:hello:  
 

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body { margin : 0px ;
  5. background-color : black ; }
  7. #logo { border : solid 2px red ; height : 15% ; }
  9. #menu { border : solid 0px green ;
  10. background-color : green ; color : white ;
  11. width : 15% ; height : 85% ;
  12. float : left ;
  13. voice-family : "\"}\"" ; /* Box model hack, en cas de besoin */
  14. voice-family : inherit ;
  15. height : 84.1% ; } /* Décidément, le modèle W3C pour les boîtes est vraiment merdique...  
  16.   Pour une fois que ce que propose PetitMou est mieux ! AMHA bien sûr... */
  18. html>body #menu { height : 84.1% ; } /* Be nice to Opera 5 ! */
  20. #contenu { border : dashed 0.1px red ; /* Pourquoi le positionnement déconne complètement avec Mozilla  
  21.    si je mets 0px ? Bug ??? */
  22. background-color : blue ; color : white ;
  23. width : 85% ; height : 85% ;
  24. display : inline ;
  25. float : left ;
  26. text-align : center ; /* Pour contourner un bug de IE relatif au centrage, voir plus bas "#auCentre" */
  27. voice-family : "\"}\"" ; /* Box model hack, en cas de besoin */
  28. voice-family : inherit ;
  29. width : 84.9% ; height : 84% ; }
  31. html>body #contenu { width : 84.9% ; height : 84% ;  } /* Be nice to Opera 5 ! */
  33. #aGauche { border :  solid 0px black ;
  34. background-color : white ; color : black ;
  35. width : 33.31% ; height : 50% ;
  36. display : inline ;
  37. float : left ;
  38. text-align : left ;
  39. voice-family : "\"}\"" ; /* Box model hack, en cas de besoin */
  40. voice-family : inherit ;
  41. width : 20% ; }
  43. html>body #aGauche { width : 20% ; } /* Be nice to Opera 5 ! */
  45. #auMilieu { border :  solid 0px cyan ;
  46. background-color : cyan ; color : black ;
  47. width : 33.31% ; height : 50% ;
  48. display : inline ;
  49. float : left ;
  50. text-align : center ;
  51. voice-family : "\"}\"" ;
  52. voice-family : inherit ;
  53. width : 20% ; }
  55. html>body #auMilieu { width : 20% ; }
  57. #aDroite { border :  solid 0px maroon ;
  58. background-color : maroon ; color : white ;
  59. width : 33.31% ; height : 50% ;
  60. display : inline ;
  61. float : left ;
  62. text-align : right ;
  63. voice-family : "\"}\"" ;
  64. voice-family : inherit ;
  65. width : 20% ; }
  67. html>body #aDroite { width : 20% ; }
  69. #auCentre { border : solid 2px olive ;
  70. width : 50% ; height : 50% ;
  71. / * max-height : 100px ; Attribut OK pour Mozilla, pas pour IE6 */
  72. text-align : center ;
  73. margin : auto ; /* Première solution pour le centrage horizontal */
  74. /* margin-top : 25% ; */
  75. /* position : relative ; top : 50% ; left : 50% ; */ /* Deuxième solution pour le centrage horizontal... Mais
  76.      pourquoi diable "right : 50%" ne marche pas ??? */
  77. /* margin-left : -25% ; margin-top : -25% ; */ } /* Pourquoi le décalage en hauteur "margin-top : -25%" ne
  78.      donne pas le résultat que j'escompte ??? */
  79. </style>
  80. </head>
  82. <body>
  84. <div id="logo">
  85. Le logo
  86. <div id="aGauche">Contenu à gauche</div>
  87. <div id="auMilieu">Contenu au milieu</div>
  88. <div id="aDroite">Contenu à droite</div>
  89. </div>
  91. <div id="menu">
  92. Le menu
  93. </div>
  95. <div id="contenu">
  96. Le contenu...
  97. <div id="auCentre">
  98. J'aimerais que cette boîte soit au centre de la boîte qui la contient !
  99. </div>
  100. </div>
  102. </body>
  103. </html>
  104. <!-- Les doctype pour essayer les techniques de "DocType-switching"... Le comportement d'IE6 est vraiment... surprenant !
  105. <!DOCTYPE HTML PUBILC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  106. <!DOCTYPE HTML PUBILC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  107. <!DOCTYPE html PUBILC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  108. <!DOCTYPE html PUBILC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  109. //-->


Message édité par Al Batar le 01-11-2003 à 12:49:00
Reply

Marsh Posté le 01-11-2003 à 12:47:14   

Reply

Marsh Posté le 01-11-2003 à 14:01:25    

Alors déjà :
 
Au début : mettre : html,body { margin : 0px; padding: 0px; height: 100%;  
   background-color : black ; }
 
Ensuite pour ce qui est ce centrer verticalement une boite dans une autre, ce n'est pas possible avec les divs. C'est con, mais c'est comme ça. Il y a des ruses, mais toutes plus pourrites les unes que les autres...

Reply

Marsh Posté le 01-11-2003 à 16:33:26    

[...centrer verticalement...]
 
Oui, j'ai vu cela ! En farfouillant sur le forum, j'ai trouvé un thread de 2 pages où un "Castor", un "Super" et toi aviez abordé le sujet, vers la fin du mois d'août de cette année. Très instructif !  
 
J'y ai également trouvé quelque chose que j'avais déjà essayé avec le "overflow : auto". A ce propos, je me suis toujours demandé, sans trouver de réponse, s'il y avait moyen de faire en sorte que la zone en "auto-overflow" soit scrollable avec la molette de la souris...

Reply

Marsh Posté le 01-11-2003 à 16:37:16    

Hermes le Messager a écrit :

Alors déjà :
 
Au début : mettre : html,body { margin : 0px; padding: 0px; height: 100%;  
   background-color : black ; }


 
Au fait, qu'est-ce que cela est sensé apporter ? Je connais l'effet que la modification de ces attributs est censé donner, mais l'influence que cela aura sur les différents navigateurs, je le connais moins (et là, je n'ai actuellement qu'un Mozilla 1.4 à ma disposition).
 
Quant au centrage vertical, pourquoi la technique des marges négatives, pour critiquable qu'elle soit (je partage ton avis sur l'emploi de tables pour régler ce problème précis), échoue ? Horizontalement, ça va, verticalement, ça merde. Bizarre, non ?
 
Enfin, y'a-t-il un moyen de se débrouiller avec le modèle standard de boîtes du W3C pour indiquer des dimensions en % ET gérer convenablement les bordures ???
 
Merci !


Message édité par Al Batar le 01-11-2003 à 16:40:39
Reply

Marsh Posté le 01-11-2003 à 16:45:19    

Al Batar a écrit :


 
Au fait, qu'est-ce que cela est sensé apporter ? Je connais l'effet que la modification de ces attributs est censé donner, mais l'influence que cela aura sur les différents navigateurs, je le connais moins (et là, je n'ai actuellement qu'un Mozilla 1.4 à ma disposition).
 


 
Ben, réfléchi : Quand tu demandes à un div de faire 100% de hauteur ? C'est 100% de quoi ? Du body non ?  
Pour Opera, il faut mettre le html parce qu'il considère que c'est lui le parent ultime.
 

Reply

Marsh Posté le 01-11-2003 à 16:58:52    

Hermes le Messager a écrit :


 
Ben, réfléchi :  
 
Réfléchir... attend voir... c'est ce truc, là ? celui qu'on fait avec le cerveau ??? Fouyayaye, ça va encore me faire mal à mon neurone... ;) :D
 
Quand tu demandes à un div de faire 100% de hauteur ? C'est 100% de quoi ? Du body non ?  
 
Oh !!?!? Sans blague ??? Sérieusement, maintenant, je ne suis pas débile, et j'ai clairement indiqué savoir à quoi correspondaient les instructions CSS que tu donnes. Ce que je suis pour le moment incapable de prédire, c'est leur effet sur les différents navigateurs ! Et en plus, je n'ai pas de IE sous la main pour juger de leurs effets...
 
Pour Opera, il faut mettre le html parce qu'il considère que c'est lui le parent ultime.
 
OK, bon à savoir : merci ! Mais je repose ma question : avec le Moz1.4 que j'ai sous la main, rajouter ces instructions ne change strictement rien. A quel effet (bénéfique, j'espère) dois-je m'attendre avec MSIE et Opera ? Ca marchera mieux avec une DocType HTML Tansitional et IE6, par exemple ?


 
L'ironie mise à part (je m'en serais avantageusement passé ;) ), merci encore pour ta réponse !


Message édité par Al Batar le 01-11-2003 à 17:14:12
Reply

Marsh Posté le 02-11-2003 à 14:06:50    

Up !

Reply

Sujets relatifs:

Leave a Replay

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