overflow

13 septembre 2006 à 20:12:17

bonjour,
je suis en train de creer une galerie photos et j'aimerais utiliser la propriete css overflow:scroll pour faire defiler mes images de droite a gauche mais le probleme c'est qu'elles defilent de haut en bas ce qui est tres peu pratique ...
ya-t-il une solution ?
merci d'avance !

Deeder

13 septembre 2006 à 20:28:51

Il faut les aligner dans un même bloc et non pas revenir à la ligne après chaque image. Un float peut aussi faire l'affaire.

Asphator

13 septembre 2006 à 20:36:14

Salut

Je privilégirais plus un display:inline; sur tes img plutot qu'un float, c'est beaucoup plus simple je trouve.
Maintenant, chacun ses préférences (de toute façon, il faut tester les 2 pour choisir)

Only limits are ours...

getdown

13 septembre 2006 à 21:33:49

euh j'ai essayer l'un et l'autre et ca marche pas ... la barre de defilement est toujours vertical et non horizontale!
voici les portions de code qui pourraient vous interesser :

php :

<?php
if (isset($_GET['album']))
echo '<h2>'.$_GET['album'].'</h2>';
{
if (isset($_GET['image']))
{
$image = $_GET['image'];
$nomimage = preg_replace('`(.+)\..*`', '$1', $image);
}

if (isset ($image))
{
?><div id="photos"><?php
echo ' <h2>'.$nomimage.'</h2>
<p class="center"><img src="galeries/photos/' . $_GET['album'] . '/' . $_GET['image'] . '" alt="'.$nomimage.'" title="'.$nomimage.'" /></p>';
?></div><?php
}

$dir = 'galeries/photos/'.$_GET['album'].'/*.{JPG,JPEG,GIF,PNG,jpg,jpeg,gif,png}';
$files = glob($dir,GLOB_BRACE);

?><div id="miniatures_pel"><?php
foreach($files as $image)
{

$image = preg_replace('`galeries/photos/'.$_GET['album'].'/(.+)`','$1',$image);
$nomimage = preg_replace('`(.+)\..*`', '$1', $image);

echo '<div id="miniatures"><a href="index.php?page=galeries&album='. $_GET['album'] .'&image='.$image.'"><img src="galeries/photos/'. $_GET['album'] .'/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.'" /></a><br />'.$nomimage.'</div>';
}
?></div><?php
}
?>

et voici le css :

#photos img {
max-width : 580px;
height : 440px;
text-align: center;
float: left;
border : 1px solid #5885e1 ;
margin : 0 auto 15px;
}

#photos h2 {
background : none ;
border : none ;
}

#miniatures_pel {
display : block;
overflow : auto;
clear : both;
height : 125px;
}

#miniatures {
float: left;
text-align: center;
}

#miniatures img {
height: 100px;
width : 100px;
padding : 0;
margin : 0 10px;
}

voila j'espere que cela vous aidera un peu plus ...
merci

Asphator

13 septembre 2006 à 21:39:10

Euh, tu as mis display:block; et non display:inline; :euh:

normal?

Only limits are ours...

getdown

14 septembre 2006 à 17:26:50

oui c'est pour que ce soit contenu dans l'element "mere" prcq comme c'est en float sinon ca deborde ...
quelqu'un a une solution a mon probleme ?
merci

getdown

15 septembre 2006 à 20:44:27

aller s'il vous plait un effort ? :euh:

Asphator

16 septembre 2006 à 2:43:18

Non, tu m'as mal compris

Quand je parlais de display:inline;, c'est pour ton img pour qu'elles évite de renvoyer un retour à la ligne!!! (toutes les balises qui se terminent par /> ont en général la propriété de renvoi à la ligne)
Et pour ton miniature_pel, as-tu essayé sans le clear:both;

Only limits are ours...

getdown

16 septembre 2006 à 12:48:44

bah j'esssaye et ca marche toujours pas .... regarde si dans mon code c'est bien ce que tu me disais de faire stp.

