Centrage vertical dynamique

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention - 16 sept. 2007 à 19:59

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title> </title>
<style type="text/css" />
<!--
html, body 
{margin:0; 
padding:0; 
width:100%; 
height:100%; /*indispensable pour le resize du background*/
}

#background
{
position:absolute; 
width:100%; 
height:100%;
min-height:800px;
z-index:1;
}

#page
{
position: relative;
width: 850px;
height: 500px;
top: 50%;
margin-top: -250px; /* moitié de la hauteur du bloc */
margin-left: auto;
margin-right: auto;
z-index: 2;
border: 1px solid; 
background-color:#0066FF;
}
-->
</style>
</head>

<body>

<div>
<img id="background" src="http://seeschloss.org/images/terragen/debut/0/Lac%20de%20Montagne.jpg" alt="" title="" /> 
</div>

<div id="page">&nbsp; page
</div> 

</body>
</html>

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...

Afficher la suite

A voir également:

Centrage vertical dynamique
Tableau croisé dynamique - Guide
Exemple tableau croisé dynamique télécharger - Télécharger - Tableur
Powerpoint vertical - Guide
Liste déroulante dynamique excel - Guide
Trait vertical clavier mac - Forum MacOS

6 réponses

Réponse 1 / 6

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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";
	}
}

<edit>
et j'ajoute ça en fin de '<body>' (va savoir pourquoi je ne l'ai pas mis sur 'onLoad'…). dans ce cas c'était pour centre un '<div id="wrapper"> dans la page.

<script type="text/javascript">
	var lmt = document.getElementById('wrapper');
	var container = document.documentElement;
	verticalAlign(lmt, container);
</script>

</edit>

Réponse 2 / 6

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

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 Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

ah bien vu !!!
j'avais ça…
comme ce script n'a jamais été fini, il ne s'actualise pas au 'onResize', je n'ai pas réussi…

pour l'url, je n'ai pas envie d'une url bidon qui traine dans Google donc je ne te mets pas de lien mais tu l'as trouveras dans les travaux en cours sur GdK (mais si, tu vas comprendre !), c'est "L'échoppe".

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335 > Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention

ok...

reste plus qu'a implémenter le onresize... ;-)
j'va devoir me mettre a javascript je crois :'(

Réponse 3 / 6

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

j'étais en train de modifier au dessus.
faut aussi inclure le script en ajoutant un lien dans le '<head>'.

<script type="text/javascript" src="resource/alignCenter.js"></script>

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…

<edit>
Il faut cueillir les cerises avec la queue...
J'avais déjà du mal avec la main !
+1
-:oDDD
</edit>

Réponse 4 / 6

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

on va se croiser longtemps je crois ;-)

t'as pas une page qui l'utilise ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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>' !

Réponse 6 / 6

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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…

pour l'instant je laisse tomber, il y a match dans une heure : je vais m'échauffer !!!
-:oD

Discussions similaires

Barre verticale droite sur clavier

le signe " | " dans excel

Touche du clavier barre verticale

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Problème écran tv Samsung bandes verticales

Votre réponse

Discussions similaires