[Css] Mise en forme Complexe de blocks

Mise en forme Complexe de blocks [Css] - HTML/CSS - Programmation

Marsh Posté le 12-05-2005 à 08:24:41    

Bonjour,
Je débute depuis peu le Css, et j'ai à ma charge la réalisation et la mise en page du design d'un site web.
Je dois effectuer la mise en forme suivante:
 
http://www.tchatroom.com/beta/plan.JPG
 
( Fais sous Paint en 5 / 5 ne faites pas gaffe [smile] )
 
Pour cela j'ai déja fais le code CSS suivant:
 

Code :
  1. <style type="text/css">
  2. /* CSS issu des tutoriels css.alsacreations.com */
  3. body {
  4. font-family: Verdana, Arial, Helvetica, sans-serif;
  5. font-size: 0.8em;
  6. margin: 0;
  7. padding: 0;
  8. }
  9. #header {
  10. height: 202px;
  11. }
  12. #conteneur {
  13. position: absolute;
  14. width: 800px;
  15. left: 50%;
  16. margin-left: -400px;
  17. }
  18. #centre {
  19. margin-left: 153px;
  20. margin-right: 153px;
  21. }
  22. #gauche {
  23. position: absolute;
  24. left:0;
  25. width: 153px;
  26. background-image:url(images/middle.JPG);
  27. }
  28. #droite {
  29. position: absolute;
  30. right:0;
  31. width: 153px;
  32. background-image:url(images/middle.JPG);
  33. }
  34. #pied {
  35. height: 51px;
  36. background-image:url(images/copyright.jpg);
  37. }
  38. .menugauche {
  39. list-style-type: none;
  40. margin: 0;
  41. padding:0;
  42. }
  43. .menugauche li {
  44. margin-bottom: 5px;
  45. }
  46. .menugauche a {
  47. margin: 0 4px;
  48. color: #000000;
  49. text-decoration: underline;
  50. }
  51. .menugauche a:hover {
  52. text-decoration: none;
  53. }
  54. .menudroit {
  55. list-style-type: none;
  56. margin: 0;
  57. padding:0;
  58. }
  59. .menudroit li {
  60. margin-bottom: 5px;
  61. }
  62. .menudroit a {
  63. margin: 0 4px;
  64. color: #000000;
  65. text-decoration: underline;
  66. }
  67. .menudroit a:hover {
  68. text-decoration: none;
  69. }
  70. p {margin: 0 0 10px 0;}
  71. </style>


 
ainsi que le code html allant avec :
 

Code :
  1. <div id="conteneur">
  2.   <div id="header">
  3.    <object type="application/x-shockwave-flash" data="images/Entete.swf" width="800" height="202">
  4.   <param name="movie" value="images/Entete.swf" />
  5.   <param name="wmode" value="transparent" />
  6.   <p>Image ou texte alternatif</p>
  7.  </object>
  8. </div>
  9.   <div id="gauche"><p>menu</p>
  10.    <p>largeur fixe : 150px</p>
  11.  
  12. <ul class="menugauche">
  13.   <li><a href="">Menu 1</a></li>
  14.   <li><a href="">Menu 2</a></li>
  15.   <li><a href="">Menu 3</a></li>
  16.   <li><a href="">Menu 4</a></li>
  17.   </ul>
  18.         <p>&nbsp;</p>
  19.         <p>&nbsp;</p>
  20.         <p>&nbsp;</p>
  21.   </div>
  22.  
  23.   <div id="droite"><p>droite</p>
  24.    <p>largeur fixe : 150px</p>
  25.  
  26.   <ul class="menudroit">
  27.   <li><a href="">Menu 1</a></li>
  28.   <li><a href="">Menu 2</a></li>
  29.   <li><a href="">Menu 3</a></li>
  30.   <li><a href="">Menu 4</a></li>
  31.   </ul>
  32.         <p>&nbsp;</p>
  33.         <p>&nbsp;</p>
  34.         <p>&nbsp;</p>
  35.   </div>
  36.  
  37.    <div id="centre">
  38.      partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
  39.      partie avec du contenu occupant le reste de la largeur                <br />
  40.      partie avec du contenu occupant le reste de la largeur<br />
  41.      partie avec du contenu occupant le reste de la largeur<br />
  42.      partie avec du contenu occupant le reste de la largeur<br />
  43.      partie avec du contenu occupant le reste de la largeur<br />
  44.      partie avec du contenu occupant le reste de la largeur<br />
  45.      partie avec du contenu occupant le reste de la largeur<br />
  46.      partie avec du contenu occupant le reste de la largeur<br />
  47.      partie avec du contenu occupant le reste de la largeur<br />
  48.      partie avec du contenu occupant le reste de la largeur<br />
  49.      partie avec du contenu occupant le reste de la largeur<br />
  50.      partie avec du contenu occupant le reste de la largeur<br />
  51.    </div>
  52.  
  53.   <div id="pied">pied de page</div>
  54. </div>


 
Ce qui donne ceci : Cliquez la
 
Mais voilà, premièrement je ne trouve pas comment rajouter les "tops" et les "bas" des menus sur les cotés de manière fixe.
Et deuxièmement, je rencontre le problème suivant: Cliquez la lorsque je veux rajouter du texte, les menus ne s'étirent pas avec la box centrale.
 
Comment Faire ??
 
Merci à l'avance pour vos réponses, si mon problème n'est pas assez clair demandez moi quels points voulez vous que je détaille.
 
Cordialement,
DJo

Reply

Marsh Posté le 12-05-2005 à 08:24:41   

Reply

Marsh Posté le 12-05-2005 à 08:54:48    

Tout ça sont des choses assez simple à faire. Pour les menus fixe, c'est avec display: fixed; Et sinon pour que tout s'étire joyeusement, le mieux est d'utiliser des display: table et display: table-cell.
 
Malheureusement, tout ce joyeux monde ne fonctionne pas sous IE :( Donc faut réussir à faire ça de façon à ce que ça se dégrade pas trop sous IE :D

Reply

Marsh Posté le 12-05-2005 à 09:11:03    

"Bon les mecs, on est en 2005, faudrait quand-même songer à virer ces frames et ces tableaux."
 
J'adore Florent j'adore ^^'
 
Quand je vois des phrases comme ca, et des posts comme celui ci, ca fait chaud au coeur.
 
Sinon je confirme, les propriétés que florentG a cité sont assez sympa, et ca marchera je pense.

Reply

Marsh Posté le 12-05-2005 à 10:24:47    

Ok je vais essayer deja ca, je vous tiens au courant merci

Reply

Marsh Posté le 12-05-2005 à 23:09:45    

Personne tjs ?

Reply

Sujets relatifs:

Leave a Replay

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