#photos {
text-align: center;
height : auto !important;
height : 455px;
margin : 0 ;
padding : 0;
}

#photos img {
max-width : 580px;
height : 440px;
border : 1px solid #5885e1 ;
margin : 0 auto 15px;
}

#photos h2 {
background : none ;
border : none ;
}

#miniatures_pel {
display : block;
clear : both;
height : 125px;
padding : 0;
margin : 0;
overflow : scroll;
}

.miniatures {
float : left;
text-align: center;
padding : 0;
margin : 0;
}

.miniatures img {
height: 100px;
width : 100px;
padding : 0;
display : inline ;
margin : 0 5px;
border : 1px solid #5885e1 ;
}

merci

Asphator

16 septembre 2006 à 14:01:29

Euh, oui, c'est bien cela ... je sèche un peu ...

En attendant, je ne comprend toujours pas l'utilité du display:block;. Tu l'appliques à un div, alors qu'un div est déjà un bloc :euh:

Ah, tu peux également essayer de remplacer le float:left; de miniature par un display:inline; (en fait, je crois que ca vient de là, j'avais pas tilté tout de suite, mais ce miniature est un bloc, et elle ne contient qu'une seule image à chaque fois dans ta boucle. Et cette boucle te recrée un bloc miniature autant de fois que tu as d'images à cause de ton foreach... et donc un retour à la ligne à chaque fois). J'espère que ca vient de là, car après, je ne pourrais plus trop t'aider

Ca devrait donner ca :

#photos {
text-align: center;
height : auto !important;
height : 455px;
margin : 0 ;
padding : 0;
}

#photos img {
max-width : 580px;
height : 440px;
border : 1px solid #5885e1 ;
margin : 0 auto 15px;
}

#photos h2 {
background : none ;
border : none ;
}

#miniatures_pel {
clear : both; //si_necessaire
height : 125px;
padding : 0;
margin : 0;
overflow : scroll;
}

.miniatures {
display: inline;
text-align: center;
padding : 0;
margin : 0;
}

.miniatures img {
height: 100px;
width : 100px;
padding : 0;
display : inline ;
margin : 0 5px;
border : 1px solid #5885e1 ;
}

Oh, et avant que j'oublie, aurais-tu un lien s'il te plait

Only limits are ours...

getdown

16 septembre 2006 à 14:14:53

Coucou,
j'ai essayer ton script mais desole ... c'est encore pire lol.
sinon pour le display:block; c'est parce que sinon le clear:both; ne marche pas, l'un ne va pas sans l'autre.
voici l'adresse de mon site : http://getdown.goldzoneweb.info/

merci a+;

Asphator

16 septembre 2006 à 14:16:44

Edit : euh, je viens de faire un tour sur ton site, et pour moi, tout apparait normalement sous FF et IE...
les images sont les unes après les autres sur la même ligne (mais je n'ai pas le scroll car il n'y en a pas encore assez pour le faire apparaitre...)

Only limits are ours...

getdown

16 septembre 2006 à 14:52:22

ah oui dsl en local j'en ai plus et c la que j'ai le pb
je vai en rajouter pour que tu voi

Asphator

17 septembre 2006 à 3:19:55

Ah oki, je viens de comprendre

Euh, je ne sais pas trop... créer un bloc conteneur, ne pas mettre de width et fixer un height, ainsi aurais-je procédé...
Maintenant, c'est un peu ce tu as fait, non?

quoique, tu n'as pas indiqué de height.

Sinon, j'aurais bien une autre idée (complètement barbare), c'est de calculer le nombre d'images que tu as et d'en déduire le width nécessaire (margin et largeur des img compris) pour le bloc conteneur. Mais c'est beaucoup plus casse-pied.
En même temps si ca ne marche pas non plus, je ne vois pas trop, dsl.

Only limits are ours...

getdown

17 septembre 2006 à 18:22:26

c'est pas grave mais merci beaucoup de m'avir aidé !

overflow

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

overflow

overflow

Supprimer

Modérer

Signaler le message aux modérateurs