CSS et DIV : Scroll horizontal seulement

**ninox_** · 08/06/2011, 22h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**12monkeys** · 08/06/2011, 22h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ninox_** · 08/06/2011, 22h25

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** · 08/06/2011, 22h35

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_** · 08/06/2011, 22h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/06/2011, 22h53

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

**ninox_** · 08/06/2011, 23h00

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** · 08/06/2011, 23h22

Fixe aussi une hauteur à <div id="mainContent">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

hauteur à adapter en fonction de tes images

**ninox_** · 08/06/2011, 23h45

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** · 09/06/2011, 00h00

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_** · 09/06/2011, 00h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 09/06/2011, 08h37

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

Invité · 09/06/2011, 10h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
div#mainContent div {
	width: 4000px;
}

Le #, c'est l'id. Le point, c'est la classe.

**ninox_** · 09/06/2011, 19h53

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** · 09/06/2011, 20h21

Bonsoir

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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_** · 09/06/2011, 20h26

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** · 09/06/2011, 20h51

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

**ninox_** · 09/06/2011, 21h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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_** · 09/06/2011, 21h25

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** · 09/06/2011, 22h31

on peut faire pour la partie STYLE

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ça c'est pas top....

CSS et DIV : Scroll horizontal seulement

Défilement en CSS

Discussions similaires

Partager

Partager