28220 sujets

CSS et mise en forme, CSS3

Problème extensibilité sous FF.

Bonjour,

Je suis actuellement sur une découpe de design avec menu et navigation extensible. Le tout étant indépendant... c'est-à-dire que si la navigation s'allonge, le menu reste à sa taille normal. Et si le menu s'allonge (plus grand que la navigation), la navigation reste à sa taille normal.

Voici un screen pour vous montrer de quoi je parle (SOUS IE, TOUT EST NIKEL): ICI

Le problème se passe en fait sous FF... Si la navigation est plus grande que le menu, le bas du menu se place à la même ligne que le bas de la navigation...

Voici un screen pour vous montrer de quoi je parle (SOUS FF, CA FOIRE): ICI

Voici mon style.css:

body
{
background-color : #2A3033;
margin: auto;
width: 820px;
margin-top: 15px;
}
p
{
margin-top : 0px;
margin-left : 0px;
font-size: 12px;
font-family: Tahoma;
text-align: justify;
}
.lien
{
margin-top: 0px;
margin-left: 40px;
font-size: 10px;
font-family: Arial;
}
a.lienmenu, a.lienmenu:visited, a.lienmenu:active
{
text-decoration: none;
color: #C1C1C1;
}
a.lienmenu:hover
{
text-decoration: underline;
color: #1B6FAF
}
.nav
{
margin-top: 0px;
margin-left: 15px;
margin-right: 33px;
color: #C1C1C1;
}
#header
{
width: 820px;
height: 151px;
background-image: url(images/header.png);
}
#hautmenu
{
float: left;
width: 169px;
height: 38px;
background-image: url(images/hautmenu.png);
}
#hautnavigation
{
float: right;
width: 651px;
height: 38px;
background-image: url(images/hautnavigation.png);
}
#milieumenu
{
clear: both;
float: left;
width: 169px;
height: 100%;
background-image: url(images/milieumenu.png);
}
#milieunavigation
{
float: right;
width: 651px;
height: 100%;
background-image: url(images/milieunavigation.png);
}
#basmenu
{
clear: both;
float: left;
width: 169px;
height: 34px;
background-image: url(images/basmenu.png);
}
#basnavigation
{
float: right;
width: 651px;
height: 34px;
background-image: url(images/basnavigation.png);
}
#copyright
{
clear: both;
width: 820px;
height: 32px;
background-image: url(images/copyright.png);
}
#global
{
width: 820px;
height: 100%;
background-image: url(images/global.png);
}


J'espère que j'ai été clair sur le problème et que vous parviendrez à m'aider Smiley cligne

Merci d'avance!!!
sans le code html, ce n'est pas facile ...
J'ai l'impression que tu te compliques la vie avec les flottants. Puisque la largeur de ta page est fixe, pourquoi ne pas utiliser simplement deux conteneurs, un pour le menu et un pour le contenu, et ne mettre en float que le conteneur du menu ?

<div id="header"> ... </div>
<div id="conteneur">
<div id="conteneur_menu">
<div id="menu">...</div>
<div id="bas_menu">...</div>
</div>
<div id="contenu">...</div>
</div>
<div id="footer">...</div>


Et dans le CSS : 

#conteneur_menu {
width: /*Largeur du menu en px ou %, ça marche aussi */ ;
float: left ;
}

#contenu {
margin-left: /* La largeur du menu + une marge éventuelle */ ;
}

#footer {
clear: both ;
}


En réglant les marges et en plaçant correctement les images, ça ne devrait pas poser de problèmes.
Sujet clos
Aller à