Petit problème de CSS


biscuit
WRInaute impliqué
WRInaute impliqué
 
Messages: 519
Inscription: 5 Juin 2006

Petit problème de CSS

Message le Ven Jan 12, 2007 11:58

Salut tous!

Alors voilà j'ai un <div> dont la largeur est flottante (structure en 3 colonnes) et j'ai créé une gallerie de photos où chacune des photos est inclue dans un autre <div> à hauteur variable en fonction de la légende. Le problème, lors des retours à la ligne (ligne de photos suivantes), la première photo ne se place pas à gauche mais sous la photo de la ligne supérieur ayant la plus faible hauteur... Je sèche un peu (sûrement par saturation). Un p'tit coup de main est le bienvenu, merci.

La page en question: -http://www.aquariophilie.ch/gallerie-photos.html
(le site n'est pas encore vraiment fini...)


nickargall
WRInaute accro
WRInaute accro
 
Messages: 6339
Inscription: 13 Juin 2005

Message le Ven Jan 12, 2007 12:26

Je tente la réponse en tant que débutant en CSS :)

Tu peux mettre une hauteur fixe aux div créées
Tu peux intercaler une div vide ayant pour propriété css "clear:both;"a chaque paquet de 5 div créées
Code: Tout sélectionner
<div stye="clear:both;"></div>

Cette dernière solution va faire hurler les puristes du CSS je pense, les div vides de contenu sont pas très correctes il me semble.

Voilà, en espérant que d'autres plus calés que moi en CSS vont te donner une solution :)


TrAsKiN
WRInaute discret
WRInaute discret
 
Messages: 136
Inscription: 17 Juil 2006

Message le Ven Jan 12, 2007 12:29

Je te conseillerais d'encadrer chaque ligne avec un div en clear:both


e-kiwi
Modérateur
Modérateur
 
Messages: 15544
Inscription: 23 Déc 2003

Message le Ven Jan 12, 2007 12:29

>> a chaque paquet de 5 div créées
pourquoi 5 ? son but est d avoir une galerie "resizable" je suppose

>> Je te conseillerais d'encadrer chaque ligne avec un div en clear:both
non plus, car il peut avoir 4,5,6,7 photos par ligne se lon la résolution

je plus propre graphiquement est d'avoir un div à hauteur fixe, quitte à mettre un overflow:auto si vraiment une legende est trop grande, sinon cela ne fera pas tres strucruté visuellement


biscuit
WRInaute impliqué
WRInaute impliqué
 
Messages: 519
Inscription: 5 Juin 2006

Message le Ven Jan 12, 2007 12:36

e-kiwi a écrit:>> a chaque paquet de 5 div créées
pourquoi 5 ? son but est d avoir une galerie "resizable" je suppose

>> Je te conseillerais d'encadrer chaque ligne avec un div en clear:both
non plus, car il peut avoir 4,5,6,7 photos par ligne se lon la résolution

je plus propre graphiquement est d'avoir un div à hauteur fixe, quitte à mettre un overflow:auto si vraiment une legende est trop grande, sinon cela ne fera pas tres strucruté visuellement


exact... donc il peu y en avoir 3-4-5...
Fixer une hauteur pour chaque ligne > oui ce serait ça mais comment déterminer quelle est la plus haute (variable en fonction du commentaire)?

Edit: j'avais pas vu ta dernière ligne e-kiwi... je vais essayer avec overflow
Dernière édition par biscuit le Ven Jan 12, 2007 12:38, édité 1 fois.


nickargall
WRInaute accro
WRInaute accro
 
Messages: 6339
Inscription: 13 Juin 2005

Message le Ven Jan 12, 2007 12:37

e-kiwi a écrit:>> a chaque paquet de 5 div créées
pourquoi 5 ? son but est d avoir une galerie "resizable" je suppose

Oui bien sur, j'ai dit 5 passque yen a 5 par ligne sur l'exemple qu'il donne, mais il peut remplacer "5" par une variable "$nb_photos_par_ligne"

Sinon la hauteur fixe est aussi la solution préférable en effet, avec en effet le "overflow:auto" au cas ou (bien que les ascensceurs soient des plus moches sur des petits espaces comme ça)

Edit : oups pas vu la réponse pour les 3,4,5 selon la résolution de l'écran. Donc a ce moment la c'est un peu compliqué à mettre en place...


e-kiwi
Modérateur
Modérateur
 
Messages: 15544
Inscription: 23 Déc 2003

Message le Ven Jan 12, 2007 12:43

oui, le nombre de photos n est pas fixe ! c est le but du xhtml, prend ton explorateur windows, met toi en miniature sur un repertoire de photos, et fait varier la longueur de la fenetre, il veut reproduire cet effet (enfin je suppose) donc je ne vois que la hauteur fixe pour un affichage "joli"


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Lectures recommandées sur ce thème :

Consultez la description détaillée des produits ou services de Google suivants : JotSpot

  • Synthèse du référencement Google
    Cet outil vous donne un petit résumé de l'état de référencement de votre site dans Google.
  • Détection de pages dupliquées
    Cet outil vous permet de calculer la similarité entre 2 pages web. L'algorithme utilisé repose sur l'analyse des occurrences des mots (mais pas sur leur positionnement dans les pages). Google utilise cette notion à certains endroits dans son algorithme, mais de façon bien plus évoluée que ce petit outil... Avoir des pages trop similaires peut entraîner des problèmes d'indexation... Cet outil vous permettra peut-être de résoudre certains problèmes de contenus dupliqués.


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités