Aide pour positionnement

L'auteur de ce sujet a trouvé une solution à son problème.
Staff
Auteur du sujet

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 !

Llama ◦ FAQ PHPTuto WAMP

+0 -0

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.

+0 -0
Staff
Auteur du sujet

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.

Llama ◦ FAQ PHPTuto WAMP

+0 -0
Staff
Auteur du sujet

Ouep :p 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 ?

Édité par elyppire

Llama ◦ FAQ PHPTuto WAMP

+0 -0

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

+0 -0

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.

+0 -0
Staff

À 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…

Staff
Auteur du sujet

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 ?

Llama ◦ FAQ PHPTuto WAMP

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte