28173 sujets

CSS et mise en forme, CSS3

Galerie d'images de tailles différentes : problème !

Pages :
Bonjour,

Voila j'ai développé une galerie d'images qui initialement placait les données dans des tableaux.
En vue de reprendre cela avec du CSS, j'ai donc testé pas mal de méthodes différentes, de tutoriels, mais je ne suis pas parvenu à ce que je souhaitai, alors que c'est pourtant basique :

photos présentées horizontalement, qui, s'il y'en a trop, passent a la ligne. tout en étant alignées sous forme de "colonnes", avec pour chacune, un texte (son titre et un compteur de hits en l'occurence).

Un peu comme ça quoi :
http://www.toocharger.com/img/scripts/cS2gD2.3899.jpg

Alors les problèmes que j'ai eu ont été multiples, mais le plus souvent les photos de la deuxième ligne ne commencaient pas au début de la ligne.
Autre question vaut'il mieux que chaque bloc image soit dans un div ou soit un élément de liste (li) ?

J'apprécierai vraiment votre aide car j'y ai passé beaucoup de temps, en vain. Auriez vous une idée, une source ? PS sachant que ca doit etre intégré dans un div de contenu.
Merci beaucoup !
Bonjour,

Il serait bien que tu donne une page en ligne pour qu'il soit possible de t'aider à rendre ta galerie comme tu le souhaite, ou au minimum du code source, même si c'est souvent moins parlant.
Oui je comprends !
Voila le code source HTML (j'ai enlevé le superflu pour que ça soit plus clair) :
<div id="global">
 <div id="content">
  <div id="contenu">
   <p>8 photo(s)</p>
   <ul id="galerie_mini">
    <li><a href="photo-10.html"><img src="photos/petit/10.jpg" /></a></li>
    <li><a href="photo-9.html">	<img src="photos/petit/9.jpg" /></a></li>
    <li><a href="photo-8.html">	<img src="photos/petit/8.jpg" /></a></li>
    <li><a href="photo-5.html">	<img src="photos/petit/5.jpg" /></a></li>
    <li><a href="photo-4.html">	<img src="photos/petit/4.jpg" /></a></li>
    <li><a href="photo-3.html">	<img src="photos/petit/3.jpg" /></a></li>
    <li><a href="photo-2.html">	<img src="photos/petit/2.jpg" /></a></li>
    <li><a href="photo-1.html">	<img src="photos/petit/1.jpg"  /></a></li>
   </ul>
  </div> <!-- /id=contenu -->
 </div> <!-- /id=content -->
 <div id="head2">
  <div id="menu">
   <a id="lienmenu" href="plan.htm">Plan</a>
  </div>
 </div>
 <div id="head1">
  <a href="index.htm"><img src="images/logo.jpg" id="logo" /></a>
 </div>
</div><!-- /id=global -->


Et le CSS (j'ai aussi enlevé des définitions sans rapport) :

body {
	margin: 0;/* sans marges, la page sera collée aux bords */
	background-color:#60815B;
	text-align: center; /* pour corriger le bug de centrage IE */
}

#global {
     margin-left: auto;
     margin-right: auto;
     width: 900px; /* largeur obligatoire pour être centré */
	 text-align: left; /* pour corriger le bug de centrage IE */
     }
	 
#head2 {
	position:absolute;
	top:155px;
	background-image: url('images/header2.jpg');
	width: 900px;
	height: 68px;
}
#head1 {
	position:relative;
	top:0px;
	background-image: url('images/header1.jpg');
	width: 900px;
	height: 155px;
}

#content {
	position:absolute;
	top:225px;
	background-color:#F5E687;
	width: 900px;
	border:thin solid black;
}

#contenu {
	float: left;
	margin-left: 5px;
	margin-top: 10px;
}
ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}
ul#galerie_mini li
{	
	float:left;
}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border: 1px solid black ;
}

#logo {
	float: right; 
	margin-right: 2px; 
	margin-top: 34px;
	border: 0;
}

#plan {
	float:right;	
	margin-right: 20px;	
	margin-top: 20px;
	border: thin solid black;
}
#menu {
	float: right; 
	margin-right: 10px;
	margin-top: 12px;
}

ul{margin:10px}


Pour l'instant je m'occupe juste de l'affichage correct des vignettes, je verrai apres pour l'ajout d'un texte sur (ou sous) chaque photo.
Bonjour,

On peut gagner du temps ? Smiley cligne

On fait sa galerie avec un tableau de présentation totalement inoffensif. Et on évite d'essayer les unes après les autres tout un tas de solutions CSS javascript fascinantes, voire pertinentes, régulièrement discutées ici, mais surtout profondément inutiles.
Modifié par Laurent Denis (30 Sep 2006 - 11:21)
Mmm c'est ce que j'avais en tête mais j'aime bien les trucs carrés, alors quelque part ca me dérange d'avoir un site entièrement CSS et la liste des images sous forme de tableaux.
J'ai peur aussi que pour le référencement les données et les liens contenus dans les tabs soient moins interessantes.
Honnêtement, c'est vraiment chaud à faire ce que je veux, où c'est jouable ?
Laurent Denis a écrit :
On peut gagner du temps ? Smiley cligne

On fait sa galerie avec un tableau de présentation totalement inoffensif. Et on évite d'essayer les unes après les autres tout un tas de solutions CSS javascript fascinantes, voire pertinentes, régulièrement discutées ici, mais surtout profondément inutiles.

+1

Écoutez la voix de la sagesse, les enfants. Smiley smile
Bonjour,

je suis également interressée par la question (et donc la réponse) ayant moi aussi quelque chose qui ressemble à une galerie de photo à mettre en place.
La solution table ne me satisfait pas trop car je génère mes pages avec une transformation XSL et la génération de la table ne me semble pas plus simple que la solution CSS. Smiley ohwell

Sinon, pour le fun, nous ne pouvons pas avoir un début de piste Smiley smile ?

Merci.
Bonjour,

Bon de ce qui est ressorti de mes "recherches", si tu as des images de même taille, ou du moins que les blocs contenant les images aient la même taille, ca facilite pas mal (même beaucoup en fait).

Tu peux développer un systeme qui liste les photos et qui enregistre la largeur et la hauteur de chaque photo, pour ensuite en extraire la largeur max et la hauteur max. A partir de la tu dimensionnes tes blocs avec ces valeurs voire un peu plus pour avoir une marge.

Ca c'est l'idée générale... Comme je l'ai dit dans ma présentation je développe en PHP mais les CSS c'est pas ma tasse de thé.

Pour ma part je vais laisser tomber je ferai la page d'affichage de chaque image en CSS mais la page de gallerie avec des tabs, tant pis. A moins que quelqu'un me donne la solution miracle mais j'y ai déja passé trop de temps sans résultats valables.

Bonne chance Gbadji, tiens moi au courant tout de même. Smiley cligne
Pour moi le problème n'est pas tant la taille des images car c'est moi qui les dessine et je peux donc m'imposer un format. Non c'est le texte que je mets après qui, suivant l'humeur, peut être plus ou moins long. Smiley ravi

PHP, je ne connais pas. Je débute en XML, XSL, CSS, j'ai donc bien assez de soucis avec pour ne pas en chercher ailleurs Smiley confused
Merci tout de même pour tes explications, je vais voir si je peux fixer la taille des blocs.

A plus tard pour des nouvelles.
Tu peux trouver des galleries d'images en CSS "toutes faites" mais y'a toujours un truc qui va pas...
Si toutes les images ont la même taille, ca allait. En revanche la taille des textes posait problème aussi...
Si tu as des résultats positifs fais moi signe. Moi je bosserai plus dessus pour un moment, j'ai des trucs plus urgents sur le feu mais j'y reviendrai tôt ou tard Smiley biggrin
ghost a écrit :
http://www.cssplay.co.uk/menu/menu_gallery.html

