CSS et DIV : Scroll horizontal seulement

[ninox_]

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 .... /> &nbsp; <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 !

[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 html :

1
2
3
4
5
<div class="largfixe">
  <div>
<img src="hg.jpg">&nbsp;<img src="hg.jpg">&nbsp;etc...
  </div>
</div>

Code :

1
2
3
4
5
6
7
div.largfixe { 
	width:800px;
	overflow-x:scroll;
}
div.largfixe div {
	width:4000px;
}

[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?

[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.

[ninox_]

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>

[12monkeys]

Parce que tu dois ajouter à <div id="mainContent"> une largeur fixe comme dans mon code avec un width:800px par exemple.

[ninox_]

Ne fonctionne toujours pas !
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 ?!!!

[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

[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....

[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 ?

[ninox_]

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.

[12monkeys]

Il manque le CSS. Mais maintenant comme tu as ton hébergement tu peux peut être mettre ta page en ligne, non ?

[kéraunos]

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.

[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....

[NoSmoking]

Bonsoir

Code html :

<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...

[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.......

[NoSmoking]

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

[ninox_]

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" />&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 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 !

[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

[NoSmoking]

on peut faire pour la partie STYLE

Code css :

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 html :

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....