Problême de design fluide

Bonjour à tous et à toutes !

Voilà je me retrouve face à un problème qui n'en est peut être pas un, mais je commence à avoir un peu de mal à m'y retrouver.

Je suis en ce moment en période de stage, et l'on m'a demandé de créer un site web pour une compagnie théâtrale.

Voici déjà l'adresse pour accéder au site :
http://www.cie-candide.com/index.php"]www.cie-candide.com/index.php

Le site est optimisé pour du 1024, et le design est extensible jusqu'à du 1600 (fond flash qui s'étire).

Tout n'est pas encore en place, et quelques éléments du design manquent encore en haut de page, mais ce n'est pas là le sujet.

Je commence à bloquer au niveau de mon bas de page : les zones que j'ai prévu afin qu'elles soient extensibles en hauteur ne vont :
- soit pas jusqu'en bas (la zone de contenu principale)
- soit vont trop bas... (l'herbe sur les côtés)

Si l'on regarde bien, l'espace "en trop" de l'herbe en bas correspond à l'espace qui la sépare en haut du haut du contenu.
(j'espère que vous me suivez, mais c'est pas très difficile il n'y a qu'à regarder le haut et le bas de la page)

Mon design est construit avec des div contenant chacune une image, mais pour le contenu j'ai du ruser afin que l'herbe s'étende de la même hauteur que la zone de contenu, je l'ai donc incluse dans une même div avec le contenu.

Voici le code qui vous parlera sûrement plus :

Dans index.php :

<div class="[b]global[/b]">

<div class="[b]zone_contenu[/b]">
	<div class="[b]stretch_herbeg[/b]">
	</div>
	<div class="[b]stretch_basg[/b]">
	</div>
		<?php mosMainBody(); ?>
        <div class="[b]stretch_basd[/b]">
	</div>
        <div class="[b]stretch_herbed[/b]">
	</div>
</div>

</div>

(la balise global est celle dans laquelle tout est contenu, je n'ai pas recopié les éléments "div" qui n'étaient pas nécessaires à mon problême)

Dans template_css.css :

.[b]global[/b] {
	height: 100%;
	width: 955px;
	margin-right: -477.5px;
	position: static;
	max-width: 1600px;
	min-width: 955px;
	top: 0px;
	right: 50%;
}
.[b]stretch_basg[/b] {
	background:url(../images/index_08.png);
	background-repeat:repeat-y;
	height: 100%;
	width: 164px;
	position: absolute;
	top: 429px;
	left: -195px;
}
.[b]stretch_herbeg[/b] {
	background:url(../images/index_09.jpg);
	background-repeat:repeat-y;
	height: 100%;
	width: 31px;
	position:absolute;
	top: 429px;
	left: -31px;
}
.[b]zone_contenu[/b] {
	background-color:#EDEDED;
	max-width: 1298px;
	min-width: 644px;
	position: absolute;
	top: 171px;
	left: 195px;
	right: 116px;
}
.[b]stretch_herbed[/b] {
	background:url(../images/index_11.jpg);
	background-repeat:repeat-y;
	height: 100%;
	width: 28px;
	position:absolute;
	top: 429px;
	right: -28px;
}
.[b]stretch_basd[/b] {
	background:url(../images/index_12.png);
	background-repeat:repeat-y;
	height: 100%;
	width: 88px;
	position:absolute;
	top: 429px;
	right: -116px;
}

Voilà pour la partie qui m'intéresse, j'espère avoir été assez explicite, et merci de ne pas m'insulter si mon code n'est pas tout à fait valable.
Je suis là pour apprendre


Pour les conclusions que j'en ai tiré :

l'herbe sur les côtés va plus bas que la zone de contenu car je lui ai dit de s'étaler sur 100% de sa hauteur.

Hors, je lui ai également dit de commencer plus bas que la zone de contenu afin de concorder avec mon design initial.

.stretch_herbeg {
	background:url(../images/index_09.jpg);
	background-repeat:repeat-y;
	[b]height: 100%;[/b]
	width: 31px;
	position:absolute;
	[b]top: 429px;[/b]
	left: -31px;
}

De là vient mon problême, la solution parfaite serait de pouvoir mettre dans le code une opération mathématique telle que
height: (100% - 429) px ;

Dans ce cas, l'herbe prendrait bien la valeur qui correspond aux 100% du contenu en hauteur (car bien entendu cette valeur varie selon le contenu), et supprimerait les 429px fixes du contenu, qui dépassent de la zone d'herbe tout en haut.

Mais malheureusement c'est impossible à faire (enfin je dis ça je dis rien), et il me faudrait donc une solution alternative.

(Mettre des sortes de spacer transparents qui fassent office de "bouchon" ?)


J'ai également un autre problème qui est sûrement plus simple à régler, c'est que sur une page dont le contenu est très restreint, la zone blanche ne s'étire pas jusqu'en bas de la page internet.
Par exemple :
http://www.cie-candide.com/index.php?option=com_content&view=article&id=49&Itemid=78

Est-ce qu'il y aurait un moyen de dire au site d'avoir une zone minimale à remplir (comme une hauteur complète d'écran)?

Et merci d'avance !!

PS : si vous avez besoin de plus amples informations ou du code complet, n'hésitez pas à demander !
Modifié par Derzone (27 Jul 2008 - 13:14)