Positionner des div en float

Version imprimable

Voir 40 message(s) de cette discussion en une page

13/08/2013, 12h34
twisel

Positionner des div en float
bonjour,

j'ai un petit souci de positionnement de div dans un footer...

quand elles sont en float: right, aucun souci ça se positionne où je le souhaite, en bas à droite. en revanche, elles sont dans l'ordre inverse de ce que je voudrais (lecture de droite à gauche au lieu de gauche à droite)

si je les mets en float: left, l'ordre est bon, mais impossible de les placer correctement...

voici le lien vers un exemple: http://paul-le-quernec.fr/projets/pr...6&sortBy=annee

(il s'agit des rectangles gris en bas à droite)

voici le CSS:
Code:

1 2 3 4 5 6 7 8 9 .vignette_grise { background-color:#808080; width: 4%; height: 40%; float: right; margin-right: 5px; margin-top: 15px; cursor: pointer; }
merci d'avance pour votre aide!
13/08/2013, 12h51
Invité

Bonjour,
les images ne sont pas du tout optimisées (577,03 Ko !!).
Elles mettent 3 ans à s'afficher (chacune !) :mouarf:

Pour ton problème... quel problème ? :aie:
Toutes les cases sont grises !
Comment savoir quel résultat tu souhaites obtenir ? (dans quel ordre sont-elles censées s'afficher ?)
13/08/2013, 12h53
rodolphebrd

Bonjour,

pourquoi ne pas utiliser la propriété display:inline-block; pour .vignette_grise
Puis, dans le code HTML, placer la classe .infos après .vignette_grise pour plus de logique.
13/08/2013, 12h56
rodolphebrd

Citation:

Envoyé par jreaux62

Comment savoir quel résultat tu souhaites obtenir ? (dans quel ordre sont-elles censées s'afficher ?)

Citation:

Envoyé par twisel

quand elles sont en float: right, aucun souci ça se positionne où je le souhaite...
si je les mets en float: left, l'ordre est bon, mais impossible de les placer correctement...

:aie:
13/08/2013, 13h25
Candygirl

Hello,

Une manière simple de contourner ton problème d'ordre d'affichage est d'attribuer un float right à un conteneur de tes vignettes puis un float left aux vignettes elles-mêmes.
13/08/2013, 14h11
Invité

@Rodolphe
Sais-tu dire si sur la page, les photos sont dans "le bon ordre" ou l'"ordre inverse" ?
Moi, pas. :aie:
13/08/2013, 14h14
rodolphebrd

En testant avec ta console et en jouant avec le flottement à droite puis à gauche tu y parviens.
Mais le cœur du problème n'est pas là.;)
13/08/2013, 16h09
twisel

merci pour vos réponses!

Citation:

Envoyé par jreaux62

Bonjour,
les images ne sont pas du tout optimisées (577,03 Ko !!).
Elles mettent 3 ans à s'afficher (chacune !) :mouarf:

oui oui, je sais qu'elles sont grosses, mais bon, l'adsl est assez répandu de nos jours! :)
elles ont une résolution correcte pour un grand écran type 27"...

Citation:

Envoyé par jreaux62

Pour ton problème... quel problème ? :aie:
Toutes les cases sont grises !
Comment savoir quel résultat tu souhaites obtenir ? (dans quel ordre sont-elles censées s'afficher ?)

si tu passes la souris sur les vignettes, actuellement le bon ordre des images est de droite à gauche.

Citation:

Envoyé par Candygirl

Hello,

Une manière simple de contourner ton problème d'ordre d'affichage est d'attribuer un float right à un conteneur de tes vignettes puis un float left aux vignettes elles-mêmes.

déjà essayé (rapidement), ça n'a pas fonctionné comme je voulais...
(des histoires de width en % qui foutent un peu le bazar si je mets les vignettes dans une div...)

Citation:

Envoyé par rodolphebrd

Bonjour,

pourquoi ne pas utiliser la propriété display:inline-block; pour .vignette_grise
Puis, dans le code HTML, placer la classe .infos après .vignette_grise pour plus de logique.

ça ne change pas vraiment le problème...

:cry:
13/08/2013, 16h43
Invité
Une solution (encore plus simple que celle de Candygirl) :
- d'inverser l'ordre d'écriture des <span class="vignette_grise"> dans le code HTML : du dernier au premier ;
- en gardant ton CSS tel quel.
Citation:

"Les derniers seront les premiers..."

Quant à la résolution des images...
Je suppose que je site n'est destiné qu'à des professionnels, bien équipés (VDSL + très grand écran).

Sinon, pour le commun des mortels (dont je fais partie, comme 95% des internautes), mon écran fait 1920px de large. Taille déjà raisonnable.
(j'exagérais, bien sûr en parlant de "3 ans". Mais déjà entre 1/2 et 2 secondes par image, c'est trop)
Je n'ose pas tester sur mon smartphone : j'ai peur qu'il explose !

Une solution serait de tester la résolution de l'écran du client (CSS media queries et/ou JavaScript), et de lui proposer (automatiquement) une résolution d'image adaptée.

Penser aussi au préchargement.
13/08/2013, 16h52
twisel

les images font 2000px de large, à peine plus que la résolution moyenne de n'importe quel portable.

je ne sais pas ce que tu as comme connexion, chez moi perso, sur un macbook et avec une vulgaire freebox v5 en wifi, ça s'affiche en quelques dixièmes de secondes! (en ayant vidé le cache évidemment)

sur le smartphone en 3G, là en effet, c'est plus long...

concernant l'ordre des vignettes, c'est un script (un ami me l'a fait), du coup, j'ose pas trop y toucher.

sinon, j'ai réessayé le coup de mettre les vignettes dans une div, comme le suggérait candygirl.
ça marche à peu près, même si je n'ai pas exactement le résultat que je voulais au départ... (les vignettes ont une taille fixe alors qu'avant elle s'adaptait à la taille de la fenêtre)

merci encore en tout cas!

le résultat:
http://paul-le-quernec.fr/projets/pr...6&sortBy=annee
13/08/2013, 16h56
Invité

Problème quand on réduit la taille de la fenêtre...
Les cases grises passent sur 2 lignes.

N.B. On peut voir le bout de code ?

A voir aussi => imageoptimizer (-20% à -30%, sans trop perdre en qualité)

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
	<?php
		$imgdir = $dossierImg . "/"; 
                $allowed_types = array('png','jpg','jpeg','gif'); 
		$dimg = opendir($imgdir);//Open directory
		while($imgfile = readdir($dimg))
		{
		  if( in_array(strtolower(substr($imgfile,-3)),$allowed_types) OR
			  in_array(strtolower(substr($imgfile,-4)),$allowed_types) )
		  {$a_img[] = $imgfile;}
		}
 
		 $totimg = count($a_img);
		 for($x=0; $x < $totimg; $x++){echo "<span class='vignette_grise'><input type='hidden' value='" . $imgdir . $a_img[$x] . "'/></span>";}
 
		?>
 
 
 
 
		<script>
 
		$(".vignette_grise").hover(function(){
			var span = $(this).children("input").val();
			$("#changedImage").remove();
			var img = $('<img id="changedImage">');
			img.attr("src",span);
			img.appendTo("#conteneur");
		});
 
		</script>

13/08/2013, 17h59
Torgar

Merci de bien vouloir poster le code source généré !!!

Je pensais qu'il demandait le code du script...

Le code source généré, c'est tout con :
Code:

1 2 3 4 <span class='vignette_grise'><input type='hidden' value='dossier_image/1.jpg'/></span> <span class='vignette_grise'><input type='hidden' value='dossier_image/2.jpg'/></span> ... ...

13/08/2013, 18h03
Invité

@Torgar
En fait non, c'est bien ce code que je voulais voir. :roll:

Pour inverser l'ordre d'écriture des images dans le code html généré (:mrgreen:!), remplacer simplement :

Code:

for($x=0; $x < $totimg; $x++){echo "<span class='vignette_grise'><input type='hidden' value='" . $imgdir . $a_img[$x] . "'/></span>";}

par :

Code:

for($x=$totimg-1; $x >=0; $x--){echo "<span class='vignette_grise'><input type='hidden' value='" . $imgdir . $a_img[$x] . "'/></span>";}

Et tu conserves ton CSS de départ.
13/08/2013, 18h12
twisel

cool! c'est exactement ce que j'ai cherché à faire dès le départ, mais comme je capte pas grand chose en php, j'ai préféré m'attaquer au css...

merci beaucoup!

En optimisant, ça donne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$imgdir = $dossierImg . "/"; 
$allowed_types = array('png','jpg','jpeg','gif'); 
$dimg = opendir($imgdir);//Open directory
while($imgfile = readdir($dimg))
{
	if( in_array(strtolower(pathinfo($imgfile,PATHINFO_EXTENSION)),$allowed_types) )
	{ $a_img[] = $imgfile; }
}
$totimg = count($a_img);
for($x=$totimg-1; $x >=0; $x--){ // du dernier au premier
	echo '<span class="vignette_grise"><input type="hidden" value="' . $imgdir . $a_img[$x] . '"/></span>'."\n";
}
?>

L'extension d'un fichier s'obtient par :

Code:

pathinfo($imgfile,PATHINFO_EXTENSION)

Si c'est OK, pense à voter :plusser: et à cliquer :resolu:

13/08/2013, 18h27
twisel

non, il n'y a plus qu'une vignette qui apparait avec ton code! un poil trop optimisé! :mouarf:

sinon, concernant la taille des images, je viens de voir que la plupart font entre 150 et 250 Ko, avec quelques exceptions autour de 500Ko. ça semble correct, non?
13/08/2013, 18h35
Invité

Mon code fonctionne bien, pourtant.
Ou supprime le ."\n" (c'est juste un passage à la ligne dans le code)

As-tu vu => imageoptimizer (-20% à -30%, sans trop perdre en qualité)
200-250ko, c'est déjà beaucoup...

Et pour tester la validité des pages : http://validator.w3.org
(quelques erreurs de code à corriger)
Entre autres, on écrit : <br/> (pas </br>)
13/08/2013, 18h44
twisel

pour les images, elles sont déjà optimisées, si je baisse encore la qualité, le client va pas aimer... je vais voir avec lui ce qu'il en pense...

et oui, j'ai toujours cette fâcheuse tendance à écrire </br>... je sais pas pourquoi!

merci pour le lien!

Voir 40 message(s) de cette discussion en une page