CSS et DIV : Scroll horizontal seulement

Version imprimable

Bonjour à tous.

Je me remets un peu au dév. après de longues années sans avoir eu à toucher une ligne de code. C'est pour un petit site perso, et je suis ma foi plutôt content d'avoir fini toute la partie "back-end" MySQL, et les pages et mécanismes PHP pour le requêtage et les liens.

Me reste donc l'ultime étape: la présentation et l'agencement des éléments.

Et là, bah, j'ai jamais été très doué avec CSS, et je lutte pour faire un truc tout bête. ..

Pour résumer, je souhaite faire un site de photo, type portfolio très sommaire, avec un affichage par série de photos, les photos étant à présenter l'une à la suite de l'autre, en scroll horizontal.

J'ai une zone gauche du site qui est fixe et comprenant le menu (leftSidebar). La zone d'affichage du contenu, quant à elle, est désignée par "mainContent".
Code:

1 2 3 4 5 6 7 8 9 <div id="contentWrapper"> <div id="leftSidebar" class="medium"> ICI LE MENU ... </div> <div id="mainContent"> ICI MES PHOTOS ET CONTENU ... </div> </div>
Config CSS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #contentWrapper{ position:relative; top:30px; left:50px; } #leftSidebar { position:fixed; width:200px; } #mainContent { position:absolute; left: 250px; top:60px; }
Problème: la restitution me donne les photos les unes en dessous des autres (en vertical), au lieu de présenter à la queuleuleu comme je veux. Un problème de paramètre de zone ou de taille fixée, je suppose... Mais quoi ?

Alors sur le net, j'ai trouvé des trucs overflow-y: none, ce genre de choses, mais ca n'y fait rien. J'ai mes photos qui s'empilent, malgré le fait que le code php interprété me donne bien un source à la volée: <img .... />   <img .... /> , etc.

En gros, je veux pour mes photos, quelqu'en soit le nombre, qu'elles s'enchainement à l'horizontal, et que le scroll de la zone de contenu s'adapte, point barre. Que ce soit fixe à la verticale.

Merci d'avance pour vos idées !

08/06/2011, 22h20
12monkeys
Bonsoir

Alors il faut utiliser un conteneur avec une largeur fixe et avec la propriété overflow-x:scroll. Dans ce conteneur en mettre un autre avec une largeur nettement plus élevée.
Code:

1 2 3 4 5 <div class="largfixe"> <div> <img src="hg.jpg"> <img src="hg.jpg"> etc... </div> </div>
Code:

1 2 3 4 5 6 7 div.largfixe { width:800px; overflow-x:scroll; } div.largfixe div { width:4000px; }
08/06/2011, 22h25
ninox_

bonsoir.

Je vais tester ca. C'est "standard" comme solution ?

Sinon, n'est-il pas possible d'adapter tes paramètres à mes divs déjà existants?
08/06/2011, 22h35
12monkeys

Standard je sais pas, mais il n'y a rien de très exotique. Bien sur faudra tester sur les vieux navigateurs et en particulier IE6 (je sais plus s'il supporte overflow-x ? sinon utilises overflow tout court).

Bien sur que tu peux adapter à ce que tu as déjà. Je te montre juste un exemple fonctionnel, à toi d'adapter. Tu peux garder <div id="mainContent"> mais faudra juste y rajouter une div en dessous.

Mmmh, en fait je suis un peu chiant et tatillon pour demander un peu la réponse "toute prête", parce que je ne maîtrise pas les bases mêmes des mécanismes et syntaxes du CSS.

Promis, je vais m'y pencher prochainement en reprenant mes bouquins. Mais dans l'immédiat je voulais avoir le résultat que je souhaite...

Donc j'ai essayé d'adapter ce que tu m'as dit, mais ca ne donne pas grand chose :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #contentWrapper{ position:relative; top:30px; left:50px; } #leftSidebar { position:fixed; width:200px; } #mainContent { position:absolute; left: 250px; top:60px; overflow-x: scroll; } div.mainContent div { width: 4000px; }
Code:

