28173 sujets

CSS et mise en forme, CSS3

CSS:hauteur variable d'une bannière selon le texte,...

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 bannière se mélange au texte quand celui-ci est trop long ou atteint plus que 600pixels en hauteur. Qui peut me conseiller ?

A+
Modifié par midiweb (01 Feb 2007 - 10:03)
Bonjour,

Pourrais-tu nous donner un exemple en ligne ou une capture écran de ton problème ?
Car sans ça, on aura un peu de mal à t'orienter dans la bonne voie.
Mais, à priori, si j'ai bien compris ton problème, il ne faut pas utiliser un positionnement fixe pour ta bannière, mais que tu la places en dessous de ton contenu.
bien sûr, cela dépend fortement du code existant pour le moment Smiley cligne
salut, voici une image avec la superposition de ma bannière sur le texte. C'est un site en allemand, ce qui ne change rien au probléme.(L'image n'a pas la qualité maximale sinon elle ne se chargeait pas)
upload/3170-CSS-Site-pr.jpg
J'ai entendu parler de la propriété:

Clear:both;

mais apparement c'est pour des éléments horizontaux tandis que ici c'est vertical.
L'argument "Position" doit avoir quelle valeur?: relative, absolute, inherit.
Avec Inherit,ma bannière disparaît. Je pense que Relative est le mieux, non?
Qui a une idée? Merci
A+
Modifié par midiweb (27 Jan 2007 - 12:39)
salut, problème non résolu. Je voudrais simplement savoir pourquoi ma bannière du bas remonte dans mon texte et s'y chevauche.
Qui peut me conseiller? Merci
Bonjour,

Un conteneur global pour tout le site
head dans le flux
menu: float left -- Corps dans le flux avec un padding-left = au menu
footer : dans le flux avec propriété clear: both;

C'est une des solutions
Salut, merci pour ta contribution.
Tu écris:
a écrit :
Un conteneur global pour tout le site

comme ceci?

div#conteneur {
	
	height: 100%;
	width: 100%;
	float:left;
	  
	
}


et en HTML:

<body>
<div id="conteneur">
.......
.........


Je ne sais pas encore où placer "conteneur".
Tu ecris aussi:
a écrit :
menu: float left -- Corps dans le flux avec un padding-left = au menu

Je ne comprends pas très bien, Peux-tu être plus clair?
Voici ma nouvelle CSS avec les corrections en gras. Je l'ai essayé telle quelle mais le problème reste le même. Je cherche encore.


/* CSS Document */

[b]div#conteneur {
	
	height: 100%;
	width: 100%;
	float:left;
	  
	
}
[/b]

body {
	position: relative;
	margin: 0em;
	margin-left: 0em;
	padding: 0em;
	width: 100%;
	height: 100%;
	
}

div#haut {
	margin-bottom:auto;
	margin-top:auto;
	width: auto;
	height: 0.50em;
	color: #fff;
	font-size: 36px;
	
}


div#menu {
	position: absolute;
        [b]float:left;[/b]
	left: 24px;
	width: 107px;
	height: 420px;
	margin-top: 130px;
	top: 27px;
	
	
}

div#frame {
	position:relative;
	margin-top: 140px;
	margin-left: 140px; /* on place ce bloc à droite du bloc menu de 180px de large */
	margin-bottom: 0px;
	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;
	top: 0px;
	
}

div#bas {
	
	margin:0px;
	margin-top:0px;
	width: 860px;
	height: 30px;
        [b]clear:both[/b]
	
}

</style>
Sujet clos
Aller à