Dysfonctionnements classiques d'affichage mais je cale...

Bonjour,

Un peu en auto-formation, j'ai refondu le site de ma société en tenant compte au maximum des normes W3C.

Or, depuis qu'il est en ligne, je reçois pas mal de remarques sur des dysfonctionnements, dont :
- éléments qui se décalent lors d'un affichage supérieur à 1024
- styles de texte pas pris en compte sur IE6 (mais pour moi, tout est ok sur FF et IE7)

Le site en question

Pouvez-vous m'aider ? J'ai essayé d'utiliser la fonction max-width mais TopStyle ne le reconnaît pas...

Merci de votre aide.

Sandrine
Modifié par Cygnus (16 Jan 2007 - 18:51)

Bonsoir et bienvenue

a écrit :
- éléments qui se décalent lors d'un affichage supérieur à 1024

De quels éléments parles tu exactement?

a écrit :
styles de texte pas pris en compte sur IE6 (mais pour moi, tout est ok sur FF et IE7)

Encore une fois de quels styles tu parles?
Tu aurais quelques éléments à ajouter dans le head si tu es intéressée...
Modifié par Hermann (16 Jan 2007 - 20:11)

sbataille a écrit :
éléments qui se décalent lors d'un affichage supérieur à 1024

C'est moi ou bien absolument tous les blocs sont positionnés en relatif, c'est à dire décalés par rapport à leur place « normale », afin de pouvoir placer des blocs côte-à-côte ? Sauf peut-être un bloc qui traine, positionné en absolu.

Mon verdict : il faut abattre la bête pour abréger ses souffrances.

Suite à quoi, on reprend tous les tutoriels qui vont bien, comme « Comprendre le positionnement des éléments en CSS » sur Alsacréations et les trois tutoriels sur le positionnement sur Openweb. Une fois qu'on a lu ça, et à la rigueur effectué un ou deux tests pour mettre en pratique, on peut chercher un gabarit de site dans la liste suivante, et l'adapter à ses besoins.