Bon courage


Moi j'aime bien apprécier les photos sans un pointeur/curseur de souris qui reste trainouiller dessus ^^

<edit>
En fait je trouve ça complètement bidon... Il n'y a aucune maitrise des css là dedans, je faisais mieux au bout de quelques semaines.

C'est de la frime et rien d'autre.
</edit>
Modifié par clb56 (01 Oct 2006 - 23:55)
Bonjour clb56 !

Ben moi je reste bien humble, j'apprends autant de "frimeurs" de ce genre (tiens d'ailleurs je n'ai pas vu quelque part sur leur site de propos disant qu'ils étaient les meilleurs, les plus beaux les plus css-intelligency...) que de grands érudits comme toi...

De plus, j'essaye de garder mes chevilles au frais (de peur qu'elles n'enflent!) en ne jamais qualifier de "bidon" quelque bout de code de quelque plus débutant que moi et encore moins de frimeurs qui , ma foi ont l'air de quand même avoir quelques balises d'avance sur mon petit modeste savoir.

Quand à savoir qui fait pipi le plus loin entre ces braves gens et toi, je m'en moque éperdument, j'ai passé l'âge ! On m'a donné ce lien sur ce forum, il vaut ce qu'il vaut, j'ai la faiblesse de penser que chaque personne intelligente saura se faire sa propre opinion et en tirer partie si tel est son besoin.

Sur ce, bonne soirée
Bonjour Ghost,
Merci pour le lien.
C'est à peu près le genre de trucs que j'avais trouvé, c'est à dire des trucs très graphiques, avec du JS un peu partout...
Mais moi il me faut un truc plus "utilitaire", destiné a afficher des centaines d'images de façon "carrée"...
D'ailleurs dans le source de ton lien j'ai vu pas mal de balises table donc ça facilite pas mal...
Bonjour,

je n'ai pas non plus trouvé de solution, mais merci pour le lien, il y a certainement d'autres choses à explorer.

Pour ce qui est de mon (notre?) problème de "gallerie photo", j'ai appliqué la méthode préconisée dans la FAQ, à savoir mettre des bordures autour des div pour y voir un peu mieux Smiley cligne .

Mais pourquoi donc mon div.gallerie n'encadre-t-il pas les div.vignette qu'il contient?
Y aurait-il là un début de piste? ou est-ce normal, un div ne prenant pas la taille de son contenu?

le fichier html:
http://www.gbadji.net/jdr/jdr00001page1.html

la CSS (avec les bordures en commentaire, c'est plus joli Smiley smile )
http://www.gbadji.net/gcsite.css

A plus tard.

PS: Je sais, il y a beaucoup à revoir dans la CSS, pas la peine de vous arracher les cheveux.
Smiley lol
Bonsoir,


après avoir suivi la piste indiquée dans http://forum.alsacreations.com/topic-4-18592-1-Texte-en-dessous-dune-image-et-alignement-automatique.html indiquée par Vero, j'ai testé la solution des déclarations (Styler une liste de définitions pour en faire une galerie d'images).
Comme le résultat m'a convenu, j'ai regardé pourquoi ça marchait avec dl, dt et dd et pas avec div. J'ai donc reporté les informations une à une en reprenant les div.
- après avoir augmenté ma taille de div.vignette de 2px, j'ai rajouté margin-right:1em et ça marche!! Je ne comprend pas pourquoi, mais pour ma part c'est clos.
Modifié par gbadji (05 Oct 2006 - 22:00)
Chez moi ca réagit bien même si je n'ai pas toutes les images car je fixe la taille (width) de mon div.vignette

Si je ne la fixe pas, le texte fait prendre toute la largeur et il n'y a qu'un élément par ligne. (Rq - je viens d'essayer- on peut fixer la largeur du texte, ça marche aussi).
Pages :
Sujet clos
Aller à