High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

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

Dernière réponse le 30 jan 2007 à 00:21:11 midiweb, le 18 jan 2007 à 13:42:04 
 Signaler ce message aux modérateurs

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+

Configuration: Windows XP
Firefox 2.0.0.1

Meilleures réponses pour « CSS: haurteur variable d'une bannière et text » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Posez votre question Répondre

1

Ssylvainsab, le 18 jan 2007 à 14:39:59

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 Sylvain
"Join us now, and share the software. You'll be Free, hackers."

   
Répondre à Ssylvainsab

2

Gihef, le 18 jan 2007 à 14:51:00

Bonjour,

Tu trouveras une solution dans ce post.
 

   
Répondre à Gihef

3

midiweb, le 18 jan 2007 à 17:05:34

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.

   
Répondre à midiweb

4

Ssylvainsab, le 18 jan 2007 à 18:51:11

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 ? Sylvain
"Join us now, and share the software. You'll be Free, hackers."

   
Répondre à Ssylvainsab

5

midiweb, le 18 jan 2007 à 19:14:01

Salut, voici d'abord le code HTML:
<div id="bas">
<img border="1" src="image/banner-bottom.jpg" />-->

</div>

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+

   
Répondre à midiweb

6

midiweb, le 30 jan 2007 à 00:04:58

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+

   
Répondre à midiweb

7

 midiweb, le 30 jan 2007 à 00:21:11

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

<div id="bas">
<table>
<tr>
<img src="bilder/banner-unten.jpg" /> </tr>
</table>
<p align="center"> </p>
</div>


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;


}

</style>

   
Répondre à midiweb
Posez votre question Répondre
Ils ont besoin de votre aide