28112 sujets

CSS et mise en forme, CSS3

CSS responsible

Bonsoir à tous
Je suis en train de tenter de réaliser une chose très simple, mais je n'arrive pas à faire en sorte que l'image s'adapte au mieux à la taille de l'écran.
L'adresse de la page: http://tests.osirisnet.net/popuptest.html

Le HTML:

<body onload="window.resizeTo(1153,1030);" >
    <div id="text">
        <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
        <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
    </div>
    <div id="slide">
    <figure>
        <span id="author">cm</span>
            <img id="slideimage" src="/mastabas/qar-guiza/photo/qar-guiza_hg_134.jpg" alt="">
        </figure>
    </div>
</body>


Le CSS:

*, *:before, *:after {box-sizing: border-box;}
html, body{height:100%;width:100%;}
@media screen and (max-width:1024px) {html {font-size:1.7vw;}}
@media screen and (max-width:705px) {html {font-size:12px;}}
body{overflow:hidden;padding:0.5em 0;
    display:flex;flex-direction:column;
    justify-content:flex-start;flex-shrink:0;
    font-family:Geneva, Arial, Helvetica, sans-serif;
}
#text{text-align:center;}
#text p{margin:0 auto;}
#slide{margin:0.5em auto;text-align:center;
    min-width:0;min-height:0;max-width:100%;}
#slide figure{position:relative;display:inline-block;margin:auto;}
#slideimage{border-radius:0.5em;
    max-width:100%;max-height:100%;
    min-width:0;min-height:0;overflow:hidden;
}
#author{font-size:0.8em;font-style:italic;
    position:absolute;z-index:10;
    left:0;top:-1.5em;
    text-align:left;}
#author::before{content:'Photo: ';}

Je suppose que c'est dû aux flex-bidules que je ne maîtrise pas...

Merci de votre aide
Modifié par PapyJP (14 Jan 2017 - 16:32)
Hello!

Flexbox ici n'est pas le problème. par contre, si tu retire "height:100%;width:100%;" à ton boby, tout ce place. Smiley cligne
Effectivement,mais franchement je ne comprends pas la logique de ces commandes.
Il faut html{height:100%;width:100%;} mais par pour le body.

Peux tu m'expliquer?
En fait, pour ma part je n'en met ni sur body ni sur html.

Je t'ais indiqué body, mais tu peux le retirer complètement en fait.

EDIT: en fait je n'utilise width:100% sur mon boy et html que lors que j'ai un wrap à fait au niveau de la barre de menu et du pied de page. Ce qui n'est pas ton cas ici.
Modifié par juliesunset (13 Jan 2017 - 20:15)
Modérateur
PapyJP a écrit :
Effectivement,mais franchement je ne comprends pas la logique de ces commandes.
Il faut html{height:100%;width:100%;} mais par pour le body.

Peux tu m'expliquer?
En fait ces deux balises sont des éléments de type block qui par définition occupent 100% de la largeur disponible et s'adaptent en hauteur à leur contenu.

Leur appliquer une hauteur et une largeur égale à 100% revient à faire la déclaration explicite de leur comportement naturel.



PS : Même principe avec la déclaration suivante:
*, *:before, *:after {box-sizing: border-box;}

Les éléments générés héritent des propriétés de leur parent donc il est obsolète de préciser cette règle en incluant les pseudo-éléments.
* {box-sizing: border-box;} devrait suffire.
C'est peut-être tordu mais pour ma part j'applique box-sizing à l'élément html puis fais jouer l'héritage pour l'application à l'ensemble des éléments. Ce qui donne:
html {
          box-sizing: border-box;
}
  html * {
            box-sizing: inherit;
  }
