CSS et DIV : Scroll horizontal seulement

**12monkeys** · 09/06/2011, 23h39

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.

**ninox_** · 09/06/2011, 23h50

Merci pour ta réponse !
Je vais tester tout ca.

Par contre, je comprends pas trop :

Code :

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

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

**ninox_** · 10/06/2011, 00h44

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.

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 !

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.

Bonne nuit.

**NoSmoking** · 10/06/2011, 10h09

Envoyé par ninox_

Par contre, je comprends pas trop :

Code :

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

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 :

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

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

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

**ninox_** · 10/06/2011, 21h29

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 :

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">
 
		// 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 :

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

)

Invité · 11/06/2011, 00h58

Envoyé par ninox_

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

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

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

**ninox_** · 11/06/2011, 02h03

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.

**ninox_** · 11/06/2011, 11h48

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:

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 ?

**ninox_** · 11/06/2011, 12h13

Résolu.

J'ai rajouté:

Code :

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

1
2
3
#mainContent img {
     Height: inherit;
}

**NoSmoking** · 11/06/2011, 15h04

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

**12monkeys** · 11/06/2011, 16h04

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 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
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">&nbsp;<img alt="clown" src="collection/Serie1/img386.jpg">&nbsp;<img alt="granny" src="collection/Serie1/img405.jpg">&nbsp;<img alt="doggy" src="collection/Serie1/img388.jpg">&nbsp;<img alt="worried-girl" src="collection/Serie1/img413.jpg">&nbsp;<img alt="basket-oldma" src="collection/Serie1/img394.jpg">&nbsp;<img alt="teatime" src="collection/Serie1/img410.jpg">&nbsp;	
	</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 :

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

**NoSmoking** · 11/06/2011, 16h36

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

**ninox_** · 12/06/2011, 10h53

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

(je précise que dans mon code, chaque mysql_connect() s'accompagne après traitement d'un mysql_close()...)

**12monkeys** · 14/06/2011, 16h06

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 ?

CSS et DIV : Scroll horizontal seulement

Défilement en CSS

Discussions similaires

Partager

Partager