Deux DIVs qui se chevauchent
Ayuniverse77
-
Ayuniverse77 -
Ayuniverse77 -
Bonjour,
je suis en train d'intégrer mon forum phpbb dans le nouveau design de mon site. J'utilise actuellement une structure de ce type :
<div id"=header">
</div>
<div id="milieu">
<div id="leftdiv"></div>
<div id="content">Le forum</div>
<div id="rightdiv"></div>
<div id="mybottom"></div>
</div>
Le bloc milieu est positionné en relative. Les blocs "leftdiv" et "rightdiv" sont positionnés en absolute, le bloc "content" est positionné en relative, avec un margin-right pour ne pas qu'il "passe sous" rightdiv.
Ca fonctionne très bien, le problème est que lorsqu'une grosse image est postée, ou une longue chaine de caractères, le contenu de "content" passe sous rightdiv, alors que je voudrais que "content" et donc "milieu" s'adaptent au contenu et s'élargissent automatiquement, quitte à ce qu'on se retrouve avec un scrolling horizontal pour afficher le site entier.
Si quelqu'un voit le problème.... :(
Merci d'avance
je suis en train d'intégrer mon forum phpbb dans le nouveau design de mon site. J'utilise actuellement une structure de ce type :
<div id"=header">
</div>
<div id="milieu">
<div id="leftdiv"></div>
<div id="content">Le forum</div>
<div id="rightdiv"></div>
<div id="mybottom"></div>
</div>
Le bloc milieu est positionné en relative. Les blocs "leftdiv" et "rightdiv" sont positionnés en absolute, le bloc "content" est positionné en relative, avec un margin-right pour ne pas qu'il "passe sous" rightdiv.
Ca fonctionne très bien, le problème est que lorsqu'une grosse image est postée, ou une longue chaine de caractères, le contenu de "content" passe sous rightdiv, alors que je voudrais que "content" et donc "milieu" s'adaptent au contenu et s'élargissent automatiquement, quitte à ce qu'on se retrouve avec un scrolling horizontal pour afficher le site entier.
Si quelqu'un voit le problème.... :(
Merci d'avance
A voir également:
- Deux DIVs qui se chevauchent
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Nombre de jours entre deux dates excel - Guide
- Deux whatsapp sur un téléphone - Guide
- Connecter deux airpods mac - Guide
6 réponses
salut !
fonction css = scroll auto sur ton div où il peut y avoir des images trop longues. (regarde sur google pour la synthaxe exacte).
fonction css = scroll auto sur ton div où il peut y avoir des images trop longues. (regarde sur google pour la synthaxe exacte).
Merci pour ta réponse, c'est presque ce que je veux faire. Disons que là ca met une scroll bar sur le div trop petit, alors que j'aimerais que ce div prenne autant de place que nécessaire, quitte à ce que le site entier se retrouve avec une scrollbar. Mais dans le pire des cas, j'utiliserai cette solution. Merci à toi
Dans ce cas, place tout en element absolute et en z-index de même niveau.
Le problème c'est que si un site est en scrollbar horizontal, ça fait horiblement moche.
Bon courage !
Le problème c'est que si un site est en scrollbar horizontal, ça fait horiblement moche.
Bon courage !
Si je fais ca, ca fait foirer l'affichage de mes menus en hauteur (qui prennent toute la hauteur nécessaire à l'affichage de "content").
Ce que je ne comprends pas, c'est comment ma div "content" peut "sortir" de sa div parente "milieu" alors qu'aucune des deux n'a de restriction de largeur.... Pourquoi ne s'élargissent-elles pas tout simplement ? Voici l'extrait de mon CSS :
#milieu
{
position:relative;
height: 100%;
top: 0px;
background-color: #FFFFFF;
min-width: 1002px;
}
#content
{
position: relative;
left: 145px;
top: 5px;
height: 100%;
min-height: 1200px;
margin-bottom: 20px;
margin-left: 5px;
margin-right: 295px;
}
#rightdiv
{
position: absolute;
top: -1px;
right: 0px;
width: 140px;
height: 100%;
background-image: url("images/fond-menu.jpg");
text-align: justify;
border: 1px solid black;
}
#leftdiv
{
position: absolute;
top: -1px;
width: 140px;
height: 100%;
left: 0px;
background-image: url("images/fond-menu.jpg");
border: 1px solid black;
}
Ce que je ne comprends pas, c'est comment ma div "content" peut "sortir" de sa div parente "milieu" alors qu'aucune des deux n'a de restriction de largeur.... Pourquoi ne s'élargissent-elles pas tout simplement ? Voici l'extrait de mon CSS :
#milieu
{
position:relative;
height: 100%;
top: 0px;
background-color: #FFFFFF;
min-width: 1002px;
}
#content
{
position: relative;
left: 145px;
top: 5px;
height: 100%;
min-height: 1200px;
margin-bottom: 20px;
margin-left: 5px;
margin-right: 295px;
}
#rightdiv
{
position: absolute;
top: -1px;
right: 0px;
width: 140px;
height: 100%;
background-image: url("images/fond-menu.jpg");
text-align: justify;
border: 1px solid black;
}
#leftdiv
{
position: absolute;
top: -1px;
width: 140px;
height: 100%;
left: 0px;
background-image: url("images/fond-menu.jpg");
border: 1px solid black;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question