J'ai essayé de supprimer le html mais ça ne marchait pas.
Edit maintenant ça marche, ne me demandez pas pourquoi '
Pour moi tout cela relève du pile ou face, je n'ai trouvé aucun document qui explique cela de façon pédagogique. Tous les bouquins que j'ai pu trouver sont des listes alphabétiques des paramètres, sans explication sur la façon de les utiliser quand on veut réaliser quelque chose.
Modifié par PapyJP (13 Jan 2017 - 21:40)
Greg_Lumiere a écrit :
Tu appliquais width/height=100% sur html et body pour quelle raison ? Un sticky footer ?

En fait j'ai changé plusieurs fois de techno et ça a dû être utile à un certain moment....
j'ai horreur de faire des choses par copier/coller sans comprendre et mette au point par tâtonnements.
Bon! Pour l'instant ça semble marcher sans html et body 100%. Il se fait tard je vais considérer le problème comme réglé même si je suis loin de comprendre pourquoi ça marche. Ça veut sans doute dire que je reviendrai à nouveau demander votre aide une prochaine fois!!
Merci à tous
Modérateur
PapyJP a écrit :

En fait j'ai changé plusieurs fois de techno et ça a dû être utile à un certain moment....

J'ai déja rencontré ce soucis c'est pourquoi maintenant je sur-commente mon css.
On a vite fait de créer une classe, d'intégrer une techno ou de prévoir un fallback dont, avec le temps, on a tendance a oublier la fonction ou le besoin qui lui a donné naissance. Au moins avec un commentaire explicite on s'y retrouve, même plusieurs mois/années plus tard.
Récemment j'ai même étendu cette pratique aux couleurs car même si de tête j'arrive maintenant à convertir #fff et #000, pour les autres c'est toujours un casse-tête.

PapyJP a écrit :
j'ai horreur de faire des choses par copier/coller sans comprendre et mette au point par tâtonnements.
Je suis dans le même esprit. Idem concernant les valeurs magiques, elles sont littéralement bannies de mon royaume ; ce qui donne lieu à de sacrés chasses aux sorcières.

PapyJP a écrit :
Ça veut sans doute dire que je reviendrai à nouveau demander votre aide une prochaine fois!!
N'hésite pas, pour ma part, si je peux ce sera avec plaisir sinon j'en tirerais sûrement une fois de plus une leçon.

PapyJP a écrit :
Merci à tous

Mais de rien. Bon week-end. Smiley smile
En fait, ça ne marchait (et encore pas tout à fait comme j'aurais aimé) qu'avec FireFox.
J'ai donc laissé tomber le CSS avec regret, et je suis reparti sur ce que je sais faire, le JavaScript que j'ai utilisé à cet effet avant que le CSS devienne populaire.
Il est totalement ridicule de faire un onresize (et autres onorientationchange) pour dire qu'on veut un simple texte en haut d'une page et au dessous une image centrée horizontalement et qui tient dans la page. C'est le genre de chose que CSS doit certainement permettre de faire, mais j'ai passé trop de temps à ne pas y arriver,j'abandonne.
Suis toujours preneur d'une solution qui marche avec tous les navigateurs.
Alors je pondérerais un peu ce qui c'est dit ici :

Le tag html a besoin d'une définition height à 100% pour certaines version de IE (c'était inclus dans les versions précédentes de Normalize.css) et si le body fait ici des siennes c'est en raison de son margin.

Hé oui, box-sizing: border-box en global ne marche pas dans tous les cas de figure, en tout cas pas s'il n'est pas appliqué directement sur certains éléments, comme par exemple certains éléments de formulaires.

Sinon il faut penser aussi que dans le cas d'un background sur un body celui-ci n'irait pas jusqu'au fond de la page si le contenu de cette dernière n'atteignait pas le fond, pour remédier à ceci il faut donc lui appliquer un min-height:100%.

Le code minimum que je retiendrais (en Stylus) :
html
  height 100% // @bugfix @affected IE @note Uniquement si l'on se sent concerné par les anciennes version d'IE

body
  min-height 100% // @note Gabarit sur la totalité de la hauteur de la page, même si le contenu ne l'atteint pas
  margin 0 // @param Celui que l'on veut @note En option certes mais je n'aime pas laisser un élément de mon layout aussi important à l'appréciation de n'importe quel navigateur