1 2 3 4 5 6 7 8 9 10 <div id="contentWrapper"> <div id="leftSidebar" class="medium"> ICI LE MENU ... </div> <div id="mainContent"> <div>ICI MES PHOTOS ET CONTENU ... </div> </div> </div>

08/06/2011, 22h53
12monkeys

Parce que tu dois ajouter à <div id="mainContent"> une largeur fixe comme dans mon code avec un width:800px par exemple.
08/06/2011, 23h00
ninox_

Ne fonctionne toujours pas ! :calim2:
Les photos sont l'une en dessous de l'autre, au lieu de défiler à l'horizontale.
C'est incroyable ça non...?!

Pour info, les photos sont de dimension 800x500px à + ou - 1% près (ce sont des scans de négatifs, pas toujours réguliers donc, 804, 812, 799...).

Qu'est ce qui bloque donc pour que ces photos ne veuillent pas se conformer au rendu "normal" tel que je cherche à le définir ?!!!
08/06/2011, 23h22
12monkeys
Fixe aussi une hauteur à <div id="mainContent">
Code:

1 2 3 4 5 div.largfixe { width:800px; height:800px; overflow-x:scroll; }
hauteur à adapter en fonction de tes images
08/06/2011, 23h45
ninox_

Je pense pas qu'on soit dans la bonne direction là ...

Ca ne change toujours rien. Je pige pas.

J'aurais bien aimé vous laisser un url mais je bosse encore en localhost actuellement, en attendant que Free veuille bien m'activer mon accès phpMyAdmin pour MySQL....
09/06/2011, 00h00
12monkeys

Tu testes sur quel navigateur ? Parce que j'ai essayé avec Firefox 4 et ça a très bien marché. Peux tu nous reposter l'ensemble de ton code HTML et CSS ?

Je suis sous Firefox 3.5.

OK voici le code Home.php complet, après interprétation.

Et je vous fais une screenshot tout de suite, pour vous montrer ce que ca donne !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
<link rel="stylesheet" type="text/css" href="default.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body bgcolor="#FFFFFF">
 
<div id="contentWrapper">
 
 
 
	<div id="leftSidebar" class="medium">
 
	<font class="bodyTitle">OPB Photography</font>
 
	<p>
 
	<br>PORTFOLIO
	<br><font size="-2">//////////////////////////////////</font>
 
	<br><A HREF="Home.php?page=1">Sortie dominicale</A><br><A HREF="Home.php?page=2">My blue nights</A><br><A HREF="Home.php?page=3">La troisième, ter </A>	
 
	<p>
	<br>About
	<br>Contact
	</div>
 
	<div id="mainContent">
 
	<div>
	<img src="collection/Serie1/img1.jpg" width="55%" height="55%" alt="The road on" />&nbsp;<img src="collection/Serie1/img386.jpg" width="55%" height="55%" alt="clownesque" />&nbsp;<img src="collection/Serie1/img388.jpg" width="55%" height="55%" alt="doggy" />&nbsp;<img src="collection/Serie1/img410.jpg" width="55%" height="55%" alt="mint" />&nbsp;	</div>
	</div>
 
</div>
 
</body>
</html>

Et voici :

http://n1n0x.free.fr/Image1.png

Donc, pourquoi les photos sont l'une sous l'autre ? c'est incompréhensible .... Je veux du horizontal, avec scroll. Point barre.

09/06/2011, 08h37
12monkeys

Il manque le CSS. Mais maintenant comme tu as ton hébergement tu peux peut être mettre ta page en ligne, non ?
09/06/2011, 10h00
Invité
L'erreur est pourtant simple. ^^

div.mainContent div désigne une div incluse dans une div de la classe mainContent. Or ici tu as une div contenante portant l'id mainContent, ce qui est différent. Il faut donc écrire ceci:
Code:

