CSS:varier la position d'une bannière selon le texte.

[midiweb]

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é? Bien sûr, je pourrais mettre la propriété

oveflow:auto;

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

clear:both;

A+

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

<div id="bas">
<table>
  <tr>
	<img src="images/banniere-bas.jpg" />	</tr>
</table>
<p align="center"> </p>
</div>

 

Voici ma nouvelle feuille css:

/* CSS Document */


body {
position: relative;
margin: 0px;
margin-left:0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: verdana, arial, sans-serif;
font-size: 12px;

}

div#haut {
margin-bottom:auto;
margin-top:auto;
padding-bottom:inherit;
padding-top:inherit;
width: auto;
height: 50px;
background-color: White;
color: #fff;
font-size: 36px;

}
/*
div#conteneur {

height: 338px;
width: 100%;
float:left;


}*/

div#menu {
position: absolute;
left: 24px;
width: 107px;
height: 450px;
margin-top: 130px;
top: 27px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

}

div#frame {
position:relative;
margin-top: 140px;
margin-left: 140px; /* on place ce bloc à droite du bloc menu de 180px de large */
padding: 15px;
padding-top: 0px;
width: 860px;
/*overflow: auto;  cette propriété va permettre le scroll de ce bloc */
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
border-left:dotted thin;

}

div#bas {
position:relative;
width: 860px;
height: 30px;
text-align: center;


}

</style>

Merci de votre aide

A+

[Dylav]

Déjà, ta déclaration de <div> est inutilement compliquée, et erronée. Pourquoi utiliser un tableau <table> ? Dans lequel tu as défini une ligne <tr>, mais où tu as oublié de définir une colonne <td>. Enfin, tu ajoutes un paragraphe vide, inutile lui aussi ? Ecris tout simplement

 

<div id="bas"><img src="images/banniere-bas.jpg" /></div>

Ensuite, peu importent les dimensions de la <div>, elle s'ouvrira à celles de l'image que tu y insères. Je pense aussi que l'attribut position:relative est inutile (défaut). Ce qui donne finalement

 

#bas {text-align:center;}

div#bas est inutile, puisque "bas" est forcément une étiquette unique (id). Il faut savoir être paresseux laconique...

Au pire, si cela ne fonctionne toujours pas, essaie d'ajouter l'attribut float

 

#bas {
  float:left;
  text-align:center;
}

[Wuzz]

merci

[Dylav]

De rien, Wuzz...

 

Mais j'attends surtout de savoir si cela résoud le problème de Midiweb...