centrage vertical dynamiqueFermé

Question

Salut la Cie. Problème en vue... qui concerne le centrage vertical d'un bloc. Il existe des solutions... ouf! Par exemple : https://milov.nl/code/css/verticalcenter.html?password=0.01786779724286912&htmlfile=css/verticalcenter&dir=code , où les blocs sont biens centrés. ou alors avec le display:table; vertical-align: middle; .... Mais voilà, cette (ces) méthode(s) à (ont) un gros problème. Si les dimensions de la fenêtre sont inférieures à la dimension du bloc, celui ci disparait, ou alors galère quelconque... Faites le test : réduisez la hauteur, le bloc reste centré, mais il arrive un moment où le haut n'est plus visible (ni le bas, mais le bas à un ascenseur) Voilà, j'ai un projet qui me demande impérativement de centrer un bloc, mais qu'il soit accessible pour toutes les résolutions d'écrans, et toutes les tailles de fenetre. Il faut donc gérer de façon dynamique l'affichage. J'ai donc pensé immédiatement au javascript. Mais comment m'y prendre ? j'ai pensé a un truc du style : si height_ecran < hauteur_bloc alors désactiver centrage_vertical... mais j'ai aucun idée du fonctionnement de javascript dans l'immédiat. En fait, j'ai un background de 800 de hauteur mini, extensible à la fenetre selon sa taille, et un bloc, qui doit être centré sur ce background (et pas centré sur la fenetre), quelque soit la hauteur de la fenetre. Alors voilà ou j'en suis, pour mieux comprendre :

page

On a donc ca : Le bloc est centré par rapport à la fenetre, si la fenetre est plus grande que la hauteur du bloc; SI on reduit la taille de la fenetre, le haut disparait et je voudrais : le bloc est centré au milieu de l'image, tout le temps , qqsoit la dimension de la fenetre; si la hauteur de la fenetre est inférieure a la hauteur du bloc, alors le bloc reste figé en haut, on arrete le centrage, et la barre de navigation verticale apparait. Merci si quelqu'un a des idées ! Je sais que cette question revient partout, mais je n'ai rien trouvé de convainquant. c'est quand meme bien dommage que margin: auto; ne marche pas en vertical...

Dalida · Answer

salut poussin ! -;op j'ai pas très bien compris ton explication de bas, sans le bas, avec le bas et l'ascenseur… pour centrer verticalement j'ai codé ça en JS, je ne peux même plus dire de qui je me suis inspiré ! function verticalAlign(lmt, container) { if(lmt && container) { var containerHeight; if (container.innerWidth) { containerHeight = container.innerHeight; } else { containerHeight = container.clientHeight; } var lmtHeight; if (lmt.innerWidth) { lmtHeight = lmt.innerHeight; } else { lmtHeight = lmt.offsetHeight; } var y = Math.ceil((containerHeight - lmtHeight) / 2); if(y < 0) { y = 0; } lmt.style.position = "relative"; lmt.style.top = y + "px"; } } et j'ajoute ça en fin de '' (va savoir pourquoi je ne l'ai pas mis sur 'onLoad'…). dans ce cas c'était pour centre un '

dans la page.

gryzzly · Answer

Coool :

Heu, tu sais... moi et javascript ;-)

T'a pas un micro exemple comme tu les fait si bien ?? ou une page deja accessible avec ce script utilisé ?

PS : je pourrais le faire passer sur onResize ? question stupide d'un ignorant...

Dalida · Answer

j'étais en train de modifier au dessus. faut aussi inclure le script en ajoutant un lien dans le ''. par contre pour moi ce n'est pas conditionnel, mais ça peut vite se faire !!! je compte sur toi pour les feed backs ! je n'ai pas testé en dehors de notre cher XP… Il faut cueillir les cerises avec la queue... J'avais déjà du mal avec la main ! +1 -:oDDD

gryzzly · Answer

on va se croiser longtemps je crois ;-)

t'as pas une page qui l'utilise ?

Dalida · Answer

allez hop, pif paf, pouf !
un peu d'objet (c'est bon ça l'objet !).
le nouveau script (à parfaire car il ne ressemble à rien mais ça marche donc on verra plus tard !) :
var verticalAlign =

{

   addEvent: function(lmt, evnt, fctn, capture)

   {

	return document.addEventListener ?

		lmt.addEventListener(evnt, fctn, capture):

		lmt.attachEvent ?

			lmt.attachEvent('on' + evnt, fctn):

			false;

   },

   align: function()

   {

	var lmt = document.getElementById('wrapper');
	var container = document.documentElement;
	
	if(lmt && container)
	{
	    var containerHeight;
	    if (container.innerWidth)
	    {
            containerHeight = container.innerHeight;
		}
		else
		{
            containerHeight = container.clientHeight;
		}
	    var lmtHeight;
	    if (lmt.innerWidth)
	    {
            lmtHeight = lmt.innerHeight;
		}
		else
		{
            lmtHeight = lmt.offsetHeight;
		}
		var y = Math.ceil((containerHeight - lmtHeight) / 2);
		if(y < 0)
		{
			y = 0;
		}
		lmt.style.position = "relative";
		lmt.style.top = y + "px";
	}

   },

};

verticalAlign.addEvent(window, 'resize', verticalAlign.align, false);
verticalAlign.addEvent(window, 'load', verticalAlign.align, false);
tu colles ça dans le fichier 'verticalAlign.js' et tu peux virer le script embarqué en fin de '<body>' !

Dalida · Answer

une version moins mauvaise en démonstration.
pour le moment FF 2 et IE 7 alignent correctement mais Opéra ne veut pas jouer le jeu&hellip;

pour l'instant je laisse tomber, il y a match dans une heure : je vais m'échauffer !!!
-:oD

Centrage vertical dynamique

6 réponses

Discussions similaires

Newsletters