Problème de centrage vertical

Bonjour,
Je fais appel à vos lumières pour résoudre un problème dont je ne vois pas l'ombre d'une solution depuis plusieurs jours.

Je travaille actuellement sur la réalisation d'un mini site qui va me permettre de démarcher des agences en vue de trouver un poste de webdesigner / DA junior.

Il s'agit d'un site en scroll vertical avec à chaque section une image et un court texte. Chaque image se positionne sur un fond coloré qui s'étend, en hauteur comme en largeur, sur la zone visible du site. Lorsque que l'utilisateur scroll, on change de couleur de fond pour passer à l'image suivante et ainsi de suite.

Le centrage horizontal n'a pas posé de problème, par contre le centrage vertical c'est une autre histoire ... J'ai essayé de mettre une dimension "responsive" dans ce site, tout fonctionne donc avec des pourcentages. Pour centrer mon image verticalement j'utilise un système de padding-top que je calcul de la façon suivante :

La marge que je souhaite obtenir sur une hauteur de 768px est de 209px. 209/768 = 0,272 => ma marge est donc de 27,2% de la hauteur total.

Le soucis c'est que ce pourcentage s'ajoute à ma hauteur et fait donc dépasser mon fond coloré et mon image est toujours décentrée ... Ma première réaction a été de me dire, je vais mettre height: 72,8% (100-27,2) mais ça ne fonctionne pas non plus.

J'espère avoir été clair dans mes explications, voici le site en l'état pour que vous puissiez mieux comprendre mon problème :

www.amandine-richard.com/bonnesraisons/

Voici quelques morceaux de code qui entre en jeux :

body {
	font: normal 100% Arial, Helvetica, sans-serif;
	width:100%;
	position:absolute;
	top:0px;
        left:0px;
        bottom:0px;
}

Un des visuels, ils fonctionnent tous de la même façon :

.oeil {
	margin: 0 auto;
	width: 100%;
	height:100%;
	background-color:#803588;
	text-align:center;
	padding-top:27.2%; /*209/768 = 0,272*/
}

Merci d'avance
Modifié par AmandineRd (12 May 2012 - 16:25)

Amandine,

Jouer du padding me semble voué à l'échec.

Ton problème, c'est que tu as une hauteur de section de 100%, correspondant à la hauteur du contenu visible de la fenêtre dans ton cas.
Pour moi, disons que ce sera 1000px, et pour d'autres 800px, 1200px, etc..

L'idée (bidouille) pour moi serait donc d'éloigner ton bloc image + texte par rapport au haut de ta section (ce que tu semblais vouloir faire avec le padding ?), d'autant que nécessaire pour qu'il paraisse centré.

Sans JavaScript, mais maigres connaissances CSS s'avouent vaincues.
Par contre, avec JavaScript, voici ce que je ferais :

<div id="section">
	<div id="espaceur" style="height: [(taille_section - taille_contenu) / 2]"></div>
	<div id="contenu"></div>
</div>

Au chargement de la page, une fonction se charge de dimensionner tous les "espaceurs" (positionnement du style "height"), et si l'utilisateur redimensionne sa page, tu peux sûrement te brancher sur un onresize.

Avec cette astuce (qui a sûrement ses failles), on perd un peu la puissance des CSS quand même.

Sinon, dernière remarque, ton texte a du "position: relative" un peu partout. J'ai peur que cela te joue des tours, ne pourrais-tu pas t'en passer ?


Quoi qu'il en soit, ce que je donne n'est pas une solution, juste une idée, mais vu que j'ai moi même des problèmes d'alignement vertical, je ne dois pas être la bonne personne pour te répondre

Merci pour ta réponse !

Le soucis c'est que je ne connais pas un traitre mot de javascript ... Le peu que j'ai fais avec JQuery je l'ai trouvé sur le net et, coup de bol, ça a marché du premier coup.

Sinon je dois dire que j'aimerais trouver une solution en CSS, comme je vend le fait que j'ai quelques connaissance en HTML/CSS dans ma candidature il faut que je mette le paquet là dessus.

Pour ce qui est des position relative je n'en ai aucune dans mon code. La seule que j'ai c'est une position absolute dans le body.

Pour les "position: relative", je parlais de ton plugin cufon-yui.js qui bidouille tes textes (regarde le code produit avec un Firebug par ex.).

Mais en fait, ça n'a a priori aucune incidence (si c'est bien fait) puisque c'est dans ta balise <b> (j'avais regardé un peu vite).

Ah oui effectivement j'avais vue qu'il découpait mes textes bizaremment ... Je crois que je me pencherai là dessus plus tard.

bonsoir,

display:table

tout d'abord:
1) height et width a 100% pour html, body et les div a paginer
2) pas de padding-top dans les div !!! (valeur statique inadaptée)

ensuite
1)formatage div > .figure en tableau