1 2 3 4 div#mainContent div { width: 4000px; }
Le #, c'est l'id. Le point, c'est la classe.
09/06/2011, 19h53
ninox_

Messieurs,

je regrette mais le résultat escompté n'est tjs pas au rdv!
En corrigeant effectivement le div#mainContent div, j'obtiens le paramtre width=4000px qui s'applique aux images elles-mêmes, et donc, elles sont étirées, au lieu que ce soit le "conteneur" (le div) englobant mes <img/> qui s'étendre horizontalement avec un scroll...

Arf!

P.S: Je n'ai tjs pas pu mettre mon site en ligne car Free n'a pas encore activé phpMyAdmin et mon compte MySQL. Ca fait pourtant maintenant 4j que j'en ai fait la demande d'activation....
09/06/2011, 20h21
NoSmoking

Bonsoir

Code:

<img src="collection/Serie1/img1.jpg" width="55%" height="55%" alt="The road on" />

chaque image faisant 55% de la largeur du conteneur il n'est pas surprenant qu'elles passent à la ligne...
09/06/2011, 20h26
ninox_

Mais encore ? Tu peux être plus précis?

En quoi le fait de diminuer leur ratio peut être problématique ?

En fait, je n'ai guère le choix: comme déjà dit, mes photos "brut" sont des scanns de négatif, qui sont en format 800x500 (env.); hors, je ne les veux pas aussi grandes en affichage web. J'ai fait quelques tests en pourcentage, et à 55% ca me parait pas mal.

Donc il faut quoiqu'il arrive que je garde ce paramètre. Sinon, ca voudrait dire qu'il faudrait que je re-sauvegarde et re-dimensionne toutes mes photos directement à une taille inférieure, et cette perspective ne m'enchante guère (on parle d'une centaine de photos...).

Merci de me tuyauter à ce sujet ! Je suis perdu avec CSS.......
09/06/2011, 20h51
NoSmoking

mets leur une width:440px; pour voir...

Oui j'avais essayé ca en premier lieu, mais ca coupe (rogne) la photo par un cadre de la dimension indiquée. Ca redimensionne pas.

Bon, je crois que je vais laisser tomber cette mise en page à la noix.

Est-ce que vous pouvez m'indiquer simplement (corriger) les bons paramètres à configurer (notamment width, top, left, et position) des ID suivants:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 #contentWrapper{ position:relative; top:30px; left:50px; } #leftSidebar { position:fixed; width:200px; } #mainContent { position:fixed; width:800px; left: 250px; top:60px; } #rightSidebar { position:fixed; width:200px; right: 100px; top: 60px; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <div id="contentWrapper"> <div id="leftSidebar" class="medium"> <font class="bodyTitle">OPB Photography</font> <p> <br>PORTFOLIO <br><font size="-2">//////////////////////////////////</font> <br><A HREF="Home.php?page=1">Sortie dominicale</A><br><A HREF="Home.php?page=2">My blue nights</A><br><A HREF="Home.php?page=3">La troisième, ter </A> <br>About <br>Contact </div> <div id="mainContent"> <img src="collection/Serie1/img1.jpg" width="55%" height="55%" alt="The road on" /> <img src="collection/Serie1/img386.jpg" width="55%" height="55%" alt="clownesque" /> <img src="collection/Serie1/img388.jpg" width="55%" height="55%" alt="doggy" /> <img src="collection/Serie1/img410.jpg" width="55%" height="55%" alt="mint" />  </div> <div id="rightSidebar"> Some comment here, Lorem ipsum dolor. Bla bla bla, je suis dans mon couloir droit et je n'en bougerai pas!!!! </div> </div>
... pour obtenir un couloir de gauche FIXE à 200px de largeur, une zone centrale FIXE à une zone en largeur d'affichage fixe donnée (admettons, 600px), et un autre couloir de droite FIXE à 200px de largeur aussi.

