Centrage d'IMG dans un DIV

par AB » 29 déc. 2006, 19:28

Xenon_54

Bien sûr on peut faire comme tu dis. A vrai dire pour l'exécution je sais pas si ce sera plus rapide ou plus lent (la table va prendre deux colonnes en plus). Enfin faudrait tester, la dimension de la table rentre aussi en jeu dans ces considérations...
Je concatène car dans les forums ou livres d'or que je fais, le visiteur peut insérer dans son message des images venant de l'extérieur (qui sont redimensionnées si leur taille exède la largeur de la page). L'adresse des images et leur dimensions font donc partie du message enregistré dans ma base de donnée. exemple : http://www.asmelloffox.com/messages.php

par **Ajoloca** » 29 déc. 2006, 19:14

C'est le CSS ou bien IE ???
Le CSS avec les autres navigateurs fonctionne parfaitement.
Niet !
À ma grande surprise, cela ne fonctionnait pas avec Firefox.

Le code que je t'ai donné comme je te l'ai dit, fonctionne parfaitement chez moi sous FF, Opera, et Netscape (j'ai pas d'autres pour tester)
mais il ne fonctionne pas sous IE6 (j'ai pas le 7)
Et si il fonctionne chez moi (que ce soit Linux ou Windows pour FF et Opera)
il n'y a acune raison que ça ne fonctionne pas ailleurs.

par **Xenon_54** » 29 déc. 2006, 19:14

Pourquoi pas 2 champs dédiés pour les dimensions?

Ça te permettra de faire éventuellement des sélections plus précisses sur ceux-ci et ça t'évitera un explode() à chaque affichage.

par AB » 29 déc. 2006, 19:09

Zeus

On va finir par se comprendre.
Dans les albums photos que je fais, l'administrateur peut paramétrer le nombre de photos par lignes, le nombre de lignes par pages (avant l'affichage d'une barre de navigation) et afficher ou non un commentaire sous chaque photo. Un tableau est donc approprié dans ce cas de figure.

albat

Le getimagesize est la méthode que j'emploi pour connaitre la dimension des images et faire fonctionner mes album photos. Mais il vaut mieux utiliser cette fonction une seule fois à l'enregistrement des images plutôt qu'à la lecture car cette fonction est gourmande en ressources et peut devenir lente surtout si les images sont sur un site distant.
Ma solution : je concatène les dimensions de l'image (getimagesize) à l'image elle même lors de son enregistrement dans la base de donnée ex : adressedemonimage.jpg-largeur-hauteur. A la lecture tu fais un explode - sur l'extension du fichier et le tour est joué.

ça te permettra de centrer n'importe qu'elle dimension d'image.

par **albat** » 29 déc. 2006, 18:41

C'est le CSS ou bien IE ???
Le CSS avec les autres navigateurs fonctionne parfaitement.

Niet !
À ma grande surprise, cela ne fonctionnait pas avec Firefox.

par **Ajoloca** » 29 déc. 2006, 18:23

Le CSS, lui, n'a pas tenu ses promesses...

C'est le CSS ou bien IE ???
Le CSS avec les autres navigateurs fonctionne parfaitement.

par **albat** » 29 déc. 2006, 18:20

mais j'aimerais un centrage automatique
car je me vois mal indiquer dans la base
pour toutes les photos lesquelles sont H et lesquelles sont V...
Y en a un paquet...

ou alors, un test en PHP pour trouver les dimensions de chaque image ?...

La fonction getimagesize() m'a ouvert de nouveaux horizons.

Au final, ça marche, mais grâce au secours du PHP.

Le CSS, lui, n'a pas tenu ses promesses...

par **Cyrano** » 29 déc. 2006, 16:32

[...] l'internaute utilisant un navigateur alternatif pour non voyant par exemple comprendra beaucoup plus rapidement qu'il a affaire à une liste en parcourant un tableau [...]
Galerie d'image accessible aux non-voyants.

Pourquoi pas : si le code est proprement fait, chaque image est assortie d'un texte alternatif. Le non-voyant n'est pas obligatoirement au courant de ce qu'il y a dans la page derrière tel ou tel lien et donc peut ignorer qu'il s'agit essentiellement d'une galerie d'images.

Supposons également que ce soit par exemple un site d'offres immobilières : il y aura des descriptions parfois accompagnées d'illustrations : le non voyant n'aura cure des images, mais il voudra avoir les descriptions et donc aura besoin d'accéder à cette page. CQFD

par **zeus** » 29 déc. 2006, 16:18

L'utilisation d'un tableau pour une galerie d'image prend un sens sémantique si tu as une colonne qui contient les images et une colonne la description (par exemple)

Mais utiliser un tableau pour présenter une liste de 7*3 images n'a aucun sens sémantique. Du moins pour moi

par **jojolapine** » 29 déc. 2006, 16:13

je suis pas sûr de bien comprendre ...

tu ne sais pas si tes images doivent avoir la classe h ou v ?
je vois plus trop oèu on en est ...

tu as essayer mon bout de code, il fonctionne sous ie6 ?
qu'est-ce qui reste à faire ?

par **albat** » 29 déc. 2006, 16:08

C'est exactement ce que je viens de faire.

Comme ça (cf. ci-dessous), ça marche :

img        { border:none ; }
.miniature { float:left ; width:100px ; height:100px ; margin:10px ; background-color:#FFFF00 ; }
.h         { width:100px ; height:75px ; margin:12px 0 13px 0 ; }
.v         { width:75px ; height:100px ; margin:0 13px 0 12px ; }

mais j'aimerais un centrage automatique
car je me vois mal indiquer dans la base
pour toutes les photos lesquelles sont H et lesquelles sont V...

Y en a un paquet...

ou alors, un test en PHP pour trouver les dimensions de chaque image ?...
Some ideas ?...

par **Hubert Roksor** » 29 déc. 2006, 15:59

[...] l'internaute utilisant un navigateur alternatif pour non voyant par exemple comprendra beaucoup plus rapidement qu'il a affaire à une liste en parcourant un tableau [...]

Galerie d'image accessible aux non-voyants.

À part ça, comment vous faites pour savoir si une image est horizontale ou verticale ? parce que si on peut utiliser PHP alors t'as qu'à mettre les margin-top en dur et arrêter de t'embêter

par **jojolapine** » 29 déc. 2006, 15:50

Pour jojolapine et ajoloca, je fournis également les images de test

gnagna

Bon sinon, en tatonant, j'ai fait ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>essai</title>
		<style type="text/css" media="screen"><!--
/* <![CDATA[ */	

img { 
    margin: 0px; 
    padding: 0px; 
    border:none ; 
}
.h { 
    width:100px ; 
    height:75px ;     
    padding-top: 50%;
    margin-top: -56px;
}
.v { 
    width:75px ;
    height:100px ;
}
.miniature { 
    padding: 0px;
    text-align: center;
    margin:  10px;
    float: left;
    width: 100px;
    height: 100px;
    background-color:#000 ;
}
 /* ]]> */	
--></style>

</script>
</head>
<body>
<div class="miniature">&nbsp;<img src="img_v.png" class="v" alt="" />&nbsp;</div>
<div class="miniature">&nbsp;<img src="img_h.png" class="h" alt="" />&nbsp;</div> 
</body>
</html>

qui fonctionne sur firefox et ie7, (j'ai pas ie6), par contre j'arrive pas à trouver d'où viens le - 56px, je l'ai trouvé en tatonnant, mais par le calcul, je trouve pas ...

par **albat** » 29 déc. 2006, 15:21

Ok tu ne veux pas avoir un nombre de lignes et de colonnes fixes.

En effet
et je souhaite que l'affichage de la liste s'adapte automatiquement à la dimension de la fenêtre du client.

En outre, comme l'indique Cyrano, l'utilisation de tableaux
- dans ce cas précis - n'est pas une aberration, sémantiquement parlant
et bien que l'idéal théorique serait peut-être d'utiliser une liste <ul>,
l'intérêt d'une liste pour afficher une série de miniatures ne me convainc pas.
Je conserve donc mes div flottants...

Enfin j'ai du heurter un peu ta sensibilité,
car sinon tu aurais certainement essayé le lien dans mon message
qui renvoie exactement au même endroit que le dernier de mere-teresa

Non, non. Pas de méprise.
Tu n'as pas heurté ma sensibilité (au contraire, je te remercie d'avoir répondu)
et j'ai bien cliqué sur le lien que tu m'as indiqué.
Je t'ai simplement omis dans ma réponse collective.
Mea culpa.

par AB » 29 déc. 2006, 15:14

Hubert

Merci de cette réponse constructive.
Je n'avais pas envisagé ce cas de figure car pour ma part, je préfère garder le contrôle de la mise en page surtout pour des éléments graphiques.

Zeus

Dans ma base de donnée, la même colonne de chaque ligne représente bien l'adresse d'une image.

albat

Ok tu ne veux pas avoir un nombre de lignes et de colonnes fixes.

Enfin j'ai du heurter un peu ta sensibilité, car sinon tu aurais certainement essayé le lien dans mon message qui renvoie exactement au même endroit que le dernier de mere-teresa

Cyrano

Merci de tes précisions. Je ne me voyais pas entreprendre une réponse aussi clair et détaillée que la tienne

Centrage d'IMG dans un DIV

Répondre

Étendre la vue Revue du sujet : Centrage d'IMG dans un DIV