[Résolu] mon coprs ne prend pas en compte mes menus - Probleme avec css par Tuxdis - page 1

Bonjour tout le monde,

J'ai un petit probleme avec mon futur site. c'est que lorsque mon corps ne fait pas une certaine hauteur, le menu n'est plus dans les corps je vous montre des image pour mieu comprendre:

Image utilisateur

la c'est quand le corps a une certaine longueur donc ça c'est ce que j'aimerais avoir tout le temps o_O

et la c'est quand le corps n'est pas assez long :euh:

mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Final Fantasy Impact - Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body background="bg.gif" align="center">

<div id="corps" align="center">

<div id="banniere"><img src="header.jpg" width="100%"/></div>

<div class="menu_haut">

<ul>
<li class="ffimpact"><a href="#">FFImpact.com</a></li>
<li><a href="index.php">Accueil</a></li> |
<li><a href="#">Forum</a></li> |
<li><a href="#">Chat</a></li> |
<li><a href="livreor.php">Livre d'or</a></li> |
<li><a href="#">Contact</a></li> |
<li><a href="#">Liens</a></li>
</ul>

</div>

<div class="menu_gauche">

<img class="header" src="images_menu/final_fantasy.jpg" /> 

<a href="#">Final Fantasy I</a> 
<a href="#">Final Fantasy IV</a> 
<a href="#">Final Fantasy V</a> 
<a href="#">Final Fantasy VI</a> 

<a href="#">Final Fantasy VII</a> 
<a href="#">Final Fantasy VII AC</a> 
<a href="#">Final Fantasy VIII</a> 
<a href="#">Final Fantasy IX</a> 
<a href="#">Final Fantasy X</a> 
<a href="#">Final Fantasy X-2</a> 

<a href="#">Final Fantasy XI</a> 
<a href="#">Final Fantasy XII</a> 
<a href="#">Kingdom Hearts</a> 
 

<img class="header" src="images_menu/divers.jpg" /> 

<a href="#">lien</a> 
<a href="#">lien</a> 

<a href="#">lien</a> 

<img class="header" src="images_menu/stats.jpg" /> 

<a href="#">lien</a> 
<a href="#">lien</a> 
<a href="#">lien</a> 

</div>

<div class="menu_droit" >

<img class="header" src="images_menu/general.jpg" /> 

<a href="#">lien</a> 
<a href="#">lien</a> 
<a href="#">lien</a> 

<img class="header" src="images_menu/news_letter.jpg" /> 

<a href="#">lien</a> 
<a href="#">lien</a> 

<a href="#">lien</a> 

<img class="header" src="images_menu/partenaire.jpg" /> 

<a href="#">lien</a> 
<a href="#">lien</a> 
<a href="#">lien</a> 

</div>

<div class="contenu">

Nous sommes le Dimanche 09 Avril 2006.
 
 
</div>
<div id="copyright">Copyright © FFImapct tout droit réservé. Reproduction total ou partielle interdite</div>
</div>
<div>

</body>

</html>

body
{
margin: auto;
font-family: Times New Roman;
}

#corps
{
margin: auto;
margin-top: 15px;
width: 900px;
border: 1px solid black;
background-image: url("fond.gif");
margin-bottom: 15px;
}

.contenu
{
margin-top: 70px;
}

.menu_gauche
{

margin-right: 20px;
margin-top: 100px;
float: left;
width: 160px;
}

.menu_droit
{

margin-left: 20px;
margin-top: 100px;
float: right;
width: 160px;

}

.menu_gauche a
{
color: #322f88;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}

.menu_gauche a:hover
{
text-decoration: underline;
}

.menu_droit a
{
color: #322f88;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}

.menu_droit a:hover
{
text-decoration: underline;
}

.menu_gauche .header
{
border-top: 1px solid black;
border-bottom: 1px solid black;

}

.menu_droit .header
{
border-top: 1px solid black;
border-bottom: 1px solid black;

}

#banniere
{
background-image: url("header.jpg");
width: 100%;
height: 155px;
background-repeat: no-repeat;
margin: auto;
}

.menu_haut
{
background-image: url("menu_haut.jpg");
background-repeat: no-repeat;
margin: auto;
border-bottom: 1px dashed black;
}

.menu_haut ul
{
list-style-type: none;
text-align: center;
margin: 0px;
}

.menu_haut li
{
display: inline;
padding-left: 12px;
padding-right: 12px;
}

.menu_haut a
{
color: #322f88;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}

.menu_haut .ffimpact
{
padding-left: 0px;
margin-right: 250px;
}

#copyright
{
margin: auto;
margin-top: 25px;
background-color: #e3f5fc;
border-top: 1px dashed black;
padding: 5px;
}

a
{
color: #322f88;
}

voila

si une âme charitable passait par la

[Edit] Nyro Xeo > Titre et sous-titre inversé.

Tuxdis

9 avril 2006 à 15:50:07

Hamzah

9 avril 2006 à 15:56:57

Je pense que c'est parce que tu as mis ton menu dans le même block que ton corps.
Je me trompe?

9 avril 2006 à 16:16:42

oui si je les enleve ça me les place hors du corps

Riko

9 avril 2006 à 16:43:56

Salut, essaies d'appliquer un min-height: 600px;/*modifie cette valeur en fonction*/ à ta classe .contenu
avec le code que tu as présenté dans ton premier post.

9 avril 2006 à 16:51:51

ouai j'y ai pensé mais je pensais qu'il y avait un moyen plus adapté. Enfin bon je vais faire ça

merci

9 avril 2006 à 17:01:33

Je ne vois pas beaucooup de solution hormis d'appliquer une hauteur mini (ou une hauteur fixe).

De plus quel est l'intérêt de créer une page sans contenu?

9 avril 2006 à 17:04:58

ouai mais je croi que ça ne marche pas sous ie :S

9 avril 2006 à 17:24:29

Regardes ces pages
http://blog.alsacreations.com/2004/08/17/54-min-height-sur-internet-explorer
http://www.greywyvern.com/code/min-height-hack.html
http://wellstyled.com/css-minheight-hack.html
Je pense que cela devrait t'aider.

9 avril 2006 à 17:50:17

Oui c'est bon. merci beaucoup

mon coprs ne prend pas en compte mes menus

Probleme avec css

mon coprs ne prend pas en compte mes menus

Supprimer

Modérer

Signaler le message aux modérateurs