Mise en page css étirable

Version imprimable

21/05/2012, 21h30
killerhertz

1 pièce(s) jointe(s)

Mise en page css étirable

Bonjour,
je bloque sur un probleme de mise en page :
voici un schema explicatif, je voudrais que mon contenu (texte) traverse les div contenu haut, contenu etirable et contenu bas et bien sur que la div "contenu etirable" s'étire selon la hauteur du texte.
N'hesitez pas à me poser les questions car c'est pas super facile à expliquer mais le but est bien sur graphique car chaque div à un background unique qui forme le theme.
En vous remerciant
27/05/2012, 16h03
killerhertz

Si vous voulez je reformule mais il doit bien y avoir une solution pour faire une grande zone de texte avec deux images différentes de fond, une fixe et l'autre étirable suivant le contenu général.
Merci
27/05/2012, 17h03
elfamine

Bonjour,

le texte n'arrivera jamais à la zone "Contenu bas" puisque la zone "Contenu étirable", comme son nom l'indique, va s’étirer tant qu'il y a du contenu non ?

Je pense qu'il suffit d'avoir une seule image background avec un dégradé couleur uni en bas de l'image. En supposant que #ffffff soit cette couleur :

Code:

background:#ffffff url('image.png') no-repeat right top;
27/05/2012, 19h06
killerhertz

Oui je vois ce que tu veux dire mais en fait je souhaite ecrire sur une feuille de papier, il y a une ombre en haut et en bas de celle-ci donc on ne peut pas repeter leur background. Au milieu i a simplement des lignes et c'est là que je voudrais faire repeter le background tout en ecrivant le debut et la fin sur les autres.
Je pensais faire une div qui regroupe les 3 div (haut, etirable et bas) avec un height à 100%. le haut et bas serait fixe et le milieu se repeterait suivant la longueur du texte.
Je pourrais tricher et ecrire en dure le contenu du haut puis le milieu et dans une derniere div le contenu du bas mais sur certaines pages j'ai du contenu dynamique dont je ne connais pas la lg a l'avance.

C'est faisable ou alors il faut que j'oublie?
Merci
27/05/2012, 19h53
elfamine

Est ce que tu pourrais mettre les images ou l'image background que tu compte utiliser ?
28/05/2012, 10h12
killerhertz

1 pièce(s) jointe(s)

Voici donc une esquisse du fond de mon texte, séparé en 3 parties.
J'avance sur le contenu mais je suis toujours bloqué sur la mise ne page.
Merci
28/05/2012, 10h58
elfamine

Vous chercher un résultat qui se rapproche de ca ?
28/05/2012, 16h56
killerhertz

Oui c'est exactement cela, sauf que j'écris sur l'image haute en gras. Par contre il faut que ce soit une seule grande zone de texte et non 3.
Vous etes sur une piste?
Merci
28/05/2012, 17h15
elfamine

vous écrivez sur l'image du haut ? j'imagine mal du texte à ce niveau...

ca serait bien d'avoir plus de précisions concernant ce texte en gras :

- vous comptez le positionner de quelle façon par rapport à "Maintien des personnes..." ?
- le texte est générer dynamiquement ?
28/05/2012, 17h35
killerhertz

En fait le logo haut et plus clair (comme le bas), et je suis obliger d'écrire dessus car je veux reprendre la chartre graphique des documents qui sont comme cela. On il faut que j ecrive dessus en gras.
Ma première page sera composer de lien RSS donc oui, la longueur va varier d'une semaine sur l'autre.
Merci

http://img1.UploadScreenshot.com/ima...4802454886.png

j'ai un petit peu de mal à comprendre ce que tu cherche à réaliser
en tout cas voila mon code html

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="page">
	<div id="enTete"></div>  /* code obsolète */
	<div id="contenu">
		<p class="first"><--texte--></p>
		<p><--texte--> </p>	
		<p><--texte--></p>
		<p><--texte--> </p>
	<p class="last"><--texte--></p>
	</div>
	<div id="piedDePage"></div>
</div>

et le css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
  min-width: 960px;
}
 
#page{
	background:#ffffed url('contenu.png')no-repeat bottom center;
	width: 460px;}
#enTete{
	height: 0; /* code obsolète */
	 }
#contenu{
	background:url('header.png')no-repeat top center;
	min-height: 300px;
 
	top: 0;}
#piedDePage{
	height: 50px;
	background-color: #dee389;}
p{	
	padding: 0 5px;
	}
.first{
	font-weight: bold;
	margin-top: 0;
	padding-top: 0;}
.last{
	margin-bottom: 0;
	padding-bottom: 0;}

ps :
header.png : http://i.imgur.com/gqDxT.png
contenu.png : http://i.imgur.com/urJHX.png

j'ai du faire un petit traitement sur les images pour unifier la couleur de fond

28/05/2012, 18h14
killerhertz

Ouaip l'image ressemble vraiment à ce que je veux faire.
J'avais deja essaer le min-height, ca avait pas marché mais je vais essayer ton code.
content ca avance
28/05/2012, 18h50
killerhertz

Ok parfait ca marche c'est ca, juste un petit detail c'est que le min-height du contenu ne fonctionne pas, en effet si on met 5 ligne de texte le background est coupé.
Merci par contre j'aurais eu besoin de 3 bloc d'arrière plan mais je peux m'adapter a cela.
28/05/2012, 19h08
elfamine

Faudrait qu'on puisse voir ton code adapté (html+css) pour se prononcer sur ce qui ne fonctionne pas :aie:

Merci beaucoup de votre aide, comme d'ab pas deçu.
Je me suis servi de votre code et j'ai rajouté du javascript qui recupere la hauteur du div texte soustrait l'entete et le bas de page et donne le resultat au background etirable :
Code:

1 2 3 4 5 6 7 <script type="text/javascript" language="Javascript"> var HauteurTexte = document.getElementById("MonTexte").offsetHeight; document.getElementById("BordureGaucheRepetable").style.height = HauteurTexte + 'px;'; document.getElementById("ContenuRepetable").style.height = HauteurTexte + 'px;'; document.getElementById("BordureDroiteRepetable").style.height = HauteurTexte + 'px;'; </script>