Quand je dis FIXE, je voudrais que quoiqu'en soit l'action de l'utilisateur sur sa fenêtre (agrandissement / réduction de la taille de la page, etc), les proportions soient gardées et que les contenus respectifs ne viennent pas se chevaucher/superposer.

Parce que là ca part en gadou bien gaiement....

MERCI énormément pour votre aide. En espérant pouvoir vous faire profiter du résultat rapidement ! :)

09/06/2011, 21h25
ninox_

En résumé, voici ce que je veux:

http://n1n0x.free.fr/Image3.png // sauf, sans l'inexplicable scroll horizontal inutile car le contenu ne "déborde" pas.

Et voilà ce que je veux aussi éviter si je réduis la fenêtre:

http://n1n0x.free.fr/Image4.png

on peut faire pour la partie STYLE

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#contentWrapper{
  position:relative;
  top:30px;
/*  left:50px;/* OUT */
  min-width:1200px; /* AJOUT = 200 +800 +200 */
}
#leftSidebar {
/*  position:fixed;/* OUT */
  width:200px;
  float:left; /* AJOUT */
}
#rightSidebar {
/*  position:fixed;/* OUT */
  float:left; /* AJOUT */
  width:200px;
/*  right: 100px;/* OUT */
  top:60px;
}
#mainContent {
/*  position:fixed;/* OUT */
  float:left; /* AJOUT */
  width:800px;
/*  left: 250px;/* OUT */
  top:60px;
  overflow-x : auto; /* AJOUT */
}
/* pour les IMAGES */
#maincontent div {
  width : 1760px; /* nb image * 440px */
}
#maincontent img {
  width :440px;
}

avec comme html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="contentWrapper">
  <div id="leftSidebar" class="medium">
    <font class="bodyTitle">OPB Photography</font>
    <p>
    <br>PORTFOLIO
    <br><font size="-2">//////////////////////////////////</font>
    <br><A HREF="Home.php?page=1">Sortie dominicale</A><br><A HREF="Home.php?page=2">My blue nights</A><br><A HREF="Home.php?page=3">La troisième, ter </A>
    <br>About
    <br>Contact
  </div>
 
  <div id="mainContent">
    <div>
      <img src="collection/Serie1/img1.jpg" alt="The road on" /><img src="collection/Serie1/img386.jpg" alt="clownesque" /><img src="collection/Serie1/img388.jpg" alt="doggy" /><img src="collection/Serie1/img410.jpg" alt="mint" />
    </div>
  </div>
 
  <div id="rightSidebar">
    Some comment here, Lorem ipsum dolor. Bla bla bla, je suis dans mon couloir droit et je n'en bougerai pas!!!!
  </div>
</div>

pour détail

Code:

<font class="bodyTitle">OPB Photography</font>

ça c'est pas top....

09/06/2011, 22h39
12monkeys

D'abord désolé pour l'erreur de class et id j'avais pas fait attention.

Ensuite quelques remarques.

Déjà tu as un espace disponible chez free : alors utilises le ! Tu n'as pas besoin de mysql pour afficher ce site. Tu n'as qu'à copier le code HTML et CSS dans un fichier .html et tu l'envoi sur le serveur avec les images. Qu'on puisse enfin tester en direct, notamment avec les photos.
Parce que "ça ne marche pas" c'est franchement pas constructif comme remarques.

