Menu horizontal fixe en bas de la page...

Bonjour à tous,
Je me suis renseigné à maintes reprises à ce sujet sans trouver de réponses...
Plusieurs "sujets" s'en approchent mais ne répondent pas à la question !

Je cherche à concevoir un site avec un menu qui reste collé en bas de la page quelque soit la taille de mon navigateur et de ma page (et quelque soit mon navigateur d'ailleurs).
Si le contenu d'une page dépasse la taille de la fenêtre nous aurons alors un ascenseur pour faire défiler le reste de la page sans que cela affecte la position du menu.
Ce menu s'augmente d'une ligne vers le haut a chaque fois que l'on va plus profondément dans l'arborescence.
Soit une ligne par niveau... vous me suivez ?
Ajoutez à cela que mon menu à une semi transparence, permettant ainsi de voir le contenu du bas de la page que l'on peut faire dérouler.
A noter tout de même que je prévois une marge inférieure sur la page qui me permet d'être lisible hors du menu.
Sous ce menu je prévois de mettre un contenu de largeur fixe (mettons 800px) qui soit délimité par un border et dont la couleur de fond est différente de celle de la page.
L'effet recherché étant un bloc qui remplit l'espace (du haut jusqu'au bas de la page), peut importe la taille du contenu.

A partir de ce point j'ai un problème que j'ai partiellement résolu :
le menu est en "positon: fixed" et "bottom: 0px", (jusque là pas de soucis) et fonctionne sous toutes les plateformes, pas de problème non plus pour l'opacité.
Mon soucis se pose pour le block qui contient mon texte, qui comme énoncé plus haut, se distingue par sa couleur de fond + border du fond de la page.
soit par défaut ce dernier se limite au contenu et s'il est petit le cadre ne descends pas jusqu'au bas de la page
soit je force la taille de mon cadre en px mais je risque d'être trop grand ou trop petit fonction la taille de mon contenu.
soit je défini une taille énorme + max-height : auto mais IE6 ne ne le gère pas.

bref je sèche un peu sur ce point !

Merci beaucoup d'avance...

PS : je vous promets de mettre à dispostion mon problème sur le web rapidement, dès que mon site perso sera dispo sur free...

A bientôt
Modifié par cbienvu (03 Aug 2007 - 00:25)

beuh... pas de réponse...
Il faut dire que ce n'est pas évident de s'imaginer la chôse !
Aussi j'ai un peu bossé (si si !!!) et je vous ai donc mis en ligne un mini site pour vous montrer.
Le choix des couleurs les typos et tout le reste n'est pas important c'est juste l'idée qu'il faut voir.
Actuellement cela fonctionne correctement sous safari et firefox, mais IE ne veut rien savoir.
Le CSS (style.css) et le html sont assez propre et les ID/Class sont suffisament explicites (à mon gout).
J'espére que ce sera plus facile pour m'indiquer une solution.
Merci encore !
Assez parlé voici la page : http://cmontest.free.fr/exemple1
Modifié par cbienvu (03 Aug 2007 - 00:25)

Bonjour,

IE6 ne gérant position: fixed, ben ça va être coton
Même en lui faisant une css à sa main et compte tenu de ton code, je ne pense pas que ce soit réalisable. A moins peut être de reprendre plus simplement ton code en laissant un maximum de blocs dans le flux et de dégrader le position: fixed du footer en position: absolute botton: 0 pour IE6 afin d'avoir quelque chose de correct sous ce navigateur !
Plus facile à dire qu'à faire

Merci Ghost pour ta réponse !
Effectivement s'il faut tout reprendre depuis le début car IE ne le gère pas correctement c'est pas gagné.
D'un autre coté il me semblait que c'était le min-height qui lui posait problème...
J'ai donc fait un exemple sans max-height, et avec position: absolute au lieu de fixed, juste pour voir comment ça se passe : http://cmontest.free.fr/exemple2
Comme je n'ai pas d'IE6 sous la main j'utilise "netrender" : http://ipinfo.info/netrenderer
Je suis sur mac et c'est le seul moyen de pouvoir visualiser une page sur IE6 correctement, en dehors du travail. (très pratique au passage, nottament la fonction IE6/IE7 compare...)
Mais maintenant mon fond gris derrière le texte à disparu, re- !
Qu'en pensez vous ?
Merci

Bonjour,

Les positions: fixed; n'étant vraiment pas gérées par IE6, les remplacer dans ton code par des absolutes n'est pas vraiment la solution
Au préalable, il faudrait garder dans le flux (c'est à dire éviter au max les positionnements absolute) le plus possible d'éléments afin d'éviter les divergences entre les navigateurs (ie6 ). Ton design le supporte assez facilement finalement, juste une réorganisation des blocs et quelques modifications de css.
Il ne te restera plus qu'a gérer la déficience d'ie6 en remplacant les fixed par des absolutes (ce qui ne créera pas l'effet escompté) mais le footer et la navbarre se retrouveront en pied de page en bout de scroll (c'est mieux que rien !!), un simple commentaire conditionnel doit suffire.

Pour une piste de code:

	   <style type="text/css">
h1, h2, h3, h4, h5, h6, p {
	font-size: 1em;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

form {
	margin:0;
	padding:0;
}

fieldset {
	margin:0;
	padding:0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

li {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	text-decoration:none;
}

a img {
	border:none;
}

img {
	margin:0;
}

.clear {
	clear:both;
    font-size:1px;
    line-height:1px;
	display:block;
	height:1px;
}

.hidden {
	visibility:hidden;
}

html {
	height:100%;
}

/* @end */
/* @group General Styles */
body {
	background-color: #95d630;
	margin: 0;
	padding: 0;
	border: 0;
}

a {
	color: #666666;
}

p {
}

b, strong {
}

a:link{
	color: #95d630;
	text-decoration: underline;
}
a:visited {
	color: greenyellow;
	text-decoration: underline;
}

a:hover, a:active {
	color: #757b92;
	text-decoration: none;
}

img {
	border: none;
}

.image-left {
	float: left;
	margin: 3px 1em 1em 0;
	padding: 3px;
}

* html .image-left {
	height: 1%;
	position: relative;
}

.image-right {
	float: right;
	margin: 3px 0 1em 1em;
	padding: 3px;
}

* html .image-right {
	height: 1%;
	position: relative;
}

.clearer {
	clear: both;
}
	
/* @end */
/* @group Layout */
#bgcontainer {
	background-color: #333;
	margin: 0 auto;
	width: 880px;
	overflow: hidden;
position: relative;
}

#container {
	width: 880px;
	margin: 0 auto;	
border: 1px solid green;
}

#pageHeader {
	top: 0;
	display: block;
	margin: 0;
	padding: 0;
	background-color: #555;
	width: 100%;
}

#pageHeader img {
	position: relative;
	display: block;
	width: 100%;
}

#pageHeader h1 {
	color: #95d630;
	font-size: 48px;
	font-weight: bold;
	margin: 0;
	padding-left: 15px;
	text-shadow: #000000 1px 1px 1px;
}

