Placer un div correctement
Wallabix
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour à tous,
Je suis en pleine réalisation de mon site web, hélas, j'ai un petit problème, en effet, sur ma page principale, je fais apparaitre une barre verticale contenant un menu,... et à la droite de ce menu, un script de news qui devrait faire son apparition sous peu. Hélas, ma page web ne s'étend pas tant que il n'y a pas X lignes de news, de ce fait, mon menu déborde en plein.
https://imageshack.com/
Voici mon code HTML épuré:
Et le code CSS utilisé (Toujours épuré):
Quelqu'un aurait-il la solution à ce problème?
D'avance merci,
Wallabix.
Je suis en pleine réalisation de mon site web, hélas, j'ai un petit problème, en effet, sur ma page principale, je fais apparaitre une barre verticale contenant un menu,... et à la droite de ce menu, un script de news qui devrait faire son apparition sous peu. Hélas, ma page web ne s'étend pas tant que il n'y a pas X lignes de news, de ce fait, mon menu déborde en plein.
https://imageshack.com/
Voici mon code HTML épuré:
<div id="content"> <div id="en-tete"> <!-- Div En tête --> <div id="menu1"><a href="#">Accueil</a> - <a href="#">Dossiers</a> - <a href="#">Galleries</a> - <a href="#">Livre d'or</a></div> </div> <div id="menu2"> <h2>Menu</h2> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Dossiers</a></li> <li><a href="#">Kits graphiques</a></li> <li><a href="#">Les sites web</a></li> <li><a href="#">Livre d'or</a></li> </ul> <h2>Espace Membre</h2> <p align="center"> Ceci concerne l'espace membre du site </p> <h2>Liens Web</h2> </div> <div id="corps"> <p>News...News...</p> </div> <div id="footer"> </div> </div>
Et le code CSS utilisé (Toujours épuré):
#content { font-family: Arial; height: auto; background-image: url("./images/corps.png"); background-repeat: repeat-y; background-position: center; } #menu2 { width: 196px; float: left; text-align : justify; background: transparent; } #corps { width: auto; height: auto; overflow: hidden; }
Quelqu'un aurait-il la solution à ce problème?
D'avance merci,
Wallabix.
A voir également:
- Placer un div correctement
- Placer des points sur une carte - Guide
- Div c++ - Télécharger - Langages
- La fenetre actuelle est trop petite pour afficher correctement cette feuille - Forum Google Docs
- Remplacer #div/0 par vide ✓ - Forum Excel
- Arnaud veut s’adresser directement à son ami marc dans un message sur un réseau social. quel symbole doit-il placer dans son message devant le nom d’utilisateur de marc ? - Forum Windows XP
2 réponses
Bonjour Wallabix et bienvenue sur le forum de CCM.net !
Le jour où j'ai développé mon premier site Web, j'ai été confronté au même problème étant donné que mon menu était positionné de manière absolue (le footer venait se mettre sous le menu). Le problème, par contre, ne devrait pas se produire avec des positionnements relatifs mais il faut bien penser à mettre un "clear: both" puisque tu utilises un cadre flottant.
Bref, la façon dont j'ai résolu mon problème n'est pas très jolie mais j'ai tout simplement forcé la hauteur minimale de mon DIV de contenu :
#bloc_contenu {
min-height: 400px;
}
Ce qui implique que mon menu était relativement figé et prenait une hauteur maximale de 400px... ça a fonctionné pour moi, j'espère que ça te dépannera.
Le jour où j'ai développé mon premier site Web, j'ai été confronté au même problème étant donné que mon menu était positionné de manière absolue (le footer venait se mettre sous le menu). Le problème, par contre, ne devrait pas se produire avec des positionnements relatifs mais il faut bien penser à mettre un "clear: both" puisque tu utilises un cadre flottant.
Bref, la façon dont j'ai résolu mon problème n'est pas très jolie mais j'ai tout simplement forcé la hauteur minimale de mon DIV de contenu :
#bloc_contenu {
min-height: 400px;
}
Ce qui implique que mon menu était relativement figé et prenait une hauteur maximale de 400px... ça a fonctionné pour moi, j'espère que ça te dépannera.
Bonsoir.
Après les deux blocs (menu et contenu), place ceci :
Ainsi, si le contenu est plus long, le paragraphe se placera en dessous comme il le ferait normalement et si c'est le bloc flottant qui est le plus long, il se placera en dessous grâce à clear:both;
Voici à quoi ressemblera le code :
Après les deux blocs (menu et contenu), place ceci :
<p style="clear:both;"> </p>
Ainsi, si le contenu est plus long, le paragraphe se placera en dessous comme il le ferait normalement et si c'est le bloc flottant qui est le plus long, il se placera en dessous grâce à clear:both;
Voici à quoi ressemblera le code :
<div id="content"> <div id="en-tete"> <!-- Div En tête --> <div id="menu1"><a href="#">Accueil</a> - <a href="#">Dossiers</a> - <a href="#">Galleries</a> - <a href="#">Livre d'or</a></div> </div> <div id="menu2"> <h2>Menu</h2> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Dossiers</a></li> <li><a href="#">Kits graphiques</a></li> <li><a href="#">Les sites web</a></li> <li><a href="#">Livre d'or</a></li> </ul> <h2>Espace Membre</h2> <p align="center"> Ceci concerne l'espace membre du site </p> <h2>Liens Web</h2> </div> <div id="corps"> <p>News...News...</p> </div> <p style="clear:both;"> </p> <!--À ajouter !--> <div id="footer"> </div> </div>