28172 sujets

CSS et mise en forme, CSS3

Bonjour je cherche à recréer un effet que j'ai vu sur ce site :
http://kolonien.nu/om-oss/biografi/

J'arrive a mettre le background fixe... à faire le bloc noir qui dessend mais pas a faire le bloc de menu fixe par dessus tout.

pour mon background et mon bloc j'utilise ce code :

html { 
  margin:0;
  padding:0;
  background: url(images/whiteroom-bg.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}

#contenu {
   margin-left: auto;
   margin-right: auto;
   width: 500px;
   height:1800px;
   text-align: left;
   background-color: rgba(0,0,0,0.5);
   border-radius:10px;
   box-shadow:8px 8px 8px #666;
   color:#FFF;
   
}

et j'essaie ca pour le bloc menu mais ca ne fonctionne pas...il n'apparait pas en fait:

#menu_contener {
	position:fixed;
	margin-left:-9px; /* si je fais pas ça il me laisse un bord à gauche*/
	margin-top:75%; /* je sais pas si c'est la meilleur des solutions */
   	width: 100%;
  	background-color: rgba(255,255,255,0.7);
   	height:100px;
   	border: 1px solid black;
}


si je mets pas l'autre bloc il me l'affiche...des que j'utilise le bloc contenu, le bloc menu_contener disparait...
Quelqu'un a une idée de la meilleure des solution à utiliser pour réaliser un tel effet ?

Merci d'avance
Bonjour,

Pour ton menu fixe tu enlèves ton margin-top et tu rajoutes un positionnement (bottom 0) qui va avec la propriété position:
#menu_contener {
	position:fixed;
        bottom: 0px;
	margin-left:-9px; /* si je fais pas ça il me laisse un bord à gauche*/
	width: 100%;
  	background-color: rgba(255,255,255,0.7);
   	height:100px;
   	border: 1px solid black;
}
Smiley smile
Modifié par rodolpheb (11 Nov 2012 - 17:16)
Pour ton bord gauche tu fais ça:
#menu_contener {
	position:fixed;
        bottom: 0px;
	left: 0px;
	width: 100%;
  	background-color: rgba(255,255,255,0.7);
   	height:100px;
   	border: 1px solid black;
}

Smiley cligne
Modifié par rodolpheb (11 Nov 2012 - 17:21)