Ensuite nonobstant le fait que le redimensionnement d'image fonctionne ou pas avec HTML ou CSS, le fait que tu affiches des images de 800*600 dans une taille inférieure à leur taille réelle est une aberration. Ces images ont un poids supérieur a ce qu'elles auraient une fois réduites et cela accélérerait l'affichage de la page. Là l'utilisateur télécharge grosso modo 40% du poids de tes images pour rien du tout, c'est de la bande passante perdue.
Et il n'est pas nécessaire pour ça de redimensionner les images à la main, il existe des outils pour ça : http://web.developpez.com/telecharge...id/1267/XnView que j'utilise très souvent, il peut te réduire la taille de tes images en rafale (toutes tes images d'un coup, en un clic).

Ce que veux dire NoSmoking c'est qu'en utilisant width et height dans une balise HTML ou en CSS, cela redimensionne l'image en fonction du conteneur dans lequel se trouve l'image et non en fonction de la taille de l'image. Ici ton conteneur fait 4000px, mettre un width de 55% fait que ton image aura une taille de 2000px environ.

Par contre mettre une taille en pixels redimensionne l'image à la taille demandée, ce n'est pas possible que ton image soit rognée !

Il n'est pas nécessaire d'abandonner ta mise en page, mets cette page enfin en ligne qu'on puisse réellement voir, comme dit pas nécessaire d'avoir mysql pour ça.
09/06/2011, 22h50
ninox_
Merci pour ta réponse !
Je vais tester tout ca.

Par contre, je comprends pas trop :
Code:

1 2 3 4 5 6 #maincontent div { width : 1760px; /* nb image * 440px */ } #maincontent img { width :440px; }
Est-il vraiment nécessaire de préciser ces deux width? C'est un peu embêtant puisque ce sont des valeurs aléatoires, et je charge le contenu des séries en dynamique (php tapant une base MySQL), peu importe le nombre de photos composant la série, mon code doit être automatisé et standard...
09/06/2011, 23h44
ninox_

Citation:

Envoyé par 12monkeys

D'abord désolé pour l'erreur de class et id j'avais pas fait attention.

Ensuite quelques remarques.

Déjà tu as un espace disponible chez free : alors utilises le ! Tu n'as pas besoin de mysql pour afficher ce site. Tu n'as qu'à copier le code HTML et CSS dans un fichier .html et tu l'envoi sur le serveur avec les images. Qu'on puisse enfin tester en direct, notamment avec les photos.
Parce que "ça ne marche pas" c'est franchement pas constructif comme remarques.

Je suis d'accord avec toi, mais j'en suis encore au stade de maquette, et c'est bien pour ça que je vous mets des screenshots pour vous montrer réellement l'affichage rendu....
Je préfère attendre l'ouverture de phpMyAdmin pour tout balancer d'un coup, et travailler en mode online par la suite.

Citation:

Envoyé par 12monkeys

Ensuite nonobstant le fait que le redimensionnement d'image fonctionne ou pas avec HTML ou CSS, le fait que tu affiches des images de 800*600 dans une taille inférieure à leur taille réelle est une aberration. Ces images ont un poids supérieur a ce qu'elles auraient une fois réduites et cela accélérerait l'affichage de la page. Là l'utilisateur télécharge grosso modo 40% du poids de tes images pour rien du tout, c'est de la bande passante perdue.

Je suis là encore d'accord avec toi, mais j'ai d'autres usages de ces images, et en ai donc la nécessité dans une taille plus grande, que celle en 55% sur le site.

Et puis, à l'heure de nos connexions haut débit, est-ce qu'on va vraiment croire à une lenteur ou "bande passante perdue" ? Mes images originales ne font pas plus de 200Ko.... Faut pas pousser non plus quoi ! :mrgreen:

Pour le logiciel, merci, mais dommage qu'il n'y ait pas de version pour mac.

A +

P.S: Je vais arrêter de vous emmerder, et replonger dans le bouquin que j'ai sur CSS, quitte à revenir plus tard ici avec des questions plus précises. Parce que là, en reprenant vos codes, y a à chaque fois un truc qui merde.

Merci beaucoup en tous les cas pour votre aide et recommandations. Je garde précieusement.

Note pour moi-même :

TUTORIEL pour newbie, les bonnes bases de mise en page :

http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Ce site est génial, je le redécouvre avec plaisir. :mouarf:

Bonne nuit.
10/06/2011, 09h09
NoSmoking
Citation:
Envoyé par ninox_

Par contre, je comprends pas trop :

Code:

1 2 3 4 5 6 #maincontent div { width : 1760px; /* nb image * 440px */ } #maincontent img { width :440px; }

Est-il vraiment nécessaire de préciser ces deux width? C'est un peu embêtant puisque ce sont des valeurs aléatoires, et je charge le contenu des séries en dynamique (php tapant une base MySQL), peu importe le nombre de photos composant la série, mon code doit être automatisé et standard...
si tu ne connais pas le nombre de photo au départ alors essaies de mettre cela dans le STYLE
Code:

1 2 3 4 #maincontent div { /* width : 1760px; /* nb image * 440px */ white-space : nowrap;/**/ }
mais concernant les images, il est effectivement préférable de charger le nécessaire et pas plus, et ce quelque soit la bande passante, qui plus est tu n'aurais dans ce cas pas à te soucier de la width à mettre

Citation:

Pour le logiciel, merci, mais dommage qu'il n'y ait pas de version pour mac.

même sous MAC je doute que les logiciels de photo ne possèdent pas une fonction de redimensionnement en rafale

Bonjour.

J'ai enfin pu mettre mon site en ligne.

http://n1n0x.free.fr/Home.php

Si vous êtes curieux, n'hésitez pas à visiter et me rapporter l'affichage qu'il en est fait sur votre écran.

Pour ma part, je suis sur un Macbook 15", Firefox 3.5, et en fenêtre flottante (pas full screen). Ca fonctionne très bien.

Le site est "vide" pour le moment, c'est juste pour vos premiers retours d'un point de vue "design" (très épuré, je conçois, mais c'était le but).

P.S: Voici la config que j'ai appliquée PHP+CSS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div id="contentWrapper"> <div id="leftSidebar" class="medium"> // Ici mon menu </div> <div id="mainContent"> <div id="rightSidebar" align="justify"> // Ici mon texte décrivant la série, ou le contenu affiché dans la zone centrale. </div> </div> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 #contentWrapper{ position:relative; top:30px; left:50px; } #leftSidebar { position:absolute; width:200px; } #mainContent { position:absolute; width:800px; left: 250px; top:60px; } #rightSidebar { position:absolute; width:200px; right: 100px; }
Voilou, en espérant que ca puisse en sortir d'autres de galères (c'est quand même la merde, le CSS.... :aie:)

Citation:

Envoyé par ninox_

c'est quand même la merde, le CSS

Je ne suis pas d'accord et je le prouve.;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<style>
		html, body {
			margin: 30px 0px 0px;
			padding: 0px;
		}
		#left {
			position: fixed;
			padding-left: 50px;
			width: 300px;
			height:  100%;
			background: #fff;
			border: 1px solid #000;
		}
		#photos {
			margin-left: 350px;
		}
	</style>
</head> 
 
<body>
 
	<div id="content">
 
		<div id="left">
			<p>&lt;div&gt; #left
			<p>Menu</p>
			<p>Menu</p>
			<p>Menu</p>
		</div>
 
		<div id="photos">
			&lt;div&gt; #photos
			<table><tr>
				<td><img src="http://blog.zenmail.biz/wordpress/wp-content/Fichier/2010/09/code_html_binary1.jpg" alt="_" /></td>
				<td><img src="http://blog.zenmail.biz/wordpress/wp-content/Fichier/2010/09/code_html_binary1.jpg" alt="_" /></td>
				<td><img src="http://blog.zenmail.biz/wordpress/wp-content/Fichier/2010/09/code_html_binary1.jpg" alt="_" /></td>
				<td><img src="http://blog.zenmail.biz/wordpress/wp-content/Fichier/2010/09/code_html_binary1.jpg" alt="_" /></td>
				<td><img src="http://blog.zenmail.biz/wordpress/wp-content/Fichier/2010/09/code_html_binary1.jpg" alt="_" /></td>
				<td><img src="http://blog.zenmail.biz/wordpress/wp-content/Fichier/2010/09/code_html_binary1.jpg" alt="_" /></td>
			</tr></table>
		</div>
	</div>
 
</body>
</html>

