Centrage vertical d'une div dans une autre sans position:absolute ?

Bonjour à tous,

J'ai une soucis pour centrer une div verticalement, en fait j'ai une premiere div en with:100%;
je la garde toujours calée en haut.
Je voudrais ensuite mettre en dessous une autre div qui sera mon contener et contiendra l'ensemble
de mon site, le soucis c'est que si à ce contener, j'applique le code de ce site sur le centrage vertical
( position absolute, marges négative etc ) ca centre sur toute la hauteur de l'ecran et non pas sur la
taille de l'ecran moins ma bande calée au top.

je vous joins un exemple pour que vous puissiez mieux visualiser :

http://www.webdesigner-freelance.eu/work/css/

Si quelqu'un pouvait m'aider ce serait super.

merci d'avance.

Bonjour.

Tu peux tout à fait centrer en tenant compte du header car sa hauteur est fixe mais à mon avis ce n'est pas la bonne solution car si la résolution de l'utilisateur est faible alors le header disparaît sous le contenu qui est trop grand. Il faut donc que ton contenu reste dans le flux.

bonjour,

En effet, le defaut des marges négatives rend cette option/technique inutilisable.


D'autre technique permettent néanmoins un centrage verticale de façon plus ou moins risqués.

Cependant , la methode qui reste la plus sur est un tableau.
Fluide et avec un centrage vertical de son contenu qui est 'naturel' , le rendu sera assuré dans les différents navigateur.

Je vois que ta page va aussi embarqué des png ...

Je te propose de regarder le code source et les techniques css mise en place pour cette maquette (centrage verticale avec entete et pied dégagé , alternative css pour IE6 lien cliquable , texte et formulaire accessible a la souris ) :
http://gcyrillus.free.fr/decoupe-fr/crowd/crowd/

la solution sans tableau requiert une autre methode , le display:table et pour IE , 2 elements avec un contexte de formatage modifié display + layout .

ex: http://gcyrillus.free.fr/essai/v-align-midlle-block-tous.html où l'element en rouge sert de jauge au centrage pour IE.
une tentative d'explication qui essai d'etre clair :
http://yidille.free.fr/plux/valign/?2-complement-vertical-align

La solution sans tableau , ajouté aux probleme du png pour IE6 , les js et autres bugs ou difference qui ne manquerons pas de se montrer est a éviter si le principe n'est pas tout a fait compris et si on ne veut pas perdre ses cheveux .


L'important est de bien analysez la page a mettre en forme et eviter au maximum de provoquer les bugs les plus connué de IE (entre autre):
les degagements , flottants pas flottants ? , les png qui ne doivent pas etre mis dans des elements en positionnement absolu dans IE6 et inf , la partie a centrée ...

Bon courage

ok merci beaucoup pour vos réponses.
Si je comprend bien le mieux c'est alors que j'utilise un tableau comme contener générale c'est ça ?

genre 1 colonne et 2 lignes, avec la ligne du header en height fixe et la seconde ligne sera en 100%, avec un vertical-align et dans cette cellule mon div générale contenant tout le site c'est bien ça ?

Le hack que j'utilise pour les png ne m'a jamais posé de problèmes jusqu'a présent, il est plutôt déconseillé ?

en tout cas merci pour votre aide, même si j'utilise rarement les tableaux pour autre chose que des données tabulaire à force
de lire qu'il ne faut pas intégrer en td, c'est vrai que c'est stupide de pas les utiliser un peu quand ça peut régler des soucis comme
le mien par exemple.

Il y a aussi la solution "inline-block + vertical-align" qui peut fonctionner.
Modifié par Changaco (15 Jan 2011 - 15:02)

bonjour

L'alternative png pour IE peut rendre tes liens impossible a 'cliqué' dans IE6 par exemple.

Pour le tableau , tu peut te contenter d'un tableau d'une cellule pour gerer l'alignement vertical de contener.

Pour le reste , tu conserve une structure html classique , a toi de voir si ton entête merite d'etre placé dans ton tableau conteneur ou a l'exterieur .

Dans la maquette en lien , l'entete est placé a l'exterieur du tableau :

<div id="degrade">
	<h1 id="titre" >
		<a href="#" title="PORTFOLIO DIGITAL" >

		<img src="img/titre.png" alt=""/>
		</a>
	</h1>
</div>
<table id="page">
<tr>
<td>

Le titre est extrait du flux et un padding dans le tableau lui reserve un espace d'affichage.
Ce padding est pris en compte dans l'alignement vertical de la cellule et est donc recalé d'autant vers le bas pour que l'un ne chevauche pas l'autre. Autant dire que reproduire ce genre de chose sans tableau n'est pas forcement aisé (un centrage verticale décallé)... la maquette en lien n'est qu'un exemple des possibilités , dans ce cas , le header est externalisé du conteneur recevant le contenu , dans l'optique de ne pas se trouver coincée par IE6 avec png+position:absolue , auquel cas on perd l'usage de la selection de texte , les liens et les formulaires .

