Alignements et incompatibilitées (explorer) [résolu]

Bonjour,

Je vais parler simplement, je débute les mises en forme CSS (j'ai quand même lu trois livres et j'ai le guide du langage de référence !) :

Je n'arrive pas à aligner deux trucs (un logo à gauche, une liste ul en ligne à droite) qui soit affiché pareil sur Firefox et Explorer pour faire un header de site :

J'a tout essayé : reprise de tuto etc... Pas un seul système me crée une mises en page compatible sur Explorer (décalage systématique de 10 pixels au dessus ou dessous) : que ce soit des bloc p des div des img quel que soit les paramètres... Par ailleurs le tuto d'alsa-création ne donne pas de sources pour faire la mise en page, c'est pas génial pour apprendre !

Je commence franchemet à me décourager

Voici ma dernière mise en forme (dans un container) :

<div id="menu_annexe">
<ul>
<li><a href="#" title="présentation" accesskey="6">Présentation</a></li>
<li><a href="#" title="plan du site" accesskey="7">Plan du site</a></li>
<li><a href="#" title="contact" accesskey="8">Contact</a></li>
<li><a href="#" title="credits" accesskey="9">Credits</a></li>
</ul>
</div>

<div id="logo">
<a href="sommaire.php3" title="retour à la page d'accueil" accesskey="0"><img src="IMG/i/logo_monsite.png" width="254px" height="56px" alt="Le site qui le fera bien quand il sera en CSS" /></a>
</div>

et voici les styles associés :

#logo img {
	margin: 15px 0 0 15px;
	}

#menu_annexe ul {
	position:absolute;
	right: 10px;
	top: 40px;
	text-align:right;
	}

#menu_annexe li {
	display: inline;
	} 

Merci de vos réponses
Modifié par Samuel Berg (05 Oct 2005 - 14:16)

Bonjour.
As-tu pensé au float:left; pour ton logo?

Bonsoir Samuel et bienvenue ici.

Au vu de ton code qui n'est pas affiché comme le demandent les Règles du forum, j'ai bien l'impression que tu n'as pas pu lire le sujet important, placé tout en haut du salon et qui est destiné aux débutants sur le forum.

Cette annonce n'apparaît-elle pas chez toi ?

a écrit :
Par ailleurs le tuto d'alsa-création ne donne pas de sources pour faire la mise en page, c'est pas génial pour apprendre !

Que veux tu dire par là ?

Tous les sources des exemples d'Alsa sont disponibles avec un simple clic droit.

Sinon, les tutoriels de mise en page sont assez nombreux, me semble-t-il :
- http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css
- http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Construire-un-site-sans-tableaux

A moins que tu ne parles d'un tutoriel en particulier ? Lequel ?

a écrit :
J'a tout essayé : reprise de tuto etc... Pas un seul système me crée une mises en page compatible sur Explorer (décalage systématique de 10 pixels au dessus ou dessous)

C'est un problème très classique de différences de marges par défaut, que tu aurais pu trouver à différents endroits :
Par exemple : Comment régler les problèmes classiques de marges, d'espaces et de décalages ?
Cet article explique que

a écrit :
Toutes les balises bloc (sauf <div>) possèdent des marges internes (padding) et externes (margin) par défaut.
Le problème est que cette valeur par défaut est différente d'un navigateur à l'autre et provoquera un rendu différent sur chaque navigateur.
Il s'agit certainement de l'explication la plus courante lorsque des décalages apparaissent entre les différentes plateformes.

Le meilleur moyen d'identifier un problème de marges sur certains éléments et de… supprimer toutes les marges de tous les éléments.

Dans ton cas, le problème vient des marges par défaut sur <ul> et <li>

Les réponses sont à quelques clics, si tu te donnes le temps de les chercher
Modifié par Raphael (03 Oct 2005 - 16:51)

Merci beaucoup,

C'est déjà pas facile de se remettre en cause (et au travail) quand on est un webmaster de la vieille école, alors quand les difficultés arrivent...

Ce que je viens de voir dans un des topics c'est quelqu'un qui faisait un shéma des ses blocs pour mieux se répérer dans la mise en page : ça c'est de la méthode, j'adopte immédiatement !

Par ailleurs j'avais bien lu ces problèmes sur un de mes livres mais je ne m'étais visiblement pas assez attardé : je viens aussi de découvrir les modèles d'alsacréation sur la mise en page, je m'y essaye de suite.

Merci pour ses réponses

Bonne chance à toi

Au fait, voudrais-tu bien modifier le code que tu as affiché dans ton premier message, comme je te l'ai signalé et conformément aux règles de ce forum ?

Merci d'avance

Bien,

