Float, Margin ect..

Salut tout le monde, je suis entrain de monter mon site mais j'ai reelemnt un gros probleme..

J'ai designer mon site sur logiciel et une fois l'etape du codage impossible d'obtenir ce que je veut..

Voici ce que je veut

[Modération : Image trop grande] http://img5.imageshack.us/img5/8720/sanstitre1copiehf.jpg

1-Ma banniere
2-Mon menu
3-Mon bloc "contenu"..

Nous voyons bien que le menu (2) passe en dessous de la banniere (1) et au dessus du contenu (3) mais impossible de coder pour avoir ce resultat.. J'ai d'abord creer ma banniere dans le "Body" et ensuite ajouté 2 div differente (Contente & Menu). Je place mon contenue (contente = 3) au centre et je le remonte et deja la probleme, si je remonte trop le contenue passe au dessus de la banniere Déjà sa c'est un probleme mais le 2eme et que si je creer la div menu dans la div contente histoire quel entre dans mon bloc "contente" elle en fait a sa tete et s'installe dans la banniere.. Je joue donc avec un margin-top pour la faire dessendre mais mon bloc contenue (contente) dessent avec.. Voici un apercu

http://vfxart.free.fr/ml1/

Et voici mon fichier .css

body {
	
	background: url("images/banner.png") repeat-x 0 0 #2c2a35;

}




/*-------------CONTENER-------------*/

#contente{
	background-image:url("images/bg.png");
	height: 666px;
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	margin-top: auto;
	
}

#menu{
	background-image:url("images/menu.jpg");
	height: 31px;
	width: 930px;
	margin: 120px 0;
	padding; 0 0;
}

Modifié par Laurie-Anne (06 Sep 2010 - 09:17)

Bonjour,

Ce n'est pas parce que visuellement le menu se trouve sous le header que structurellement il doit en être de même.

Pour le fond, pas de problème, tu place l'image 3 en fond de la page (body).

Après, comme tu a visiblement prévu un layout de taille fixe, il suffira d'intégrer les ombres dans les images

Pour le header, inclue l'ombre portée ainsi qu'une partie des éléments du dessous (fond + menu).

Pour ton menu, tu devras prévoir 2 images (une image de 1px de haut qui se répètera au centre (il faut prévoir que l'utilisateur augmente la taille des textes et que, donc, ton menu soit plus haut que prévu) et une image en bas avec le reflet.

Il est élément possible d'utiliser des images semi-transparentes qui se superposeront, à grands coups de marges négatives et de z-index.

ps. : #contente c'est parce que ton "content" est heureu(x)se ?