Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1054 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Prendre tout l'espace vertical libre d'un parent ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Prendre tout l'espace vertical libre d'un parent ?

n°2258257
Dreamkey
Posté le 18-05-2015 à 00:14:56  profilanswer
 

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 :
 

Code :
  1. <div id=image_panel>
  2.   <div id=bigimage>
  3.     <div id=image_big>
  4.       <a>
  5.         <img></img>
  6.       </a>
  7.     </div>
  8.   </div>
  9.   <div id=image_bar></div>
  10. </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  :) ).
 
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  :)

mood
Publicité
Posté le 18-05-2015 à 00:14:56  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Prendre tout l'espace vertical libre d'un parent ?

 

Sujets relatifs
horizontal left-shift et vertical Upper-shift (circular shift)Création d'un espace membre (sur wp)
Alignement vertical et footer toujours en bas de pagePlusieurs feuilles CSS dans une seule
Recherche dev HTML5 CSSquestions pour du CSS
HTML/CSS Probleme de format Besoin d'aide !!!Css inline impossible a trouver
Probleme connexion yahoo CSSajout de plusieurs images en HTML/CSS
Plus de sujets relatifs à : [CSS] Prendre tout l'espace vertical libre d'un parent ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR