Avoir la longueur d'une div de la même qu'une
Résolu
Sarti
-
imw Messages postés 233 Date d'inscription Statut Membre Dernière intervention -
imw Messages postés 233 Date d'inscription Statut Membre Dernière intervention -
Salut à vous,
mon site web est fait de façon classique: un header, en dessous à gauche le menu à droite le corps du site et enfin en bas le footer.
J'ai une div par "section".
Mon menu est composé d'une image, et est donc d'une longueur fixe avec en arrière-plan un fond qui se répète.
La longueur du corps est bien évidemment variable en fonction de la page...
J'aimerais que la div du menu arrive au même niveau que celle du corps en hauteur, en bas de la page... vous imaginez ou pas ?
Voici les codes (des deux parties qui m'intéressent):
HTML:
<div id="menu">
<img src="images/menu.gif">
</div>
<div id="main">
<h1>Bienvenue !</h1>
<p>
essai
</p>
</div>
CSS:
#menu
{
float: left;
width: 226px;
height: 100%;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
}
#main
{
margin-left: 226px;
padding: 3px;
background-image: url("images/designgite2_04.jpg");
background-repeat: repeat-y;
}
Merci beaucoup !!
mon site web est fait de façon classique: un header, en dessous à gauche le menu à droite le corps du site et enfin en bas le footer.
J'ai une div par "section".
Mon menu est composé d'une image, et est donc d'une longueur fixe avec en arrière-plan un fond qui se répète.
La longueur du corps est bien évidemment variable en fonction de la page...
J'aimerais que la div du menu arrive au même niveau que celle du corps en hauteur, en bas de la page... vous imaginez ou pas ?
Voici les codes (des deux parties qui m'intéressent):
HTML:
<div id="menu">
<img src="images/menu.gif">
</div>
<div id="main">
<h1>Bienvenue !</h1>
<p>
essai
</p>
</div>
CSS:
#menu
{
float: left;
width: 226px;
height: 100%;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
}
#main
{
margin-left: 226px;
padding: 3px;
background-image: url("images/designgite2_04.jpg");
background-repeat: repeat-y;
}
Merci beaucoup !!
A voir également:
- Avoir la longueur d'une div de la même qu'une
- Div c++ - Télécharger - Langages
- Mesurer longueur avec telephone - Guide
- Ce mot de passe ne répond pas aux critères de longueur, de complexité, de date ou d'historique de la stratégie de mot de passe de votre entreprise. - Forum Windows
- Longueur iban invalide - Forum Réseaux sociaux
- Remplacer #div/0 par vide - Forum Bureautique
4 réponses
A priori, tu ne peux pas dire en css que tu veux qu'un div fasse la même dimension qu'un autre ...
La solutions sont :
- soit rajouter un div autour du menu+main, de passer menu et main en float left, et rajouter après le main un <br style='clear: both;' /> qui va forcer le div parent à aller jusqu'au bas du plus grand des 2 autres ... Il te suffit ensuite de mettre le background du menu dans le div parent ...
- sinon, il est possible en javascript de récupérer la taille du div main et de l'appliquer au div menu ...
La solutions sont :
- soit rajouter un div autour du menu+main, de passer menu et main en float left, et rajouter après le main un <br style='clear: both;' /> qui va forcer le div parent à aller jusqu'au bas du plus grand des 2 autres ... Il te suffit ensuite de mettre le background du menu dans le div parent ...
- sinon, il est possible en javascript de récupérer la taille du div main et de l'appliquer au div menu ...
Ok merci ça marche.
Seulement, un problème en soulève un autre... maintenant que j'ai mon menu et mon corps de site qui sont à la même hauteur, j'ai un espace qui s'est créé entre le footer et le duo menu/corps...
Voici les codes:
HTML:
<div id="container">
<div id="menu">
<img src="images/menu.gif">
</div>
<div id="header2">
</div>
<div id="main">
<h1>Bienvenue !</h1>
<p>
essai
</p>
</div>
</div>
<br style='clear: both;' />
<div id="footer">
</div>
CSS:
#container
{
width: 800px;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
margin-bottom: 0px;
}
#menu
{
float: left;
width: 226px;
height: 100%;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
}
#main
{
margin-left: 226px;
padding: 3px;
background-image: url("images/designgite2_04.jpg");
background-repeat: repeat-y;
}
#footer
{
width: 800px;
height: 144px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;
margin-bottom: 0px;
}
Merci !!
Seulement, un problème en soulève un autre... maintenant que j'ai mon menu et mon corps de site qui sont à la même hauteur, j'ai un espace qui s'est créé entre le footer et le duo menu/corps...
Voici les codes:
HTML:
<div id="container">
<div id="menu">
<img src="images/menu.gif">
</div>
<div id="header2">
</div>
<div id="main">
<h1>Bienvenue !</h1>
<p>
essai
</p>
</div>
</div>
<br style='clear: both;' />
<div id="footer">
</div>
CSS:
#container
{
width: 800px;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
margin-bottom: 0px;
}
#menu
{
float: left;
width: 226px;
height: 100%;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
}
#main
{
margin-left: 226px;
padding: 3px;
background-image: url("images/designgite2_04.jpg");
background-repeat: repeat-y;
}
#footer
{
width: 800px;
height: 144px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;
margin-bottom: 0px;
}
Merci !!
Suite aux conseils qu'on m'a donné, j'ai créer une div pour l'ensemble Menu / Corps... et ça marche.
Seulement, un problème en soulève un autre... maintenant que j'ai mon menu et mon corps de site qui sont à la même hauteur, j'ai un espace qui s'est créé entre le footer et le duo menu/corps...
Voici les codes:
HTML:
<div id="container">
<div id="menu">
<img src="images/menu.gif">
</div>
<div id="header2">
</div>
<div id="main">
<h1>Bienvenue !</h1>
<p>
essai
</p>
</div>
</div>
<br style='clear: both;' />
<div id="footer">
</div>
CSS:
#container
{
width: 800px;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
margin-bottom: 0px;
}
#menu
{
float: left;
width: 226px;
height: 100%;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
}
#main
{
margin-left: 226px;
padding: 3px;
background-image: url("images/designgite2_04.jpg");
background-repeat: repeat-y;
}
#footer
{
width: 800px;
height: 144px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;
margin-bottom: 0px;
}
Merci !!
Seulement, un problème en soulève un autre... maintenant que j'ai mon menu et mon corps de site qui sont à la même hauteur, j'ai un espace qui s'est créé entre le footer et le duo menu/corps...
Voici les codes:
HTML:
<div id="container">
<div id="menu">
<img src="images/menu.gif">
</div>
<div id="header2">
</div>
<div id="main">
<h1>Bienvenue !</h1>
<p>
essai
</p>
</div>
</div>
<br style='clear: both;' />
<div id="footer">
</div>
CSS:
#container
{
width: 800px;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
margin-bottom: 0px;
}
#menu
{
float: left;
width: 226px;
height: 100%;
background-image: url("images/menu_.png");
background-repeat: repeat-y;
}
#main
{
margin-left: 226px;
padding: 3px;
background-image: url("images/designgite2_04.jpg");
background-repeat: repeat-y;
}
#footer
{
width: 800px;
height: 144px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;
margin-bottom: 0px;
}
Merci !!