#pageHeader h2 {
	color: #95d630;
	font-size: 16px;
	font-weight: bold;
	margin: 0px;
	padding-left: 15px;
	padding-bottom: 5px;
	text-shadow: #000000 1px 1px 1px;
}

#contentContainer {
	padding: 20px 20px 150px 20px;
	color: silver;
border: 1px solid blue;	
}

#content {
	float: right;
	width: 80%;
border: 1px solid orange;
}

#sidebarContainer {
	float: left;
	padding: 5px;
	border: 1px solid black;
	width: 16%;
	background-color: #555;
border: 1px solid white;	
}

#sidebarContainer #sidebar {
}

#sidebarContainer .sideHeader {
	line-height: 1.5;
	font-size: large;
	font-weight: bold;
	font-style: italic;
	color: gray;
}

#footer {
	position: fixed;/*-------------------- position: absolute pour ie6 en commentaire conditionnel ---------*/
	line-height: 18px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	width: 880px;
	Bottom: 0;
	margin-left: -440px;
	left: 50%;
	background-color: #555;
	color: #b0b0b0;
	border-top: 1px solid #95d630;
}

#footer p {
}

#footer a:link, #footer a:visited {
}

#footer a:hover, #footer a:active {
}
	
/* @end */
/* @group Breadcrumb */

#breadcrumbcontainer {
	border-top: 1px solid #95d630;
	border-bottom: 1px solid #95d630;
	background-color: #666;
	color: #95d630;
	height: 18px;
	padding: 0;
	margin: 0;
}

#breadcrumbcontainer ul {
	margin-right: 15px;
}

#breadcrumbcontainer li {
	display: inline;
	float: right;
	direction: rtl;
}

#breadcrumbcontainer a {
	text-decoration: none;
	color: whitesmoke;
}

#breadcrumbcontainer a:hover {
}
	
/* @end */
/* @group Toolbar */
/* Toolbar Styles */

#navcontainer {
	font-size: 1em;
	background-color: #606060;
	color: #fff;
	border-top: 1px solid #95d630;
	position: fixed;/*-------------------- position: absolute pour ie6 en commentaire conditionnel ---------*/
	bottom: 0;
	margin-bottom: 29px;
	padding: 0;
	z-index: 99;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	margin-left: -440px;
	left: 50%;
	width: 880px;
	height: 25px;
}

#navcontainer #current {
	text-shadow: white 2px 2px 5px;
	color: black;
	background-color: #787878;
}

#navcontainer #current:hover {
}

#navcontainer .currentAncestor {
	text-shadow: black 2px 2px 3px;
	color: white;
	background-color: #787878;
}

/* Parent - Level 0 */

#navcontainer ul{
	margin: 0;
	padding: 0;
	width: 100%;
}

#navcontainer li {
	display: block;
	float: left;
	line-height: 25px;
	list-style: none;
}

#navcontainer a {
	padding: 0 10px;
	color: grey;
	text-shadow: black 2px 2px 2px;
	font-variant: small-caps;
}

#navcontainer a:hover {
	background-color: whitesmoke;
}

#navcontainer a:active {
}

#navcontainer li a {
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	height: 25px;
	line-height: 25px;
	color: white;
	text-decoration: none;
}


/* Child - Level 1 */

#navcontainer ul ul {
	position: absolute;
	left: 0;
	top: -25px;
	width: 100%;
	height: 25px;
	margin: 0;
	background-color: #787878;
}

#navcontainer ul ul li {
}
#navcontainer ul ul li a {
	height: 25px;
	line-height: 20px;
}


#navcontainer ul ul a {
}

#navcontainer ul ul a:hover{
}

#navcontainer ul ul #current{
	background-color: greenyellow;
}

#navcontainer ul ul .currentAncestor {
	background-color: #8E8E8E;
}

/* Child - Level 2 */

#navcontainer ul ul ul {
	background-color: #8E8E8E;
}

#navcontainer ul ul ul li { 
}

#navcontainer ul ul ul a{
}

#navcontainer ul ul ul a:hover{
}

#navcontainer ul ul ul #current{
}

#navcontainer ul ul ul .currentAncestor {
}
/* Child Level 3 */

#navcontainer ul ul ul {
}

#navcontainer ul ul ul ul li { 
}

#navcontainer ul ul ul ul a{
}

#navcontainer ul ul ul ul a:hover{
}

/* Child Level 4 */

#navcontainer ul ul ul ul {
}

#navcontainer ul ul ul ul ul li { 
}

#navcontainer ul ul ul ul ul a{
}

#navcontainer ul ul ul ul ul a:hover{
}

/* Child Level 5 */

#navcontainer ul ul ul ul ul {
}

#navcontainer ul ul ul ul ul ul li { 
}

#navcontainer ul ul ul ul ul ul a{
}

#navcontainer ul ul ul ul ul ul a:hover{
}

* html #navcontainer ul ul, * html #navcontainer ul ul ul {
	width: 880px;
}

* html #navcontainer ul li, * html #navcontainer ul ul li, * html #navcontainer ul ul ul li {
	width: 176px;
       </style>
   </head>
<body>
  <!-- Start Backgroundcontainer -->
  <div id="bgcontainer">
  <!-- Start container -->
  <div id="container">
    <!-- Start page header -->
    <div id="pageHeader">
      <h1>cmontest</h1>
      <h2>juste pour voir...</h2><!-- Breadcrumb -->
      <div id="breadcrumbcontainer">
        <ul>
          <li><a href="index.htm">Start</a> > </li>
        </ul>
      </div><!-- End Breadcrumb -->
    </div><!-- End page header -->
    <!-- Start content container -->
    <div id="contentContainer">
      <!-- Start content -->
      <div id="content">
        start
        <br />
        <br />
        vous etes sur la pagestart qui est le tout début du site
        <br />
        ici on trouve toutes les infos pour se promener sur le site
        waib
        <br />
        c'est totalement génial et du coup vous avez une envie
        irresistible de vous parcourir toutes pages qui sont hyper
        intéressantes!
        <br />
        du jamais vu [smile]
        <br />
        <img class="imageStyle"
             alt="P1010160"
             src="page0_1.jpg"
             width="640"
             height="480" />
      </div><!-- End content -->
      <!-- Start Sidebar wrapper -->
      <div id="sidebarContainer">
        <!-- Sidebar header -->
        <div class="sideHeader"></div>
        <!-- Start sidebar content -->
        <div id="sidebar"></div><!-- End sidebar content -->
      </div><!-- End sidebar wrapper -->
	    <div class="clearer"></div>
    </div><!-- End content container -->
  </div><!-- End container -->
<!-- Start Navigation -->
  <div id="navcontainer">
    <ul>
      <li><a href="index.htm"
         rel="self"
         id="current"
         name="current">Start</a></li>
      <li><a href="page1/index.htm"
         rel="self">Page1-0</a></li>
      <li><a href="page2/index.htm"
         rel="self">Page2-0</a></li>
      <li><a href="page3/index.htm"
         rel="self">Page3-0</a></li>
      <li><a href="page4/index.htm"
         rel="self">Page4-0</a></li>
      <li><a href="page5/index.htm"
         rel="self">Page5-0</a></li>
      <li><a href="page6/index.htm"
         rel="self">Page6-0</a></li>
    </ul>
  </div><!-- End navigation -->
  <!-- Start Footer -->
  <div id="footer">
    <p>© 2007 cmontest <a href="#"
       id="rw_email_contact"
       name="rw_email_contact">Contact</a><script type=
       "text/javascript">
//<![CDATA[
var _rwObsfuscatedHref0 = "mai";var _rwObsfuscatedHref1 = "lto";var _rwObsfuscatedHref2 = ":cm";var _rwObsfuscatedHref3 = "ont";var _rwObsfuscatedHref4 = "est";var _rwObsfuscatedHref5 = "@fr";var _rwObsfuscatedHref6 = "ee.";var _rwObsfuscatedHref7 = "fr";var _rwObsfuscatedHref = _rwObsfuscatedHref0+_rwObsfuscatedHref1+_rwObsfuscatedHref2+_rwObsfuscatedHref3+_rwObsfuscatedHref4+_rwObsfuscatedHref5+_rwObsfuscatedHref6+_rwObsfuscatedHref7; document.getElementById('rw_email_contact').href = _rwObsfuscatedHref;
//]]>
</script></p>
  </div><!-- End Footer -->
</div><!-- End Backgroundcontainer -->