Essaie ce code.
Sur la gauche : un menu fixe.
A la droite de ce menu: les photos générées en PHP dans un tableau (ce qui, normalement, ne devrait poser aucun problème et évite d'avoir à récupérer le nombre de photos à afficher, chose qui normalement n'est pas un problème non plus en PHP-mySQL).

11/06/2011, 01h03
ninox_

Tu peux me dire comment s'affiche mes premières pages chez toi plutôt ?

Chez moi Firefox 3.5 sous Mac c'est nickel. Mais on m'a déjà dit que sous Safari c'était pas bon.

IE ? Chrome ? Autres... ?

Bref, n'hésitez pas à tester me montrer au mieux des screenshots :

http://n1n0x.free.fr/Home.php?page=1
http://n1n0x.free.fr/Home.php?page=2

Les photos sont-elles dans les bonnes proportions, bien alignées, etc ? Scroll vertical ok jusqu'au bout des séries ?

Thanks.
11/06/2011, 10h48
ninox_

Pb d'affichage browser (étirement d'image)

Bonjour.

J'ai eu des retours d'internautes, m'indiquant que sous IE et sous Firefox c'était bon.

Par contre, Chrome et Safari donnent un résultat inapproprié: les images sont étirées dans leur dimension Hauteur. Cf screenshot:

http://img41.imageshack.us/img41/3417/image2er.png

D'où provient ce comportement? Comment y remédier sans tout casser et remettre à mal le résultat OK sur les autres navigateurs?

Merci.

EDIT >>>

Je viens de comprendre que, sous Safari (et je pense idem pour Chrome), la taille en Hauteur de mes images s'adaptaient (étirement, rétrécissement) en fonction de la taille de ma fenêtre. La Largeur ne bouge pas, quant à elle.

Surprenant. Qu'est-ce qui m'échappe ?
11/06/2011, 11h13
ninox_
Résolu.

J'ai rajouté:
Code:

1 2 3 #mainContent img { Height: inherit; }
11/06/2011, 14h04
NoSmoking

:oops: je dois admettre que je n'avais rien compris, je pensais que tu voulais toutes les photos sur la même ligne avec un scroll horizontal ...:whistle:

Si si NoSmoking tu avais bien compris, mais ninox_ a changé d'avis entre temps.

D'ailleurs si je puis me permettre, ces revirements avant que tu nous donnes les moyens de t'aider correctement rendent cette discussion pour le moins brouillon !!

Maintenant qu'on voit (enfin) ta page on peut constater que tu ne mets pas en place les solutions qu'on te propose : notamment celle de NoSmoking ici : http://www.developpez.net/forums/d10...l/#post6047747.

Ton positionnement est aberrant, à utiliser que du positionnement absolu ça va te jouer des tours, et ça te joue des tours : tu as un scroll horizontal parce que tu déplaces le 1er div avec la propriété left. Utilises plutôt les marges pour ça.

Et je suis désolé mais avec mon code j'ai réussi tout de suite à modifier ta page pour obtenir ce que tu voulais au départ c'est à dire un scroll horizontal pour les images.