Bon, j'ai sans doute l'air un peu expéditif, là. Mais je crois que ça va être nécessaire. Mieux vaut refaire les choses proprement (et en acquérant au préalable les connaissances de base sur le positionnement, pas en bidouillant du positionnement relatif qui n'est absolument pas fait pour ça !), plutôt que de tenter de corriger l'existant.

Bien sûr, les contenus et le graphisme peuvent être repris. Et également, dans une certaine mesure, la structure des éléments. C'est juste tout le positionnement qui est à revoir...

Hermann a écrit :
Bonsoir et bienvenue
- éléments qui se décalent lors d'un affichage supérieur à 1024

De quels éléments parles tu exactement?

a écrit :
styles de texte pas pris en compte sur IE6 (mais pour moi, tout est ok sur FF et IE7)

Encore une fois de quels styles tu parles?
Tu aurais quelques éléments à ajouter dans le head si tu es intéressée...
Bonjour,
Les éléments dont je parle sont les blocs, dont la majorité qui reste centrée qq soit la taille d'ouverture du navigateur, sauf le bloc de droite qui se décale, pas sur la page d'accueil par contre...
Les styles, je parle des styles de textes html qui sont créés dans ma feuille de styles, par ex h1 p ou ul etc.
Merci encore de votre aide.

Florent V. a écrit :

C'est moi ou bien absolument tous les blocs sont positionnés en relatif, c'est à dire décalés par rapport à leur place « normale », afin de pouvoir placer des blocs côte-à-côte ? Sauf peut-être un bloc qui traine, positionné en absolu.

Oui, c'est exact, j'ai tout passé en absolu dès lors qu'on m'a demandé de centrer le site et j'ai bien galéré j'avoue.

a écrit :
Suite à quoi, on reprend tous les tutoriels qui vont bien, comme « Comprendre le positionnement des éléments en CSS » sur Alsacréations et les trois tutoriels sur le positionnement sur Openweb. Une fois qu'on a lu ça, et à la rigueur effectué un ou deux tests pour mettre en pratique, on peut chercher un gabarit de site dans la liste suivante, et l'adapter à ses besoins.

Bon, j'ai sans doute l'air un peu expéditif, là. Mais je crois que ça va être nécessaire. Mieux vaut refaire les choses proprement (et en acquérant au préalable les connaissances de base sur le positionnement, pas en bidouillant du positionnement relatif qui n'est absolument pas fait pour ça !), plutôt que de tenter de corriger l'existant.

Bien sûr, les contenus et le graphisme peuvent être repris. Et également, dans une certaine mesure, la structure des éléments. C'est juste tout le positionnement qui est à revoir...

Oui, je comprends parfaitement et dans l'absolu j'adhère, le seul hic, c'est que ce n'est pas ma fonction principale, que je fais ça en + de mon boulot et que je manque de temps pour lire tout ce qui se dit et peut se faire, donc je pioche par ci par là et je teste...

Si je mets mes blocs en absolu, ok mais comment faire pour que le site reste centré qq soit la taille du navigateur ?

Merci.

sbataille a écrit :
mais comment faire pour que le site reste centré qq soit la taille du navigateur ?

Pour centrer un site, il y a un tutoriel qui va bien dans la section des... tutoriels. Rapidement, ça peut donner ça :

[b]HTML :[/b]
<body>
<div id="global">
...
</div>
</body>

[b]CSS :[/b]
div#global {
	width: 760px;
	margin: 0 auto;
}

sbataille a écrit :
Si je mets mes blocs en absolu, ok

Ah non, c'est pas ok.
Le tout positionnement absolu c'est assez suicidaire. Un peu moins pire que de tout positionner en relatif (là, on peut difficilement faire pire ), mais c'est loin d'être une solution efficace pour autant.

As-tu regardé la galerie gabarits CSS ? Dans le cas de ton site, je pense que le positionnement avec des colonnes flottantes serait plutôt adapté. Mais ça demande un minimum de travail et d'apprentissage.

Si vraiment tu n'as pas le temps, et que tu dois faire quelque chose de rapidement, il y a une solution simple, accessible et robuste : faire un tableau à trois cellules (une pour chaque colonne de contenu). À partir de là, plus besoin de positionnements absolus, relatifs, flottants...

a écrit :

As-tu regardé la galerie gabarits CSS ? Dans le cas de ton site, je pense que le positionnement avec des colonnes flottantes serait plutôt adapté. Mais ça demande un minimum de travail et d'apprentissage.

Non, mais je vais essayer de me pencher dessus.

a écrit :

Si vraiment tu n'as pas le temps, et que tu dois faire quelque chose de rapidement, il y a une solution simple, accessible et robuste : faire un tableau à trois cellules (une pour chaque colonne de contenu). À partir de là, plus besoin de positionnements absolus, relatifs, flottants...

Oui mais du coup, mon site n'est plus valide si j'utilise un tableau (à moins que je me trompe)

Merci de ton aide, je vais me pencher sur la galerie gabarits CSS comme tu me le conseilles.

sbataille a écrit :

Oui mais du coup, mon site n'est plus valide si j'utilise un tableau (à moins que je me trompe)

Oui ça n'a rien à voir avec la validité qui exige seulement que ton code
obéisse à certaines règles syntaxique relative au Doctype déclaré
dans ta page et dont le validateur (celui du w3c par exemple) a besoin pour pouvoir la valider.
L'utilisation d'un tableau ne peut représenter un problème que pour
l'accessibilité de la page surtout dans le cas on l'on a plusieurs tableaux
imbriqués, le poid de la page, la lisibilité du code, la rapidité d'affichage
des pages dans certains cas, et pour des questions de sémantique...

Le tableau doit essentiellement être utilisé pour des donnée tabulaires
(calendrier, etc.) et dans certains autres cas ou l'on doit avoir plusieurs colonnes.
Celui-ci n'a jamais eu pour fonction comme ça a été le cas pendant
plusieurs années, de mettre en page des éléments ou de les positionner.
Modifié par Hermann (17 Jan 2007 - 16:59)

sbataille a écrit :
Oui mais du coup, mon site n'est plus valide si j'utilise un tableau (à moins que je me trompe).

Oui, tu te trompes. Même si la « communauté » des standards du Web, dont Alsacréations fait partie, répète allègrement qu'il faut laisser tomber les tableaux utilisés à tort et à travers, il ne faut pas non plus tomber dans l'excès inverse, et refuser d'utiliser un tableau « par principe ».

Pour réaliser un design sur deux ou trois colonnes, un tableau (une seule ligne, deux ou trois cellules) est la solution la plus rapide et la plus robuste si on n'a pas les connaissances qui vont bien pour faire autrement.

C'est de plus une solution tout à fait accessible.

<table id="contenu" summary="">
<tr>
	<td id="gauche">...</td>
	<td id="centre">...</td>
	<td id="droite">...</td>
</tr>
</table>

Et voilà le travail.

Le problème du decalage du bloc de droite vient
du fait que tu n'as pas défini de point de référence pour
le positionnement absolue de ses bloc enfants:
Donc au lieu de se baser sur #global, leur positionnement
se base sur la zone d'affichage, ce qui a pour conséquence
un décalage différents selon la resolution.

Tu donc dois attribuer un position:relative au div global.

Quant au styles c'est un peu vague : il faudrait donner la page
et le texte sur lequel cela pose problème.
Modifié par Hermann (17 Jan 2007 - 17:56)

Merci de vos réponses, mon boulot ne m'a pas encore permis de tester vos solutions. Je pense pouvoir m'y consacrer cet après-midi.