Aide pour positionnement

Bonjour à tous,

Une fois n'est pas coutume, c'est à mon tour de demander de l'aide pour un positionnement, à première vue pas trop compliqué, mais dont j'ai du mal à la faire adapter à tous les devices.

Contexte : je développe avec Apache Cordova + Angular JS une appli. Elle se présente de la forme :

• une image de header, fixée en haut
• une barre de navigation, fixée en bas
• entre les deux ma vue (lipsum…)

Problème : Je souhaiterai :

• que mon image ait une largeur de 100%
• qu'elle est une hauteur variable permettant de conserver le ratio
• que le lipsum débute juste sous le header

En l'état j'utilise des position absolute (c'est ce que j'ai cru comprendre devoir utiliser dans le tuto, de grafikart soit dit en passant : très bon tuto).

Mais du coup si je fixe une hauteur mon lispum est soit trop bas (cf. screenshot) sur les petites devices, soit chevauche l'image sur les grandes devices.

Mon code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<header class="header">
    <img src="css/img/plage.jpg" />
</header>

<section class="view"></section>

<nav class="nav">
    <a>...</a>
    <a>...</a>
    <a>...</a>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px; /* ici je fixe en dur une height, et c'est bien ça le problème */
}

.header img {
    width: 100%;
    height: auto;
}   

.view {
    position: absolute;
    top: 300px; /* ici je fixe en dur une height, et c'est bien ça le problème */
    right: 0;
    bottom: 60px;
    left: 0;
}

Merci pour vos lumières !

là ta solution va être de tout fixer ou de faire une concession et d'accepter que seul une partie de ton image soit visible.

En effet tu peux toujours faire un div scrollable qui sera donc fixé par rapport au reste.

(il y a aussi une solution en JS mais c'est un peu ugly en JS on est d'accord :D)

Par contre fait attention car laisser la hauteur de l'image choisie par l'utilisateur c'est bien souvent s'exposer à des problèmes d'affichage moche par la suite.

Le problème de tout fixer, c'est qu'entre un iPhone et un iPad, à hauteur fixe (mettons 300px) l'image sera trop petite en largeur

Question bête : tes images ont un ratio fixe ?

• Si oui, il te suffit de jouer avec padding-top pour obtenir ce que tu veux
• Si non, il faudra un poil de JS mais ça marche pareil

Pour appuyer la solution 1 de viki : http://martinbean.co.uk/blog/2013/09/12/maintaining-aspect-ratio-in-css/

Merci pour vos réponses !

Question bête : tes images ont un ratio fixe ?

Oui. 640x300px. Mais je ne vois pas trop comment appliquer le padding-top, vu que ma hauteur va varier en fonction de la largeur du device.

Pour appuyer la solution 1 de viki : http://martinbean.co.uk/blog/2013/09/12/maintaining-aspect-ratio-in-css/

Le problème, c'est que d'un device à l’autre la largeur d'écran peut changer.

Bah justement

C'est le principe de ce tricks.

Oui effectivement… je l'ai appliqué mais sans succès. Si quelqu'un a la motivation de compléter ce jsfiddle

Merci, c'est exactement ça dans le résultat. J'ai réussi à l'intégrer, mais du coup ma navbar (3 boutons du bas) refuse d'être en fixed.

Voir http://jsfiddle.net/du2ch0p9/2/

Bah avec un position: fixed au lieu de position: absolute ça passe mieux

Ouep Bon IRL le problème n'est pas encore résolu (j'au un panel dans mon view) mais je pense que je vais m'en sortir.

J'en profite : sur l'image, je vais mettre une box aligné à gauche et centré verticalement. Une idée pour qu'elle soit toujours égale à 1/2 de la hauteur de l'image ?

Parfait, un grand merci !

Petite question supplémentaire :

http://jsfiddle.net/du2ch0p9/4/

Sur cet exemple, la scrollbar verticale porte sur toute la hauteur (header + view + nav) et de ce fait passe sous l'image. Y a-t-il moyen de la restreindre que sur la view (lorem) ?

Normalement tu n'as pas de scrollbar aussi visible sur mobile/tablette…

Si tu veux vraiment afficher la scrollbar comme tu le souhaites, il va falloir faire quelques petits changements (rien de très compliqué) : http://jsfiddle.net/du2ch0p9/5/

L'idée c'est de porter l'overflow uniquement sur la div.view en fixant ses dimensions (ici via du positionnement absolu car on ne connait que ses marges et on ne veut pas qu'elle sorte de l'écran). J'avais utilisé cette méthode pour une appli mobile HTML5 (et du coup, tu peux même passer le header et la nav en position absolue plutôt que fixe ^^).

Myssdii : Sauf que là ta position de .view est calculée par rapport à la hauteur de la page et non sa largeur

Du coup il faudra sans doute un poil de JS, ou trouver un bout de CSS qui permettre de positionner verticalement par rapport à la largeur. Peut-être avec flexbox ?

Ah ouais, effectivement ça passe pas au resize en haut (j'avais une top-bar fixe sur mon appli…).

Du coup, en CSS là tout de suite j'ai rien, et je suis pas encore assez à l'aise avec flexbox pour savoir si c'est faisable avec =/ Donc ouais, à défaut du JS, même si je comprends pas d'où tu as une scrollbar comme ça qui s'affiche sur tablette.

À mon avis ça ressemble fort à la scrollbar de Chrome, du coup je dirais qu'il teste avec une extension.

Par contre sur tablette/mobile, même si la scrollbar n'est pas toujours affichée, je peu qu'elle le sera permettra de voir qu'il y a un problème : c'est pas top pour l'utilisateur, qui peut penser que du contenu est caché derrière le header.

Idem pour flexbox : j'en ai jamais utilisé et vu le support bancal suivant les plateformes, je pense attendre encore un peu avant de m'y mettre sérieusement…

Oui, je teste avec l'extension Ripple pour Chrome. Mais IRL, au moins sur les iTrucs, il y a une scrollbar, même si elle est beaucoup plus soft. C'est pas gênant en soi, mais ce fait moche une scrollbar qui se fait cacher par le header.

Que faire… passer en relative ?