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   -
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é:
<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.

2 réponses

Posotaz Messages postés 489 Date d'inscription   Statut Membre Dernière intervention   225
 
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.
0
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
Bonsoir.

Après les deux blocs (menu et contenu), place ceci :
<p style="clear:both;">&nbsp;</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;">&nbsp;</p> <!--À ajouter !-->
<div id="footer">
</div>
</div>

0