CSS: haurteur variable d'une bannière et text Fermé

Question

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. Qui peut me conseiller ?

A+

Ssylvainsab · Answer

Salut.

Si j'ai bien compris, tu souhaite que le corps reste dans un seul bloc fixe, avec une barre de défilement verticale, et la bannière juste en-dessous ?
Pour ca, tu peux définir une hauteur à ton bloc (voir css definir une hauteur verticale et relative a un element ), et ensuite utiliser "overflow:scroll" sur le bloc.

Est-ce que tu as mis la page en ligne, pour voir le code ?

a plus

Gihef · Answer

Bonjour,

Tu trouveras une solution dans ce post.

midiweb · Answer

salut, oui cela, je le savais, "overflow:scroll" mais c'est justement ce que je ne veux pas faire car cela nuit à l'esthétique du site et aussi...mon "client" voudrait, si c'est possible, que la bannière suive le texte.
Donc, si le texte est plus long, la banière descend, si le texte suivant est plus court, la baniière remonte. Ni plus, ni moins.

Ssylvainsab · Answer

Comment est placée ta bannière ?
Si elle est juste en-dessous du bloc, ca ne marche pas ?

Est-ce que tu as une page en ligne ?

midiweb · Answer

salut, voici d'abord le code HTML:

-->

ensuite la CSS correspondante: div#bas { position:relative; /*margin-top: auto;*/ width: 1024px; text-align: center ; clear: both; } J'ai désactivé (en commentaire) ce dont je n'étais pas sûr. a+

midiweb · Answer

salut, problème pas encore résolu.
Rappel: ma banniètre positionnée par des css en dessous de ma page, se superpose au texte du milieu, sauf sous IE6.
Voici ma feuille css complète. Mon site n'est pas encore en ligne.
Je voudrais que ma bannière suive le texte quand le texte devient plus long et remonte quand le texte devient plus court. Je ne veux pas utiliser le overflow.auto; qui permet les ascenseurs pour visionner un texte trop long.
/* CSS Document */

div#arial {

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

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;
clear:right;
}

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 {
width: 860px;
height: 30px;
text-align: center;
float: none;
background-image: url(bilder/banner-unten.jpg);

}

</style>

Merci de m'aider. A+

midiweb · Answer

salut, erreur, je corrige: background-image: url(bilder/banner-unten.jpg); est faux. , c'est rfemplacé en html par:

Voici ma nouvelle feuille css: /* CSS Document */ div#arial { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } 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; clear:right; } 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; }

CSS: haurteur variable d'une bannière et text

7 réponses

Discussions similaires