album photos

[Patricia]

Bonsoir,

j'ai créé/installé hier trois albums photos sur mon site scolaire (http://www.isj-restauration.com, partie "Actualités", "du lundi 19 au mardi 27 mars: Accueil des élèves du primaire" ).

Tout le site fonctionne actuellement très bien sur tous les navigateurs sauf les 3 albums où la mise en page "foire" sur IE6 et inférieurs . L'album passe "en dessous" ...

J'ai encore près de 6 albums à créer et le site va être présenté à la porte ouverte ce samedi (il faut en plus que je trouve le temps de voir le pied de page).

J'ai testé je ne sais combien de possibilités mais ... rien

Alors si quelqu'un pouvait avoir une p'tite idée, ce serait vraiment bien, très bien

Un grand merci pour les réponses

Modifié 31 Mai 2007 par Patricia

[sopo]

Salut, Patricia.

Je n'ai pas regardé le résultat sous IE, mais en visitant la galerie, j'ai remarqué que tu as imposé la largeur de #showcase à 640px, qui se trouve être la largeur disponible de son parent, #container (si je me souviens bien).

* Il n'est pas nécessaire de préciser la largeur dans la feuille de style pour qu'un élément de type bloc occupe toute la largeur disponible. C'est son comportement naturel, il le fait tout seul. L'avantage à ne pas imposer de contrainte sur la largeur, c'est que le bloc pourra s'adapter à une marge oubliée ou imprévue sans casser la mise en page !

* D'autre part, si le décalage ne se produit que pour IE6, c'est certainement un bug de celui-ci. La présence de la colonne flottante me fait pencher pour le "3 three pixel jog". A moins que la marge de la colonne flottante ne soit doublée. A corriger en adaptant les marges dans el premier cas et en appliquant

display: inline

à la colonne flottante dans le second, le tout via un commentaire conditionnel pour IE6 et inférieurs

[Patricia]

Merci de la réponse, voici donc ce que j'ai fait:

Dans le CSS, j'ai viré la taille (640px)

J'ai ajouté le

display: inline

Et les résultats sont maintenant bons (je crois) pour IE6 mais c'est devenu mauvais pour Netscape et pour Opéra

Quant à "3 three pixel jog", j'arrive sur une page d'erreurs ....

Y aurait-il d'autres suggestions là SVP ??

[sopo]

Re,

au temps pour moi pour le lien, faute de frappe. C'est une simple recherche Google sur "three pixel jog"

Effectivement, c'est pas très beau à voir sous Opéra

Personnellement, voici comment je positionnerais les blocs (je ne mets que ce qu'il y a à modifier) :

div.contenu {
   overflow: hidden;
   /* pas de "display: table-cell", ni "height: 100%" */
}
div.centre {
   overflow: hidden;
   padding-left:  10px;
   border: 1px solid #cdcdcd;
   /* pas de "display: table-cell", ni "height: 100%" */
}
#showcase {
   /* Rien du tout -> il y a un div inutile */
}

Les déclarations "overflow: hidden" créent des contextes de formatage sur les blocs auquels on les applique, ce qui peut changer leur rendu de plusieurs façons. Ici :

1/ Sur .contenu, le contexte de formatage va obliger le div à compter la colonne flottante dans la hauteur totale du bloc, ce qui permet de se passer d'un "clear: both"

2/ Sur .centre, on lui interdit de se placer en dessous de la colonne flottante si celle-ci est plus courte, sans avoir besoin d'imposer une marge ou de faire flotter les 2 colonnes

Évidemment, ça ne fonctionne pas tel quel sous IE6. On peut obtenir le même comportement en donnant le layout aux éléments qui en ont besoin, ici .contenu & .centre. Il faut donc ajouter une feuille de style uniquement pour ie 6, par exemple "style-ie.css", que l'on appelle à l'aide des commentaires conditionnels dans la section head :

<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/chemin/vers/le/fichier/style-ie.css" media="screen" /><![endif]-->

Dans ce fichier on remets les valeurs d'overflow à visible et on attribue par exemple une hauteur de 1% à .contenu et .centre (c'est une des manières possible de les doter de layout). Le contenu de style-ie.css :

div.contenu {
   overflow: visible;
   height: 1%;
}
div.centre {
   overflow: visible;
   height: 1%;
}

À part ça, fais attention à l'utilisation des classes & des identifiants. Les classes ne devraient être utilisées que pour des éléments susceptibles de se répéter sur la page. Les identifiants, par contre, sont plus appropriés pour les éléments uniques sur la page, par exemple tes div ".contenu" et ".centre". Ça ne prête pas à conséquence pour le moment, mais tu pourrais t'en mordre les doigts le jour où tu tombera sur un problème de priorité en CSS, ou si tu veux insérer un peu de javascript dans les pages

La colonne de droite semble utiliser beaucoup de <div>, ils sont tous indispensables ? Les divs sont censés regrouper des balises blocs, pour du texte, des liens ou des images, on utilise plutôt <p>. Et ces abonimables attributs 'align="center"' pourraient être facilement remplacés par une classe, non ?

Dernière remarque, il y a une erreur dans la feuille de style (un code de couleur incorrect).

Et voilà. Ça c'est une belle tartine, c'est une

Bon courage.

[Patricia]

Un tout grand merci pour la réponse.

Je vais essayer de comprendre le code de ton explication et tenter de l'appliquer.

De toute façon, il faut que cela marche !!!

Je commence "seulement" à mettre des albums et la quantité de photos ne fait qu'augmenter.

J'aime bien quand on me dit "n'y qu'à ..."= nyaka ...

[Patricia]

Bon pour le moment: Opera = OK !!!!!

Je continue ...

[Patricia]

Bon, je crois que pour IE6, cela va aussi (mais je ne sais pas le tester, actuellement en ligne).

Il ne reste plus qu'une mauvaise crise sur Netscape...

Netscape est l'enfant terrible pour cet album ..

Mais un très gros merci pour cette aide

Modifié 3 Juin 2007 par Patricia

[Patricia]

Mais je n'ai encore changé le code que pour un album, demain je ferai la vérification sur un des ordis de l'école et je changerai ensuite sur les deux autres albums.

Et je m'attaquerai à tous les autres albums en souffrance ... Faut simplement résoudre ce |@#@[@# de Netscape es apparence

Un tout tout gros merci

[sopo]

Salut,

tu as testé avec quelle version de Netscape ? En principe, il ne devrait pas y avoir de problème, les dernières versions de Netscape utilisent le même moteur de rendu que Firefox

[Patricia]

La version 7.1.

Théoriquement la dernière en français

Merci

[Monique]

Bonjour,

A moins de contraintes bien précises, je pense que te focaliser sur Netscape serait plutôt une perte de temps

C'est un navigateur que je ne recommanderais pas, personnellement (voir le blog de Pascal Chevrel) : la version 8 est sortie il y a deux ans et n'existe toujours pas en français, elle utilise la même version du moteur gecko que Firefox 1.0 et utilise IE par défaut pour de nombreux sites (j'ignore sur quels critères)... alors, qu'en est-il des versions 7

PS : je viens de jeter un rapide coup d'oeil aux stats de mon blog, pour le mois de mai "Netscape 0,0%"... 5 utilisateurs pour être honnête.

[Patricia]

Bon, je débute dans ce site scolaire, j'en suis à 0,9% pour Netscape.

Mais j'essaie de faire le mieux que je peux

Merci