Edit : Tiens, je viens de revoir que dans certains cas de figure html:100% n'est pas optionnel : CodePen
Modifié par Olivier C (19 Jan 2017 - 02:06)
Modérateur
Bonjour,

Je me serais contenté de :
body {max-width:1153px;max-height:1030px;}
#slideimage{border-radius:0.5em;width:100%;}


Et j'aurais mis zéro javascript.

Le width:100% sur l'image me semble suffire pour qu'elle se redimensionne toute seule en prenant toute la place disponible à l'intérieur de son conteneur, qui, s'il est de type block, prendra toute la largeur disponible lui aussi. Il n'est pas nécessaire de donner un height (en son absence, l'image conserve ses proportions).
Les max-width:1153px; et max-height:1030px; se substituent au window.resizeTo(1153,1030).

EDIT : et on peut très certainement laisser tomber le max-height:1030px;

Le reste est cosmétique.

Ci-dessous un code complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body {max-width:1153px;max-height:1030px;}
#slideimage{border-radius:0.5em;width:100%;}

body {margin:0.5em auto;font-family:Geneva,Arial,Helvetica,sans-serif;}
#text{text-align:center;}
#text p{margin:0 auto;}
figure {margin:0;padding:0;}
#slide{margin:0 0.5em;}
#author{font-size:0.8em;font-style:italic;}
#author::before{content:'Photo: ';}
</style>
</head>
<body>
    <div id="text">
        <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
        <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
    </div>
    <div id="slide">
   	 <figure>
        	<span id="author">cm</span>
			<img id="slideimage" src="/mastabas/qar-guiza/photo/qar-guiza_hg_134.jpg" alt="">
		</figure>
    </div>
</body>
</html>
Amicalement,
Modifié par parsimonhi (16 Jan 2017 - 14:24)
Modérateur
Bonjour,

Si l'on veut aussi s'adapter en hauteur, c'est plus compliqué. Et on a probablement besoin de connaitre la hauteur des textes du haut de page (je n'ai pas réussi à me passer de cette information). Par exemple, si l'on suppose que le texte en haut fait 3em de hauteur :
body {max-width:1153px;}
#slideimage {max-width:100%;max-height:calc(100vh - 5.5em);}
/* 5.5em = 3em (texte du haut) + 1em (marge du body) + 0.5em (padding de la figure) + 1em (hauteur du "Photo...")*/
body {margin:0.5em auto;font-family:Geneva,Arial,Helvetica,sans-serif;text-align:center;}
#text {text-align:center;}
#text p{margin:0 auto;}
figure {display:inline-block;margin:0;padding:0.25em;text-align:left;}
#slide {margin:0 0.5em;}
#author {font-size:0.8em;font-style:italic;}
#author::before {content:'Photo: ';}
#slideimage {display:block;margin:0 auto;border-radius:0.5em;}
Si le texte en haut de page varie en hauteur quand la fenêtre devient moins large, on peut éventuellement rajouter des media-queries.

Si le navigateur ne reconnait pas les "calc" et les "vh" dans le css, l'affichage sera quand même acceptable (avec des scrollbars).

On pourrait simplifier le calc() avec des box-sizing (en n'ayant que la hauteur du texte du haut à retirer), mais est-ce bien nécessaire ici ? EDIT : en y réfléchissant à 2 fois, même avec des box-sizing, ça ne va rien simplifier ici.

On pourrait se passer de l'unité vh en mettant des height:calc(...) adaptées sur toutes les boites contenant l'image y compris le body et le html : un peu lourd pour pas grand chose, on est en 2017.

Amicalement,
Modifié par parsimonhi (16 Jan 2017 - 16:13)
En rapport avec ce que je disais plus haut, je viens de revoir que dans certains cas de figure html:100% n'est pas optionnel : CodePen.

J'avais oublié ce point pour le coup mais il me semblait que cela restait une règle importante...
Sujet clos
Aller à