1485 sujets

Web Mobile et responsive web design

Div centrée avec image SVG

Bonjour,
Je cherche a faire un layout assez simple :
- une DIV centrale centrée contenant une image en fond, format SVG (donc resize parfait) qui s'affiche sans scroll bar (donc hauteur a 100% de l'image ou plutôt de la taille affichable).

A l’intérieur de cette DIV, une autre DIV dont la position en haut est relative à ma DIV centrale, pour laisser mon titre toujours visible. Mon texte s'adapte à la largeur pour éviter le scrolling.

Mon but est d'avoir toujours une seule page sans scroll, toujours centrée, avec mon texte qui s'adapte.
Je rencontre des difficultés car a priori l'image SVG ne retourne pas forcement sa taille de la même manière que les images JPEG ou PNG. Et quand l'écran d'un mobile bascule en landscape, tout ne s'adapte pas forcement. J'ai essayé des grid layout sans succès, et je commence a tourner un peu (voir beaucoup) en rond sur les solutions CCS pures.
Mon sujet n'a pas l'air d'inspirer les grandes foules Smiley smile
Bon, je peaufine un peu.
j'ai tenté avec des media queries, car en fait mon design n'est pas si courant, c'est une page sans scrolling vertical ("no pan" comme disent les english).
En media queries, ça se traduit par un travail sur min-height et max-height avec un ajustement de la taille des caractères pour toujours faire rentrer le texte dans ma <div>. Un truc dans le genre :
@media screen and (min-height: 480px) {
	body { font-size:0.6rem; color: salmon; }
	.container { width:675px; }
}
@media screen and (min-height: 530px) {
	body { font-size:0.8rem; color: red; }
	.container { width:675px; }
}
@media screen and (min-height: 1024px) {
	body { font-size:1.5rem; color: yellow; }
}

Bon, ça ne marche pas évidement Smiley cligne . Déjà, impossible de trouver des valeurs standard de référence pour les points de rupture, et avec max-height en fait, tout est en texte jaune (-> 1024px).
Pour info, mon code provisoire :
body {
	background-image: url('img/fond.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center 10px;
	background-color: #338637;
}

<body>
	<div style="font-size: 100%;">
		<p>Mob blabla qui fait quelques lignes, une dizaine au plus, de toute façon je l'ajuste comme je veux. Et ma div de toute façon n'est pas encore ajustée en hauteur pour éviter d'écraser mon titre donc bon...</p>
	</div>
</body>

Modifié par Singman (11 Dec 2013 - 19:57)
J'arrive a quelque chose de pas trop éloigné de ce que je voudrais, mais il reste encore du travail.
En fait, je laisse tomber le responsive design propre (puisque personne ne répond) et je passe en mode sagouin, je force mes résolutions.
@media screen and (min-height: 1px) and (max-height: 480px) {
	.fond { width: 339px; height: 480px; }
	.container { font-size:0.8em; width: 297px; }
}
@media screen and (min-height: 481px) and (max-height: 640px) {
	.fond { width: 452px; height: 640px; }
	.container { font-size:1.1em; width: 403px; }
}
@media screen and (min-height: 641px) and (max-height: 800px) {
	.fond { width: 565px; height: 800px; }
	.container { font-size:1.3em; width: 508px; }
}
@media screen and (min-height: 801px) {
	.fond { width: 724px; height: 1024px; }
	.container { font-size:1.6em; width: 658px; }
}
body {
	background-color: #338637;
}


<div class="fond" style="background-image: url('img/fond.svg'); background-size: contain; background-repeat: no-repeat; margin-left: auto; margin-right: auto;">
	<div class="container" style="position: relative; top: 10em; padding: 10px 10px; text-align: justify; text-justify: newspaper;">
		<p>Mob blabla qui fait quelques lignes, une dizaine au plus, de toute façon je l'ajuste comme je veux. Et ma div de toute façon n'est pas encore ajustée en hauteur pour éviter d'écraser mon titre donc bon...</p>
	</div>
</div>

Modifié par Singman (11 Dec 2013 - 19:57)
Modérateur
Bonjour,
Singman a écrit :

Bon, ça ne marche pas évidement Smiley cligne . Déjà, impossible de trouver des valeurs standard de référence pour les points de rupture, et avec max-height en fait, tout est en texte jaune (-&gt; 1024px).

Pour info: ça fonctionne très bien => http://codepen.io/anon/pen/yCcui
Pour les valeurs standards de références de points de rupture, c'est sûrement parce que ça n'existe pas.

Singman a écrit :
En fait, je laisse tomber le responsive design propre (puisque personne ne répond) et je passe en mode sagouin, je force mes résolutions.

ça sert à rien de s'énerver. De toute façon, pour ce genre de systèmes, si ils peuvent avoir des raisons d'être, sont des bricolages réalisés pour des situations précises, et rarement de sites qui répondent à toutes les problématiques. Quid du changement de taille de police par l'utilisateur? Du zoom? De la police microscopique sur un mini device?
Sujet clos
Aller à