Désolé pour la mise en forme : aucun des boutons de mise en forme ne fonctionne chez moi (Firefox sous Suse), j'ai été obligé de rectifier à la main.

Pour ce qui est du problème d'incompatibilité :

Je pense en fin de compte soulever un point intéressant : il y a énormément d'information mais c'est un peu épars. Toutes les règles du Xhtml, toutes les règles du CSS, tous les problèmes de bugs Explorer, le système de mise en forme, les bidouilles, les raccourcis, les propriétés, les recommandations, l'accessibilité ! Ouf et j'en passe !

En fait il y a des infos très orientées :

- Xhtml : code de référence
- CSS : mise en page sympathique
- Trucs et astuces du CSS et du Xthml
- Accessibilité
- Astuces de remplacement d'autre technologies (dhtml, javascript...)
- Des articles éparses (le png, la méthode à deux feuilles de styles, flux RSS...)
- Et enfin beacoup d'articles qui mélange un peu tout

Mais j'ai la profonde conviction que quand on est un webmaster de la vieille école qui veut rejoindre le clan fermé des "développeurs internet" (quel statut !), et que pour cela on va être obligé de remettre en cause les fondements même de notre formation et de nos logiciels, il faut avoir un aperçu d'ensemble du cadre rigide du site parfaitement conforme (Xhtml Strict, CSS valid, WAI-AA) pour ensuite, éventuellement, se permettre de petites infractions à la validation par le W3C.

C'est un peu ce qui me manquait : un mode d'emploi, une suite de règles à suivre élaborées à partir du langage de référence, des recommandations officielles et de l'expérience d'utilisateurs avancés voir très avancés, des bidouilles de Jojo...

Je suis donc en train d'écrire un condensé de toutes ces références pour un webmestre sachant coder (je n'écris pas un livre) depuis ces sources :

Livres :

- Xhtml, guide du langage de référence
- Design web : utiliser les standards
- CSS2 : pratique du design web
- Vos premières feuilles de style HTML (il faut bien commencer un jour )

Sites :

- Tous les articles d'OpenWeb
- Tous les articles d'Alsacreation
- Tous les articles de Pompage

Validation :

- Validateur CSS du W3C
- Validateur Xhtml du W3C
- Validateur Accessibilité OCAWA
- Bonnes pratiques du Web d'opquast
- Points de controles du W3C pour les règles d'accessibilité

Sans être prétentieux, ce travail de synthèse me permettra je crois de ne pas me retrouver dans la situation du "mince, j'aurais pu faire ça aussi, j'avais pas vu" ! Je crois qu'il pourrait-être une bonne base pour les débutants en Xhtml voulant créer une mise en page sans tableau. C'est un condensé du travail des autres, cela doit-être compris, permettant de connaître le cadre (sans cadres point de liberté) dans lequel on se doit de coder son site. Rien de très sophistiqué mais un excellent mémento pour ne pas avoir la tête en citrouille à la fin de la journée.

Je publierai volontier ce petit condensé avec l'accord de l'administrateur de ce site dans l'espoir comme toujours qu'il profite à d'autre.

Pour ce qui est du problème d'incompatibilité :

- Bugs Explorer : pour palier aux problèmes de l'interprétation (car visiblement Microsoft ne comprend l'informatique qu'à sa façon) des dimensions des blocs et ainsi obtenir des décalages entre deux navigateurs, il faut respecter ces 3 règles :
. pas de width à un élément qui possède des padding ou bordures horizontales (left, right) : préférer des margins externes
. pas de height à un élément qui possède des padding ou bordures verticales (top, bottom) : préférer des margins externes
. définir les marges des éléments en ligne même à 0 (body, blockquote, form, input, ul, li, hx) s'ils n'ont pas de valeur par défaut
Modifié par Samuel Berg (05 Oct 2005 - 14:16)

Bonjour Samuel,

Attention à ne pas passer à côté d'un aspect essentiel : les différences de rendu d'une page entre deux configurations utilisateurs sont inévitables, et font partie de la nature du Web.

Certaines de ces différences échappent totalement à l'auteur d'un site. Pour les autres, il n'y a pas forcément nécessité de les gommer toutes, mêmes si celles-là sont maîtrisables.

C'est le cas pour le modèle de boîte CSS / Microsoft dans IE5.x. C'est également le cas pour les marges ou pading par défaut des listes, des blockquotes, etc. Il faut juger au cas par cas de la nécessité de supprimer ces différences ou de les intégrer au design.

Et c'est encore le cas des autres facteurs de ce type, car ce ne sont pas les seuls, mais juste les plus évidents : vouloir faire table rase de ces différences a priori et systématiquement sera une tâche assez improductive, finalement.

Etape numéro 1 du padawan CSS : lâcher prise sur le design, et le laisser se décliner plutôt que de se projetter de manière figée.

La "rigidité" du cadre des standards à laquelle tu fais allusion va de pair avec la souplesse dans l'approche et dans la réalisation : bee strict to be cool, be cool to be strict...
Modifié par Laurent Denis (05 Oct 2005 - 15:15)

Improductif ?!?

J'ai du mal à comprendre :

Comment peut-on dire qu'internet est prêt pour les standadrs si on ne doit pas chercher à afficher un site pareillemet sur les deux navigateurs les plus utilisés. Des petits rien d'accord, des décalages de 20 pixels NON !!!

Peu de personnes seront prêt à franchir le pas en se disant qu'ils vont récupérer 3% de personnes handicapées grâce à un site accessible et bien codé mais qu'ils vont gêner les 18 % qui surfe sur Macintosh, les 3% sur Linux et les 7 % sur des vieilles versions d'Explorer ! Les mises en pages en tableaux ont dans ce cas de belles années devant elle...

Le but du standard n'est-il pas d'assurer une compatibilité parfaite ?

J'en reste quoi ! De la part de quelqu'un qui vient d'opquast.

Rassurez-vous, il n'y a pas de malentendu sur la démarche de la qualité Web (Opquast)

Mais la clé est dans votre phrase :

a écrit :
Des petits rien d'accord, des décalages de 20 pixels NON !!!

20pixels n'ont pas de signification en eux-mêmes. Ils peuvent être source de gêne pour l'utilisateur dans certaines pages, et pas dans d'autres. C'est cela, qu'il s'agit de gérer. Pas l'euthanasie totale des 20pixels.

L'entreprise visant à mettre au carré à l'avance tous les navigateurs et toutes les configurations utilisateurs est simplement illusoire. C'est l'une des leçon, justement, du design à l'ancienne.

La démarche qualitative vise également à optimiser le travail du développeur : ne lui faisons pas perdre son temps.
Modifié par Laurent Denis (05 Oct 2005 - 15:41)

Samuel Berg a écrit :
Peu de personnes seront prêt à franchir le pas en se disant qu'ils vont récupérer 3% de personnes handicapées grâce à un site accessible et bien codé mais qu'ils vont gêner les 18 % qui surfe sur Macintosh, les 3% sur Linux et les 7 % sur des vieilles versions d'Explorer ! Les mises en pages en tableaux ont dans ce cas de belles années devant elle...

Il ne s'agit pas uniquement d'accessibilité, très loin de là. Ce n'est qu'un aspect de l'interopérabilité.

Sachant que le nombre de navigateurs sur mobiles et PDA est... de l'ordre de quelques dizaines pour l'instant et que vous ne pourrez en aucun cas les examiner tous à la loupe : allez-vous traquer dans la foulée chaque valeur CSS par défaut dans chacun d'entre eux ?

Sachant que les capacités utilisateur d'adaptation du rendu et du contenu se développent avec chaque nouvelle version majeure des navigateurs desktop ou non, allez-vous traquer les réglages de chaque utilisateur ?

Il s'agit de mettre à disposition de l'utilisateur un contenu accessible, une présentation fluide et adaptative. Pas un PDF. Nous sommes d'accord là-dessus, je crois. C'est juste une question de petit pas supplémentaire à franchir
Modifié par Laurent Denis (05 Oct 2005 - 15:50)

Une compatibilité totale avec tous les OS et tous les navigateurs, certes non. Mais on peut tacher moyen.

D'après mes stats (phpmyvisites) :

- 63% XP
- 15% Mac
- 10% Win98
- 09% Win2000
- 02% Nunux

et au niveau des navigateurs :

- 65% IE6
- 14% Firefox
- 08% Safari (312/412/125)
- 06% IE (5.1/5.2/5.5)
- 2,5% IE5 (pour mac)
- 1,6% Mozilla 5

J'espère donc assurer ma compatibilité graphique maximale sur IE6, Mozilla et Safari.

A ce propos je n'ai trouvé nulle part la liste des navigateurs fonctionnant avec Gecko : cela me permettrait de savoir si j'implémente ou non des fonctions CSS3 tels que les bords arrondis... parce que si Safari en fait parti, je crois que ça fait presque 25% de mes internautes !
Modifié par Samuel Berg (05 Oct 2005 - 15:59)

Samuel Berg a écrit :
je n'ai trouvé nulle part la liste des navigateurs fonctionnant avec Gecko

Cette question a une réponse plus simple que les autres de ce sujet : http://fr.wikipedia.org/wiki/Gecko_%28moteur_de_rendu%29

Pour ce qui concerne Safari il est plutôt lié à KHTML le moteur de rendu de Konqueror lui-même inclus dans l'environnement Linux KDE.