Discussion :

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

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 .... /> &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 :

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_]

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 :

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]

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