Le choix de tout mettre dans le tableau ou pas te revient , prend juste en compte sur quelle portion (dans quel element ) de ta page tu vas devoir appliqué le filtre pour les png et faire en sorte de prevenir le couple 'hack png + position:absolute' .

Je pense quand même qu'un tableau d'une seule cellule est suffisant a mettre en place le centrage vertical.

GC

<edit>
la page proposé par Chancago reprends le principe de 2 elements cote à cote necessaire a IE ,
Attention quand même a l'utilisation du -moz-inline-stack , qui amenent lui aussi son lot de bug dont on a pas forcement besoin </>
Modifié par gcyrillus (22 Feb 2008 - 13:44)

crashbdx a écrit :
genre 1 colonne et 2 lignes, avec la ligne du header en height fixe et la seconde ligne sera en 100%, avec un vertical-align et dans cette cellule mon div générale contenant tout le site c'est bien ça ?

Oui.

crashbdx a écrit :
Le hack que j'utilise pour les png ne m'a jamais posé de problèmes jusqu'a présent, il est plutôt déconseillé ?

Non, il suffit de bien l'utiliser. Ce qui est déconseillé, c'est d'essayer de gérer à la fois ce hack et des méthodes de positionnement et de dimensionnement un peu tirées par les cheveux.

Ok merci à tous, j'ai finalement opté pour une seul cellule de tableau sous le div du header, ca semble fonctionner pour le moment, je verrai si souci ou non par la suite avec le hack pour les png.

Juste un truc qui me chagrine, j'aime bien avoir mes 2 icons de validation en vert en bas a droite de firefox ( html validator )
cependant il me mets 1 erreur dans la config actuelle :

line 22 column 27 - Erreur: there is no attribute "height"

pour la ligne suivant :

<table width="100%" height="90%" cellpadding="0" cellspacing="0" >

C'est normal ? on peut pas mettre de height dans un table ? pourtant c'est la seule façon ou ça fonctionne le centrage.

Si besoin je peux envoyer un lien en MP pour montrer la page, j'ai un peu avancer et il y a maintenant le logo et les éléments du client donc c'est plus délicat à mettre en ligne ici alors que ce n'est pas fini.

merci encore.

Déterrage de topic juste pour dire que j'ai trouvé le correctif pour que la boîte soit centrée sous Opera. Il s'agissait juste de donner une taille à l'élément invisible, je sais pas comment j'avais pu louper ça ...
Modifié par Changaco (15 Jan 2011 - 15:01)

Florent je viens de me rendre compte que dans Opera 9.27 (Linux et Windows) le fait que le div tampon soit en position relative enlève l'interactivité comme ça le fait sous Firefox quand ce div n'est pas là ...

Et quand on remplace le div tampon par un paragraphe les rôles s'inversent, Firefox perd l'interactivité et Opera la récupère ...

bonsoir,

essai ceci:

#content, .hidden {display: inline-block; display: -moz-inline-stack;  vertical-align: middle;}
#content > div  {overflow:auto;display:inline-block;}

on tente de forcer un contexte de formatage ,pour plaire a FF et essayer de résorber le bug d'opera qui perd la tete a la selection de texte .
overflow pour FF , et pour opera : #content (inversion des declaration display) et pour #content div l'overflow en auto , pas de dimension et re inline-block .

(Opera a des difficulté avec le positionnement du div tampon (un peu comme un element ayant un dfaut de haslayout dans IE)).

au dessus d'une balise ou de texte , tout va bien , entre celle ci (marge par defaut appliqué au hn/p) la souris survole le div tampon qu'opera ne situe pas trés bien , le bug est provoqué les coordonnées du textes , de la souris et du div tampon deviennent incoherente .
Ce bug , est generalement perçu sur un défaut d'affichage des fonds .


ajoute un background-color (sur ton css) a #content div , celui-ci pour percevoir ou il est dans opera (moi c'est windows).

(je n'adhere toujours pas a cette technique basée sur 2 éléments se centrant horizontalement , je perçois cela encore comme alternative pour IE au vue des difficultés rencontrées ailleurs . display:table a 10 ans , reproduit les comportements css d'un tableau , ni plus ni moins et est surtout implémenté depuis assez longtemps pour le considéré plutot fiable , sinon le tableau de mise en page reste sans surprise et solide. ).

Page test interessante néanmoins.

cordialement

GC

gcyrillus a écrit :
bonsoir,

essai ceci:

#content, .hidden {display: inline-block; display: -moz-inline-stack;  vertical-align: middle;}
#content > div  {overflow:auto;display:inline-block;}

on tente de forcer un contexte de formatage ,pour plaire a FF et essayer de résorber le bug d'opera qui perd la tête a la sélection de texte .
overflow pour FF , et pour opera : #content (inversion des déclaration display) et pour #content div l'overflow en auto , pas de dimension et re inline-block.

