Placer un div correctement

Fermé
Wallabix Messages postés 1 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 24 janvier 2009 - 24 janv. 2009 à 17:54
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 24 janv. 2009 à 23:10
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 samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 225
24 janv. 2009 à 23:00
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 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
24 janv. 2009 à 23:10
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