28172 sujets

CSS et mise en forme, CSS3

Occuper tout l'espace libre d'un parent ?

Bonjour tout le monde,

Je voudrais mettre en place une galerie pour partager facilement des photos à ma famille.
J'ai trouvé PhotoShow, qui a une interface sympa avec le support des Photo Spheres. Il lui manque par contre le support des descriptions, et vu que le code est disponible sur github j'ai commencé à l'implémenter (avec quelques autres correctifs divers). Toute la partie PHP/javascript est finie et marche bien, par contre je bloque pour le CSS.

Vous pouvez voir une démonstration ici, mais voici le squelette de la partie qui m'intéresse :


<div id=image_panel>
  <div id=bigimage>
    <div id=image_big>
      <a>
        <img></img>
      </a>
    </div>
  </div>
  <div id=image_bar></div>
</div>


#image_panel est toute la partie en noir dans la galerie, #bigimage contient l'image et #image_bar contient les boutons pour défiler, télécharger... la photo.
La photo en elle-même est affichée bizarrement : #image_big l'affiche comme "background: url()", alors que la balise img pointe sur une image de 1x100px.

J'ai rajouté une div #description entre #bigimage et #image_bar. Par défaut, elle ne s'affiche pas : ces deux derniers sont tous les deux en "position: absolute". Ils ne se chevauchent pas car #bigimage a "bottom: 35px" et #image_bar a "height: 30px". Seulement voilà, ma description a une hauteur indéfinie, donc je ne peux pas faire la même chose.
J'ai donc essayé de passer #bigimage et #image_bar en "position: absolute". #bigimage se retrouve subitement avec une hauteur aberrante de 167000 pixels, mais c'est corrigé en supprimant le "width: 100%; height: 100%" qui étaient sur la balise img (si quelqu'un comprends ce comportement, je suis curieux de comprendre Smiley smile ).

J'ai donc maintenant mes trois div qui s'affichent à la suite, mais l'image n'essaye plus de remplir tout l'espace disponible de #image_panel (moins les boutons et la description). Il y a même des éléments qui se chevauchent et ne se comportent plus pareil si je réduis la hauteur de ma fenêtre.

Est-ce vous pouvez m'aiguiller sur une piste pour garder la même présentation, en restant en CSS ?
Merci Smiley smile
J'ai fait quelques progrès : #image_panel a l'attribut "display: table;", et #bigimage, #description, #image_bar ont l'attribut "display: table-row;".
Avec quelques autres attributs j'obtiens quasiment la même chose.

Cependant j'ai maintenant deux soucis :
1/ #image_panel a "height: calc(100% - 150px);". Cela marche bien, sauf que niveau interopérabilité ce n'est pas supporté par IE8, qui est apparemment encore bien utilisé

2/ quand je réduis la hauteur de la fenêtre, #image_panel va se réduire jusqu'à une taille minimale : 100px pour la photo, autant que nécessaire pour la description, plus 30px pour les boutons. Après cela, .linear_panel (qui est la barre de miniatures des images en bas de la page) va commencer à le recouvrir, alors qu'avec l'ancien code #image_panel continuait à être réduit jusqu'à disparaître complètement. J'ai essayé avec l'attribut overflow, mais je n'arrive pas à le réduire plus que la taille minimale de ses éléments ou le « pousser » en dehors de la partie visible de la page.

Est-ce qu'il y a un moyen de faire ça ?
Bonjour,

Pour ce genre de page et compatible IE8, tu peut regarder du coté de display:table et construire un gabarit plus ou moins vide pour délimiter les grandes zones de ta page.

Vite fait et sans aucun test, tu pourrait te lancer sur une structure de ce genre : http://codepen.io/gc-nomade/pen/WvRvgN (aucune garantie )

L'idéal aurait était display:flex;
Autre solution, partir sur une structure cohérente (contenu compréhensible si afficher sans styles) et te servir de JavaScript pour redimensionner chacune de tes zones à la volée. en final plus solide et maitrisable si bien pensé qu'une solution CSS.

++
Merci pour l'exemple Smiley smile
Du coup j'ai modifié les attributs de .linear_panel, en enlevant son "position: absolute" il n'essaye plus de recouvrir mon #image_panel. Quand la hauteur est petite (moins de 300px), il y a une barre de défilement qui apparaît, ce qui me semble pas trop mal par rapport au comportement d'origine (réduire #image_panel) :
upload/20642-or.jpg

Mais du coup j'en reviens au même problème qu'au début. Si je ne définis pas une taille à #image_panel, il ne va prendre que la taille minimale dont il a besoin.
"calc(100% - 150px)" est parfait mais vu qu'il n'est pas compatible IE8 j'aimerais éviter ; j'ai essayé avec des margin-bottom, padding-bottom mais ça ne fait pas ce que je veux.
Sur le codepen tu as fixé à 80%/20% mais vu que les miniatures ont une hauteur fixe ce n'est pas optimal.

C'est vrai que flex me paraît idéal (je ne connaissais pas), mais quand je vois qu'il commence à être vaguement supporté par IE10... Smiley biggol
Si je pouvais éviter javascript ça m'arrangerait Smiley smile
Du coup j'ai essayé autre chose. Je suis reparti du CSS de base (avec les "position absolute") et j'ai rajouté une nouvelle div autour des 3 div composant l'image, comme ceci :
<div id=page>
  <div id=image_panel>
    <div id=table_css>
      <div id=bigimage></div>
      <div id=description></div>
      <div id=image_bar></div>
    </div>
  </div>
  <div id=linear_panel></div>
</div>

#table_css a donc "display: table", les 3 enfants "display: table-row".
Le rendu ne change pas tellement, sauf quand je réduis la hauteur de la page : #linear_panel ne va réduire #image_panel que jusqu'à 100px, correspondant à la hauteur minimale de #bigimage, mais pourquoi ?

Ensuite il dépasse complètement le cadre :
upload/20642-test.jpg

Un "overflow: auto" sur #image_panel semble être une bonne solution (il me reste un petit problème d'ascenseur qui s'affiche tout le temps), mais pourquoi le comportement change complètement en rajoutant cette table ?
sans code css et un exemple en ligne difficile de te dire.

as tu un max-height ?, quel type de positionnement ?, etc ....
Alors j'ai recopié la base de la démo en ligne : http://jsfiddle.net/2syjowbk/2/
Ensuite en modifiant les éléments pour être des tables en CSS : http://jsfiddle.net/2syjowbk/3/
Ça serait pas mal si je n'utilisais pas calc() sur #image_panel, mais surtout au lieu de le diminuer de plus en plus, #linear_panel va le recouvrir passé une certaine hauteur (les 100px de l'image "inc/img.png" + la hauteur du texte de la description + la hauteur des boutons).

Du coup l'exemple en rajoutant une table autour de mes 3 éléments : http://jsfiddle.net/anvto788/1/
Bizarrement en réduisant la fenêtre, au lieu d'être recouvert comme l'exemple précédent, #image_panel va se réduire jusqu'à 100px, la hauteur de l'image "inc/img.png" : par curiosité j'aimerais comprendre pourquoi, est-ce que la balise img a un attribut par défaut qui explique ça ?

Et donc la version (finale ?) qui utilise la propriété overflow sur #image_panel : http://jsfiddle.net/anvto788/2/
Le comportement est différent du premier exemple, mais est-ce qu'il y aurait mieux, à cause de la taille variable de la description ?
Sujet clos
Aller à