Ce qui donne comme CSS a tester en fin de feuille :

body , html {height:100%;
}
body > div  {
display:table;
width:100%;
padding:0;
height:100%;
}
.figure {
display:table-cell;
vertical-align:middle;
}

et en enlevant tout les padding-top supposé rectifier l'alignement.

Reste a verifier le résultat dans plusieurs navigateur avant de finalisé et de mettre en ligne.

Cordialement,
GC
Modifié par gc-nomade (13 May 2012 - 03:00)

C'est effectivement une solution, mais je crois - si mes souvenirs sont exacts - qu'elle perdra la compatibilité ie6/7.

Pour un site de démonstration de compétences, ça peut être moyen moyen :-p

Après, ça reste propre par contre.

Ca marche super !

Par contre maintenant c'est le menu qui pose problème. J'ai appliqué la même technique mais comme il est en position: fixed il se comporte différemment.
Pour ce qui est du positionnement à droite, dès que je met des valeurs en pourcentage (et pas en pixel comme initialement) il ne comprend plus le right:0 et revient se mettre à gauche ...

bonjour,

Pour ie7 et inf, une solution serait le display:inline;+zoom:1; et un élément supplémentaire pour chaque boite.

<div class="intro" id="intro">
   	  <div class="figure">
            <p>
                <img src="img/img0.png" alt="intro">
            </p>
      </div>
<p class="valign-IE7"><!-- correction alignement vertical IE7et moins --></p>    
 </div>

et le css en commentaire conditionnel.

<!--[if lte ie 7]>
<style>
div.figure , p.valign-IE7 {display:inline;zoom:1;vertical-align:middle;width:95%;}
p.valign-IE7 {height:100%;width:1px;}
</style>
<![endig]-->

cordialement,
GC

AmandineRd a écrit :
Ca marche super !

Par contre maintenant c'est le menu qui pose problème. J'ai appliqué la même technique mais comme il est en position: fixed il se comporte différemment.
Pour ce qui est du positionnement à droite, dès que je met des valeurs en pourcentage (et pas en pixel comme initialement) il ne comprend plus le right:0 et revient se mettre à gauche ...

Pour le menu, il ne fallait rien changé a part decalé les "langues" pour eviter une superposition.
Ce n’était pas choquant de ne pas voir le menu se centrer.

Je vais surement mettre les langues d'un côté et le menu de l'autre pour éviter la superposition.

J'ai essayé d'appliquer la technique au menu car j'ai un bug avec Firefox (v12 sur Mac), le menu ne se centre pas, il est quasi collé en bas de la page.

la structure de ton menu ne permet pas le centrage via display:table et le positionement fixed/absolute l'emporte sur display .Car les element sont sortis du flux .

Zut ... Il y a une astuce pour résoudre ça?

Sinon je me suis penchée sur les commentaires conditionnels (je ne connaissais pas du tout) et ça a l'air très pratique ! Je vais essayer de trouver un truc du même genre pour régler le bug firefox mais pour le moment je ne vois même pas d'où il vient.

AmandineRd a écrit :
Zut ... Il y a une astuce pour résoudre ça?

En reprenant une structure adaptée

<div class="nav">
<ul>
	<li><a href="#intro"><img src="img/nav0.png" alt="0"></a></li>
	<li><a href="#raison1"><img src="img/nav1.png" alt="1"></a></li>
    <li><a href="#raison2"><img src="img/nav2.png" alt="2"></a></li>
    <li><a href="#raison3"><img src="img/nav3.png" alt="3"></a></li>
    <li><a href="#raison4"><img src="img/nav4.png" alt="4"></a></li>
    <li><a href="#raison5"><img src="img/nav5.png" alt="5"></a></li>
    <li><a href="#raison6"><img src="img/nav6.png" alt="6"></a></li>
    <li><a href="#raison7"><img src="img/nav7.png" alt="7"></a></li>
    <li><a href="#raison8"><img src="img/nav8.png" alt="8"></a></li>
    <li><a href="#fin"><img src="img/nav9.png" alt="10"></a></li>
</ul></div>
<p class="valign-IE7"><!-- correction alignement vertical IE7et moins --></p>  
<p

.nav {position:fixed;display:table;right:1em;height:100%;}
.nav ul {display:table-cell;vertical-align:middle;width:xx;}

<hs> Au Soleil + bbq </hs>

Mille merci !!!

J'ai appris plein de choses et mon site et nickel.

:), attention, pour les reprises IE7, il y a une erreur de syntaxe et il manque l'element correcteur:

1) les "commentaires conditionnels" sont mal refermés (<![endif]--> )
2) et l'element correcteur: <p class="valign-IE7"></p> n'apparait pas dans le html.
(Pour info, un element de type block vide affiche une hauteur de zéro, de fait aucune incidence sauf dans IE7 et moins ou il trouve son utilité.)

Bonne continuation,

GC