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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Css] Mise en forme Complexe de blocks

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Css] Mise en forme Complexe de blocks

n°1080486
DrDJo
Posté le 12-05-2005 à 08:24:41  profilanswer
 

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

mood
Publicité
Posté le 12-05-2005 à 08:24:41  profilanswer
 

n°1080507
FlorentG
Posté le 12-05-2005 à 08:54:48  profilanswer
 

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

n°1080516
plainsofpa​in
Pingouino's lover
Posté le 12-05-2005 à 09:11:03  profilanswer
 

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

n°1080578
DrDJo
Posté le 12-05-2005 à 10:24:47  profilanswer
 

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

n°1081624
DrDJo
Posté le 12-05-2005 à 23:09:45  profilanswer
 

Personne tjs ?


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

  [Css] Mise en forme Complexe de blocks

 

Sujets relatifs
mise dans une variable d'une chaine entre cote???[vba excel] Mise a jour automatique de calculs : une option ??
[wx] mise à jour de sizerManipulation de fichier XML complexe et DataGrid
Vos Méthodes pour faire une intégration graphique et mise en Page CSSRecherche codeur XHTML - CSS
mise a jour des "drapeaux" pour un forum [résolu][CSS/XHTML] Page HTML dynamique ?
[CSS] Problèmes pour formatter un menu sous IE (suckerfish) 
Plus de sujets relatifs à : [Css] Mise en forme Complexe de blocks


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