Voici le code modifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <div id="contentWrapper"> <div id="leftSidebar" class="medium"> <h1 class="bodyTitle">OPB Photography</h1> <p> PORTFOLIO </p> <p> <font size="-2">//////////////////////////////////</font> </p> <ul> <li> <a href="Home.php?page=1">Sortie dominicale</a> </li> <li> <a href="Home.php?page=2">Printemps, supsend ton temps</a> </li> <li> <a href="Home.php?page=3">Serie 3</a> </li> </ul> <p> About </p> <p> Contact </p> </div> <div id="mainContent"> <div> <img alt="drivin'" src="collection/Serie1/img402.jpg"> <img alt="clown" src="collection/Serie1/img386.jpg"> <img alt="granny" src="collection/Serie1/img405.jpg"> <img alt="doggy" src="collection/Serie1/img388.jpg"> <img alt="worried-girl" src="collection/Serie1/img413.jpg"> <img alt="basket-oldma" src="collection/Serie1/img394.jpg"> <img alt="teatime" src="collection/Serie1/img410.jpg">  </div> </div> <div align="justify" id="rightSidebar"> <b>Sortie dominicale.</b><br>Early wake up on Sunday. Wet and cold Sunday. What gets me out there? Life awakes slowly down the streets, little by little. Passing strangers. Walking the dog out, going to the food market. Grandmas are out. Loneliness. Moody Sunday. I don't like you very much, Sunday. And time slips, full of spleen, the sun as a faithful clock. Tomorrow will be another day, tomorrow will be Monday. </div> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 #contentWrapper { margin: 30px 0 0 50px; width: 1300px; } #mainContent div { width: 10000px; } #leftSidebar { float: left; width: 200px; } #leftSidebar p { margin: 5px 0; } #leftSidebar ul { list-style-type: none; padding: 0 0 0 15px; } #mainContent { float: left; overflow-x: scroll; width: 800px; } #mainContent img { height: inherit; } #rightSidebar { float: left; margin: 0 0 0 30px; width: 200px; } #smallContent { text-align: justify; width: 55%; }
Et pour tes images oui cela va prendre du temps pour les afficher. Personnellement j'affiches des images en 800*600 et je fais attention que leur taille ne dépasse les 30 à 40 ko. Donc 200 à mon sens c'est trop...

Xnview existe aussi pour Mac : http://www.xnview.com/fr/download.html ;)

11/06/2011, 15h36
NoSmoking

Citation:

Envoyé par 12monkeys

Si si NoSmoking tu avais bien compris, mais ninox_ a changé d'avis entre temps.

merci ! cela me rassure sur mon état neuronal
12/06/2011, 09h53
ninox_

J'ai changé effectivement d'idée en cours de route. Aurais-je dû ouvrir un nouveau topic? Après on m'aurait fait la remarque d'être envahissant, etc.

Bref, les solutions qui ont été proposées ici doivent certainement fonctionner dans un cas générique, mais n'ont pas été concluantes dans mon cas spécifiques.
J'ignore si c'est à cause du fameux affichage des <img> en width et height 55%, mais aucune de vos solutions ne m'a donné un affichage propre et nickel.

J'ai quand même dit merci, et ce n'est pas du temps de perdu puisque ça servira sans doute à d'autres visiteurs du forum.

Mon code n'est pas parfait, mais j'y reviendrai dessus plus tard, pour l'améliorer.
Et pour le placement de div en float, j'ai lu ça dans "CSS The missing manual". Donc je passe pas non plus que ce soit des conneries quand même...

A +

P.S/ Mon site n'est plus accessible. Trop d'accès MySQL, plantage. Depuis hier, la base est plantée, Erreur 1040. Je pensais que Free avait un script automatique qui purge les accès chaque nuit, ou un truc du genre...
Génial. Je fais quoi maintenant ?! :calim2: (je précise que dans mon code, chaque mysql_connect() s'accompagne après traitement d'un mysql_close()...)
14/06/2011, 15h06
12monkeys

Non pas de création de nouvelle discussion pour ça. Rien ne t'a été reproché. Je trouvais juste frustrant de n'avoir aucune base pour travailler, alors que tu disait que ça ne fonctionnait pas. Personnellement j'aurais bien aimé voir de visu ce qui ne fonctionnait pas, histoire de pouvoir éventuellement te proposer une solution.

De plus nous avons été 3 à te donner un code "presque" tout fait, mais je ne vois pas que tu ais appliqué nos remarques, notamment sur ta manière de positionner les éléments...

Maintenant qu'on voit, on peut peut être avancer plus clairement ? Qu'en dit tu ?