Je viens de tester et "overflow:auto" suffit, pas besoin de "display: inline-block".

gcyrillus a écrit :
ajoute un background-color (sur ton css) a #content div , celui-ci pour percevoir ou il est dans opera (moi c'est windows).

Le div est parfois bien placé et parfois non selon la page ...

gcyrillus a écrit :
(je n'adhère toujours pas a cette technique basée sur 2 éléments se centrant horizontalement, je perçois cela encore comme alternative pour IE au vue des difficultés rencontrées ailleurs. display:table a 10 ans , reproduit les comportements css d'un tableau, ni plus ni moins et est surtout implémenté depuis assez longtemps pour le considéré plutôt fiable, sinon le tableau de mise en page reste sans surprise et solide. ).

Moi je trouve ça plutôt simple à utiliser et le sera encore plus quand on n'aura plus à se soucier de Firefox 2 dans quelques mois. Pour le "display: table" comme je ne suis qu'un webmaster amateur ( enfin pour l'instant ), je n'ai pas encore eu besoin de me servir de tableaux donc je ne connaît pas leurs comportements ...

gcyrillus a écrit :
Page test intéressante néanmoins.

Merci j'essaye d'apporter ma modeste pierre à l'édifice.
Modifié par Changaco (18 Apr 2008 - 09:26)

Hello,

Un peu trop surbooké ces temps-ci pour revenir sur ma page de test inline-bloc/-moz-inline-stack comme j'aurais souhaité le faire.
Je me rends compte malgré tout que l'utilisation de display: inline-block n'est pas toujours évidente, même pour les navigateurs qui l'implémentent (avec parfois des bugs...) et que comme toute technique de positionnement CSS il va falloir un certain temps de décantation et de triturage par les experts du domaine (c'est à dire nous ), en plus d'un temps de correction des implémentations dans les navigateurs, pour que ça devienne «simple» à utiliser.

Bref, je vais passer ma page de test en EXPÉRIMENTAL.

Mais c'est marrant car j'ai l'impression, avec ce travail de défrichage, de faire le même boulot que mes ainés ont fait dans les années 2000-2005. Moi et tous ceux qui se penchent sur ces sujets, bien sûr.

Quel c** ! J'ai rédigé un rapport de bug pour Opera avant de tester le rendu sous Opera 9.5b et de me rendre compte que cette version avait corrigé le bug d'interactivité ( du moins sous Windows parce que j'ai pas pu tester sous Linux ) ... Heureusement que c'est les vacances ...

Édit : je ne sais pas combien de temps les versions d'Opera persistent mais dans quelques mois on n'aura plus à se soucier de ce problème ...
Modifié par Changaco (19 Apr 2008 - 23:27)

Hmm... au sujet du overflow: auto, je n'aime pas trop l'utilisé à cause de légers bugs de certains navigateurs qui nous donnent des barres de défilement inutiles dans certains cas. C'est le cas avec Firefox 3 pour ta page de test:



J'obtiens ceci en sélectionnant du texte dans le bloc centré.
Pas de problème de ce genre avec un overflow:hidden à ma connaissance.

Florent V. a écrit :
Hmm... au sujet du overflow: auto, je n'aime pas trop l'utiliser à cause de légers bugs de certains navigateurs qui nous donnent des barres de défilement inutiles dans certains cas. C'est le cas avec Firefox 3 pour ta page de test:

upload/2043-overflowaut.jpg

J'obtiens ceci en sélectionnant du texte dans le bloc centré.
Pas de problème de ce genre avec un overflow:hidden à ma connaissance.

Je l'ai rajouté sur ma page de test.
Enfin de toute façon dans quelques temps tout cela n'aura plus grande importance ...

Bonjour à tous

Je remonte ce topic parce que j'ai à peu près le même problème. En fait c'est le centrage vertical en absolute qui me pose problème, quand la fenêtre du navigateur est trop petite.

Je suis allé voir cette page :

http://changaco.net/fr/test/CSS/alignement_vertical_(inline-block+vertical-align)/

et apparement (parce que je n'ai pas encore testé juste constaté le support dans les navigateurs) la technique n'est pas supportée par les navigateurs à base de webkit tels que Safari et Google Chrome.

Aviez-vous déjà constaté ce dysfonctionnement ? Dans le pire des cas je peux envisager un test en php sur l'user agent pour centrer en absolute si le navigateur utilise webkit mais je préfère éviter.

Je m'en vais étudier cette solution en attendant.

Merci

EDIT : J'ai viré le header et le margin-top dans le span.hidden. Non seulement ça fait ce que je veux (une div conteneur centrée en X et Y) mais en plus ça marche dans Safari 3 Win et Google Chrome.

Merci pour ce code
Modifié par deejay-bee (31 Jan 2009 - 13:46)