28172 sujets

CSS et mise en forme, CSS3

Hello
petite question de noob

J'ai un site qui s'affiche en full screen
J'ai un bandeau au top
une nav en bas de page
et une partie centrale qui d'oit s'ajuster en hauteur

----------------------------------
-//////////////Block1/////////////////-
----------------------------------
----------------------------------
-//////////////////////////////////////-
-//////////block2 conteneur/////////-
-//////////////////////////////////////-
-///////###############//////-
-///////#..Block 3 centre.....#//////-
-///////#..Veticalement.......#//////-
-///////#..min height 500px..#//////-
-///////###############//////-
-//////////////////////////////////////-
-//////////////////////////////////////-
----------------------------------
----------------------------------
-//////////// Block4 nav/////////////-
----------------------------------

Block 1 hauteur fixe
Block 4 hauteur fixe
Block 2 hauteur auto, Hauteur minimale de 520px par exemple
Block 3 centrage vertical au milieu de block 2. Hauteur 500 px

actuellement mes div se supperposent quand je resize en hauteur ma fenetre
He voudrait que si on attent une hauteur minimale on ne puissse reduire et que le scroll apparaisse
Je pense que je dois passer par jquery pour calculer la hauteur ?

mon bout de code actuel
#wtop {
	height: 103px;
	width:100%;
	background-color:#0C0;
	display:block;
	position:absolute;
	top:0px;
	z-index:50

	

	}
#wmain {
	top:103px;
	width:100%;
	background-color:#399;
	display:block;
	position: relative;
	height: 100%;

	
	}
#wmain2 {
	top: 10%;

	margin: 0px;

	padding: 0px;
	
	width:100%;
	background-color:#399;
	display:block;
	position: absolute;
height: 500px;
z-index:50;
display:block;	
	}
#wbottom {
	height: 113px;;
	width:100%;
	background-color:#C00;
	display:block;
	position:absolute;
	bottom:0px;
		z-index:50;
	}

Merci d'avance
Modifié par ubik174 (25 Jun 2011 - 14:47)
J'ai mis un jquery pour la hauteur

(function ($) {
$.fn.vAlign = function() {
	return this.each(function(i){
	var h = $(this).height();
	var oh = $(this).outerHeight();
	var mt = (h + (oh - h)) / 2;	
	$(this).css("margin-top", "-" + mt + "px");	
	$(this).css("top", "50%");
	$(this).css("position", "absolute");	
	});	
};
})(jQuery);
 

 
$(document).ready(function() {
	$("#wmain2").vAlign();
	
});




#wtop {
	height: 103px;
	width:100%;
	background-color:#0C0;
	display:block;
	position:absolute;
	top:0px;
	z-index:50

	

	}
#wmain {
	
	width:100%;
	background-color:#399;
	display:block;
	position: relative;
	height: 100%;
	min-height:700px;
top:-55px;
	
	}
#wmain2 {
	margin: 0px;
	padding: 0px;
	width:100%;
	background-color:#399;
	display:block;
	position: absolute;
	height: 500px;
    z-index:40;
    display:block;
		
	}
#wbottom {
	height: 113px;;
	width:100%;
	background-color:#C00;
	display:block;
	position:absolute;
	bottom:0px;
		z-index:40;
		
	}


Je n'ai plus qu'un probleme avec ma nav du bas (zone rouge) que je n'arrive pas a stoper si on resize la fenetre en hauteur et qui se supperpose sur la box blanche

http://www.groupe-icm.com/sllov/sllov_mobilier_design_mentions_legales.php

Merci d'avance