css: varier la position en hauteur d'une bannière selon le texte.

css: varier la position en hauteur d'une bannière selon le texte. - HTML/CSS - Programmation

Marsh Posté le 30-01-2007 à 09:41:39    

Salut, avec une feuille css, comment faire varier le positionnement en hauteur d’une bannière placée en bas de page selon la hauteur du texte qui s’affiche ?
Plus précisément, j’ai des pages qui contiennent, à gauche, le menu, à droite le contenu, en haut et en bas une bannière. Le problème est le suivant : quand le texte s’affiche au milieu, il faudrait que la bannière du bas remonte ou redescende en fonction de la hauteur du texte.
Pour le moment, ma banniière se mélange au texte quand celui-ci est trop long ou atteint plus que 600pixels en hauteur SAUF sous KE6?  
J'ai essayé de faire varier les padding, margin, etc...mais en vain, cela reste inchangé? Bine sûr, je pourrais mettre la propri´té

Code :
  1. oveflow:auto;


Faut-il un "conteneur" , une balise css "conteneur? Faut-il insérer quelque part dans le code:

Code :
  1. clear:both;


A+
Le code css du postitonnement de la bannière du bas est le suivant:

Code :
  1. <div id="bas">
  2. <table>
  3.       <tr>
  4.         <img src="images/banniere-bas.jpg" />    </tr>
  5. </table>
  6.     <p align="center">&nbsp;</p>
  7. </div>


 
Voici ma nouvelle feuille css:

Code :
  1. /* CSS Document */
  2. body {
  3. position: relative;
  4. margin: 0px;
  5. margin-left:0px;
  6. padding: 0px;
  7. width: 100%;
  8. height: 100%;
  9. font-family: verdana, arial, sans-serif;
  10. font-size: 12px;
  11. }
  12. div#haut {
  13. margin-bottom:auto;
  14. margin-top:auto;
  15. padding-bottom:inherit;
  16. padding-top:inherit;
  17. width: auto;
  18. height: 50px;
  19. background-color: White;
  20. color: #fff;
  21. font-size: 36px;
  22. }
  23. /*
  24. div#conteneur {
  25.  
  26. height: 338px;
  27. width: 100%;
  28. float:left;
  29.    
  30.  
  31. }*/
  32. div#menu {
  33. position: absolute;
  34. left: 24px;
  35. width: 107px;
  36. height: 450px;
  37. margin-top: 130px;
  38. top: 27px;
  39. font-family: Arial, Helvetica, sans-serif;
  40. font-size: 12px;
  41. }
  42. div#frame {
  43. position:relative;
  44. margin-top: 140px;
  45. margin-left: 140px; /* on place ce bloc à droite du bloc menu de 180px de large */
  46. padding: 15px;
  47. padding-top: 0px;
  48. width: 860px;
  49. /*overflow: auto;  cette propriété va permettre le scroll de ce bloc */
  50. font-size: 11px;
  51. font-family: Arial, Helvetica, sans-serif;
  52. border-left:dotted thin;
  53. }
  54. div#bas {
  55. position:relative;
  56. width: 860px;
  57. height: 30px;
  58. text-align: center;
  59. }
  60. </style>


Merci de votre aide
A+

Reply

Marsh Posté le 30-01-2007 à 09:41:39   

Reply

Marsh Posté le 01-02-2007 à 13:45:47    

Bonjour,  
 
Un clear:both est effectivement la solution, ça te mettra ta dernière div (celle de la bannière du bas) tout en 'bas', c'est-à-dire au dessous de ton menu de gauche qui a une longueur fixe minimum, ou alors au-dessous de ta frame de droite avec le contenu, si celui-ci est plus long que le menu.

Reply

Marsh Posté le 01-02-2007 à 14:38:38    

"div#bas {    position:relative;"
Enléve les positions relative ou absolut et passe en positionnement naturel (rien d'indiqué) ou floatant.
Ca t'enlévera tous les problémes de ce genre.
 
PS : En plus faire un positionnement "relatif" sans indiquer où placer le composant, c'est pour ainsi dire bizaroïde.

Reply

Sujets relatifs:

Leave a Replay

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