Création d'interface...A l'aide

Bonjour tout le monde,

Je dois construire une interface pour un site mais j'ai pas mal de difficultés surtout pour ce qui est du positionnement de mon pied de page.

J'ai réussi à construire toute mon interface mais lors de l'implémentation du pied ca ne va plus. J'ai cherché et trouvé pas mal de choses mais jamais cela ne fonctionne au final.
J'ai des problèmes de profondeur au final parce que je croyais avoir trouvé mais je n'arrive pas à intercaler un bloc en position absolute entre deux autres blocs non absolute (même avec z-index)

Voila une image correspondant au gabarit que je DOIS avoir au final :


Ca ne sert à rien de poster tous les codes que j'ai pu faire parce qu'il y en a trop donc je montre en gros a quoi ca ressemble

<div id="global">
	<div id="dessus">
		<span id="baniere"></span>
	</div> <!--fin div baniere -->
	
	<div class="menu">
		mon menu
	</div> <!--fin div menu -->
		
	<div class="menu2">
		mon menu secondaire
	</div> <!--fin div menu 2 -->
		
	<div class="contenu">
		mon contenu	
	</div> <!--fin div contenu -->
		
	<div id="bas_de_page">
		Mon pied de page
	</div>
		
</div>

Avec le CSS correspondant ... Sachant que j'ai dû mettre en pixels faute d'arrondis graphiques mais si en plus quelqu'un a une solution pourcentage, je suis preneur

#global {
	border : 1px solid #000;
	background-color : #BBE2E5;
	width : 990px;
	margin-left : auto;
	margin-right : auto;
}

#dessus {
	height : 100px;
	width : 100%
}

#baniere {
	float : left;
	background-color : #000099;
	width : 100%;
	height : 100%;
}

.contenu {
	/*position : absolute;*/
	float : right;
	border : 1px solid #0000FF;
	background-color : #BBE2E5;
	width : 780px;
	margin : 0;
	padding : 15px 0 0 0;
	/*min-height : 440px;*/
	z-index : -1;
}

.menu {
	/*position : absolute;*/
	float : left;
	border : 1px solid #FF0000;
	background-color : #fff;
	width : 190px;
	/*min-height : 420px;*/
	margin : 0;
	padding : 20px 10px 0 0;
	z-index : 1;
}

.menu2 {
	position : absolute;
	border : 1px solid #00FF00;
	background-color : #333;
	color : #fff;
	width : 450px;
	height : 300px;
	margin : 0;
	padding : 20px 0 0 210px;
	z-index : -1;
}

#bas_de_page {
	/*position : absolute;*/
	float : left;
	clear : both;
	bottom : 0;
	border-top : 1px solid #000;
	width : 990px;;
	height : 24px;
	z-index : 5;
	background-color:#fff;
	margin-left : 0;
	text-align:center;
}

Modifié par kinder_bueno (16 Feb 2007 - 12:39)

Bon en fait, j'ai réussi a caler mon pied de page mais il ne me reste plus qu'a placer mon menu secondaire. Celui en gris sur le screen.
Et c'est la le problème, je n'arrive pas à l'intercaler entre mon menu 1 et mon contenu. J'ai un problème de profondeur !!!

Bonjour & bienvenue, kinder_bueno (miam!).

D'après ton schéma, le menu2 devrait plutôt se trouver à l'intérieur du bloc contenu. Et le <span> dans la barrière est inutile. Il devrait plutôt y avoir une balise de titre <h1> ou <h2> à cet endroit.

Par ailleurs, tu aurais peut-être intérêt à placer le contenu avant le menu dans le flux de la page (pour le référencement, notamment).

<div id="banniere"><h1>Titre de la page</h1></div>
<div id="conteneur">
   <div id="contenu">
      <ul id="menu2">
          ...
      </ul>
   </div>
   <div id="colonne">
      <ul id="menu1">
          ...
       </ul>
   </div>
</div>
<div id="pied">Pied de page</div>

Pour le positionnement, je te conseille d'éviter position: absolute comme la peste chaque fois que tu ne connais pas les dimensions des blocs que tu places, ce qui a priori est le cas du menu2. Il est préférable de s'en tenir aux flottants.

Pour créer l'effet de colonnes de même hauteur, je te conseille la méthode des colonnes factices (l'article sur Pompage)

#contenu {
   width: 780px;
   float: right;
   ...
}
#colonne {
   width: 190px;
   float: left;
   ...
}
#menu2 {
   width: ...px;
   float: left;
   ...
}
#pied {
   clear: both; /* Pour obliger à s'afficher en dessous des flottants */
   ...
}

Merci du coup de main

Je vais tester de cette manière et si je n'y arrive toujours pas alors je ferai une petite remontée de topic

Ah mais en fait je viens de capter quelque chose...

Mon deuxième menu ne peut pas être dans mon contenu.
Je me disais bien que j'avais deja fait ça.

En fait il y a toujours une petite bande de mon menu 2 au dessus de mon menu 1 donc il part depuis la gauche (et c'est pour ça que je l'avais mis en absolute).... Je sais pas si je me suis fait bien comprendre.
Ou alors, la feinte est de mettre une bande grise au dessus du menu 1 mais c'est une feinte de l'ours et j'aimerais ne pas la faire

Ou alors j'ai une question qui pourrait résoudre mes problèmes. Comment on fait pour faire apparaitre un bloc non absolute par dessus un bloc absolute
Modifié par kinder_bueno (16 Feb 2007 - 13:34)

a écrit :
Ou alors j'ai une question qui pourrait résoudre mes problèmes. Comment on fait pour faire apparaitre un bloc non absolute par dessus un bloc absolute

On utilise z-index.

#bloc1 {
   /* Element en position absolue */
   z-index: 1;
}
#bloc2 {
   /* Elément dans le flux */
   position: relative; /* On doit positionner l'élément pour utiliser z-index */
   z-index: 9;
}

Modifié par Thomas D. (16 Feb 2007 - 13:48)

Ca marche... Merci beaucoup

Je faisais bien le z-index mais je ne savais pas qu'il fallait mettre position : relative
Modifié par kinder_bueno (16 Feb 2007 - 13:53)

Ouais enfin ca marche sur FF mais sur IE.... c'est tout pas beau

Ya plus qu'à faire deux feuilles de style
Modifié par kinder_bueno (16 Feb 2007 - 13:57)