Petit problème de CSS
7 messages
• Page 1 sur 1
-

biscuit - WRInaute impliqué

- Messages: 519
- Inscription: 5 Juin 2006
Petit problème de CSS
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...)
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

- Messages: 6339
- Inscription: 13 Juin 2005
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
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
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
-

e-kiwi - Modérateur

- Messages: 15544
- Inscription: 23 Déc 2003
>> 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
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é

- Messages: 519
- Inscription: 5 Juin 2006
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

- Messages: 6339
- Inscription: 13 Juin 2005
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

- Messages: 15544
- Inscription: 23 Déc 2003
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"
7 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
- Petit problème avec mes CSS
- [CSS] petit problème DIV sous Firefox
- CSS et petit points
- [css] Petit souci pour le menu du jour!
- [CSS] Tout petit pb entre IE et FireFox sur balise Hx
- Un petit coup de pouce avant de commencer mon site en css
- Petit problème graphique.... où est le problème !
- petit problème
- Un petit probleme
- petit probleme de l inscription
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


