Bonjour à tous,
J'ai un problème de mise en page, avec des contraintes fortes liées à ce qu'il est possible de modifier ou non.
J'ai 2 divs l'un en dessous de l'autre (div1 = en haut, div2 = en bas).
Si div1 dépasse une certaine hauteur prédéfinie (ex : 100px), le contenu excédentaire doit se superposer à div2 (div2 ne pouvant jamais être plus bas dans la page que 100 pixels)
Voir l'exemple de code.
Exemples :
- div1 fait 50 pixels, div2 est placé directement en-dessous (il sera positionné automatiquement par le navigateur à 51px)
- div1 fait 130 pixels, div2 doit rester positionné à 100 pxiels, le contenu supplémentaire de 30pixels de div1 devant déborder sur div2.
Pour simuler ce comportement j'ai mis max-height:100px sur div1. ça marche à peu près, sauf que les textes de div1 et div2 sont complètement mélangés, et je ne trouve pas le moyen de faire en sorte que div1 soit véritablement positionné au dessus de div2, un peu comme une popup (pas de mélange de textes, ou de couleurs).
Contrainte : je peux toucher aux propriétés CSS de div1 et div2, mais pas au conteneur parent de div1 et div2.
Tous les idées seront les bienvenues, je sèche un peu.
Merci d'avance
Exemple de code :
Modifié par djflex68 (03 Nov 2011 - 12:05)
J'ai un problème de mise en page, avec des contraintes fortes liées à ce qu'il est possible de modifier ou non.
J'ai 2 divs l'un en dessous de l'autre (div1 = en haut, div2 = en bas).
Si div1 dépasse une certaine hauteur prédéfinie (ex : 100px), le contenu excédentaire doit se superposer à div2 (div2 ne pouvant jamais être plus bas dans la page que 100 pixels)
Voir l'exemple de code.
Exemples :
- div1 fait 50 pixels, div2 est placé directement en-dessous (il sera positionné automatiquement par le navigateur à 51px)
- div1 fait 130 pixels, div2 doit rester positionné à 100 pxiels, le contenu supplémentaire de 30pixels de div1 devant déborder sur div2.
Pour simuler ce comportement j'ai mis max-height:100px sur div1. ça marche à peu près, sauf que les textes de div1 et div2 sont complètement mélangés, et je ne trouve pas le moyen de faire en sorte que div1 soit véritablement positionné au dessus de div2, un peu comme une popup (pas de mélange de textes, ou de couleurs).
Contrainte : je peux toucher aux propriétés CSS de div1 et div2, mais pas au conteneur parent de div1 et div2.
Tous les idées seront les bienvenues, je sèche un peu.
Merci d'avance
Exemple de code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
#menuPlaceHolder
{
background-color: Green;
max-height: 100px;
display: block;
overflow: visible;
z-index: 12;
}
#display
{
background-color: Yellow;
z-index: 10;
display: block;
}
</style>
</head>
<body>
<div id="menuPlaceHolder">
COUCOU<br />
COUCOU<br />
COUCOU<br />
COUCOU<br />
COUCOU<br />
COUCOU<br />
COUCOU<br />
</div>
<div id="display">
BLABLA<br />
BLABLA<br />
BLABLA<br />
BLABLA<br />
BLABLA<br />
</div>
</body>
</html>
Modifié par djflex68 (03 Nov 2011 - 12:05)