Présentation classique & optimisation du code Xhtml pour le réf ?

Bonjour,

J'aimerai vos conseils éclairés pour parvenir à coder une page en Xhtml qui soit valide, tout en me permettant d'atteindre trois objectifs :

- Conserver une présentation classique avec le menu sur la gauche ainsi qu'une barre de droite pour mettre en valeur différents élements.
- Optimiser le code afin que les blocs de contenus appaissent dans le code avant la navigation.
- Avoir un code qui s'adapte à la taille de la fenétre au niveau du contenu.

Déjà, est-ce possible ? Si c'est le cas, pourriez-vous m'indiquer le code simple de positionnement des blocs et la CSS qui va avec ? Pour le reste, j'en fais mon affaire. J'avoue que là je me casse la tête sans résultats.

L'intérêt pour moi d'avoir le contenu juste après le header est de faire monter la partie importante du site (le contenu) dans le code qui est lu par les robot des moteurs de recherches. Je pense que cela devrait m'aider à mieux me positionner sur mes requêtes qui sont trés compétitives.

Merci pour votre aide.

A+
PM

P.S. : La présentation standart que j'imagine est comme celle du suivant Tuto de Sib : Modele n°6
Modifié par PM-maroc (04 Jul 2005 - 20:35)

Ta question est posée dans le salon xhtml :

<div id="contenu">contenu</div>
<div id="menu">les liens de mon menu</div>

ça donne ça en gros

a écrit :
L'intérêt pour moi d'avoir le contenu juste après le header est de faire monter la partie importante du site (le contenu) dans le code qui est lu par les robot des moteurs de recherches. Je pense que cela devrait m'aider à mieux me positionner sur mes requêtes qui sont trés compétitives.

J'ai des doutes que ça fonctionne comme ça ...
Modifié par TriadPtale (04 Jul 2005 - 20:42)

Merci pour ta réponse TriadPtale,

Pour le code pur comme cela, je m'en doutais un peu. Le problème est après de paramétrer la CSS pour obtenir le résultat souhaité, et là je suis encore dans le vague.

Pour répondre à tes doutes, les robots suivent le code tel qu'il est en ligne. Si ton contenu est en tête de code, tu as plus de chance qu'il le reconnaisse, qu'il affiche une partie de contenu dans la description qu'il affiche (plutot que : accueil, rubrique 1, rubrique 2, ...). Il est évident que le code ne représente qu'un élément pris en compte par les moteurs, et que c'est aspect n'est qu'un élément considéré dans le code au coté du temps d'affichage, des balises alt renseignées, etc ... Pour tout te dire, ce conseil je le tiens d'un référenceur professionnel. J'essai de trouver une solution qui soit conforme aux standarts, qui me donne le résultat graphique souhaité et qui m'aide dans mon référencement.

Il me semble donc avoir posté au bon endroit (à moins que le forum débutant ou encore CSS étaient plus approprié). Maintenant, on verra ce que Sib ou un autre modo en pensent ...
Modifié par PM-maroc (04 Jul 2005 - 20:58)

Sur la structure indiquée ci-dessus, les possibilités CSS sont nombreuses.

Les deux plus simples sont:
- contenu en float:right et menu en flux
- ou contenu en flux avec marge gauche et menu en position absolue dans cette marge

Pour te compliquer la vie, tu peux faire également:
- contenu et menu tout deux en float
- ou contenu et menu tout deux en position absolue

Nettement plus tordu:
- contenu et menu en display:table-cell, avec solution de remplacement en float / flux pour IE
- on doit pouvoir quelque-chose à base de display: run-in ou compact

Franchement pervers:
- contenu en float:left, menu en flux à sa droite et inversion des deux par position relative
- contenu en flux et menu flottant après lui, assorti d'une position relative pour le remonter à côté du contenu

La future solution idéale pour quand les navigateurs Gecko l'implémenteront:
- contenu et menu en display: inline-block, actuellement à tester dans Opera

etc.

<edit>En te relisant, j'ai un doute : tu veux 2 ou 3 colonnes ?</edit>
Modifié par Laurent Denis (04 Jul 2005 - 21:28)

Laurent Denis a écrit :
<edit>En te relisant, j'ai un doute : tu veux 2 ou 3 colonnes ?</edit>

Justement, je souhaiterai un 3 colonnes avec la zone de contenu (centrale) redimentionable.

Laurent Denis a écrit :
La future solution idéale pour quand les navigateurs Gecko l'implémenteront:

Pourquoi, il n'y a que Gecko qui n'implémente pas display: inline-block ?

djfeat a écrit :

Pourquoi, il n'y a que Gecko qui n'implémente pas display: inline-block ?

Je ne sais pas pour les moteurs de rendu autres que ceux de IE win et Opera mais Gecko n'implémente pas inline-block en effet. On peut utiliser display: -moz-inline-box; mais ce n'est pas standard ni parfaitement au point.

Concernant IE, une petite précision quand même, il ne supporte inline-block que sur les éléments "naturellement" en-ligne (span, em, ...), pas sur les éléments "naturellement" de type bloc (div, p, ...).

à PM-maroc >

étant donné que dans le tuto de raphaël auquel tu te réfères le contenu est dans le flux et les colonnes droite et gauche sont positionnées en absolute, je ne voies pas très bien en quoi l'ordre de déclaration des éléments dans le code source peut influer sur le rendu à l'écran.

PM-maroc a écrit :


Justement, je souhaiterai un 3 colonnes avec la zone de contenu (centrale) redimentionable.

Dans ce cas, les possibilités se réduisent :

Version simple :
- contenu en flux, avec marge gauche et marge droite pour réserver l'espace des colonnes
- colonne gauche en position absolue top:0;left:0 et largeur correspondant à la marge du contenu
- colonne droite en position absolue top:0;right:0 et largeur correspondant à la marge du contenu
(je suppose que c'est d'ailleurs la solution adoptée par le modèle auquel tu fais référence)

Version perverse:
- 3 colonnes flottantes et utilisation des positions relatives pour intervertir latéralement le contenu et la colonne gauche ( http://test.blog-and-blues.org/3_colonnes_float/ )
Modifié par Laurent Denis (05 Jul 2005 - 07:21)

djfeat a écrit :

Pourquoi, il n'y a que Gecko qui n'implémente pas display: inline-block ?

IE implémente inline-block de manière très limitée: il ne s'applique qu'aux éléments de type inline par défaut, et pas aux éléments blocs. On peut tout de même déjà l'utiliser pour dimensionner un élément en ligne sans en faire un élément bloc.

Opera implémente inline-block de manière complète. Malgré quelques bugs mineurs sur des paddings, par exemple, on peut l'utiliser pleinement pour des mises en page.

Sauf erreur de ma part, Konqueror et Safari l'implémentent également avec quelques défauts mineurs.

Gecko butte sur cette implémentation apparemment délicate, depuis un bout de temps : https://bugzilla.mozilla.org/show_bug.cgi?id=9458 , mais semble y travailler activement

( -moz-inline-box est... une chose surprenante, sans véritable rapport avec inline-block, et hélas à vrai dire assez peu utilisable)

Pour tester le support d'inline-block, voir par exemple: http://hixie.ch/tests/adhoc/css/box/inline-block/
Modifié par Laurent Denis (05 Jul 2005 - 07:20)

PM-maroc a écrit :

L'intérêt pour moi d'avoir le contenu juste après le header est de faire monter la partie importante du site (le contenu) dans le code qui est lu par les robot des moteurs de recherches. Je pense que cela devrait m'aider à mieux me positionner sur mes requêtes qui sont trés compétitives.

Je suis pas outrageusement convaincu par cette hypothèse... peut-être un peu datée

Mais en revanche, il faut souligner que le contenu en tête de document a d'autres avantages bien solides :
- document plus agréable à consulter dans un navigateur graphique sans support CSS (navigateurs de génération 4, etc)
- contenu immédiatement visible sur l'écran d'un mobile (si on ne fait pas n'importe quoi avec un bandeau de titre monumental, bien-sûr)
- à mon avis, contenu plus aisé à consulter dans un navigateur texte, car il apparaît dès le premier écran
- accès immédiat au contenu dans un lecteur d'écran en mode navigation dans les tableaux (si la mise en page repose sur des tableaux), en mode titre (si le contenu est correctement titré), en mode navigation dans les liens, etc.
- affichage immédiat du contenu de la page en bas-débit, sans attendre le chargement des menus, dans les navigateurs pratiquant le rendu progressif (Opera entre autres)
Modifié par Laurent Denis (05 Jul 2005 - 07:32)

Laurent Denis a écrit :


Je suis pas outrageusement convaincu par cette hypothèse... peut-être un peu datée

Mais en revanche, il faut souligner que le contenu en tête de document a d'autres avantages bien solides :
- document plus agréable à consulter dans un navigateur graphique sans support CSS (navigateurs de génération 4, etc)
- contenu immédiatement visible sur l'écran d'un mobile (si on ne fait pas n'importe quoi avec un bandeau de titre monumental, bien-sûr)
- à mon avis, contenu plus aisé à consulter dans un navigateur texte, car il apparaît dès le premier écran
- accès immédiat au contenu dans un lecteur d'écran en mode navigation dans les tableaux (si la mise en page repose sur des tableaux), en mode titre (si le contenu est correctement titré), en mode navigation dans les liens, etc.
- affichage immédiat du contenu de la page en bas-débit, sans attendre le chargement des menus, dans les navigateurs pratiquant le rendu progressif (Opera entre autres)

Merci Laurent pour cette analyse supplémentaire. Je n'avais pas pensé à ces avantages supplémentaires. Qu'en à mon hypothèse, la seule solution pour connaitre le résultat serait de faire un test d'évolution (ou pas) de la position d'un site sur une requête donnée en ne modifiant uniquement le code afin de voir si cela a un impact.

En outre, merci pour la réponse technique. Je l'implémenterai cet après-midi.

A+
PM

Laurent Denis a écrit :


Dans ce cas, les possibilités se réduisent :

Version simple :
- contenu en flux, avec marge gauche et marge droite pour réserver l'espace des colonnes
- colonne gauche en position absolue top:0;left:0 et largeur correspondant à la marge du contenu
- colonne droite en position absolue top:0;right:0 et largeur correspondant à la marge du contenu
(je suppose que c'est d'ailleurs la solution adoptée par le modèle auquel tu fais référence)

Merci Laurent,

La solution est parfaite. Je n'ai maintenant plus "qu'à" travailler sur l'intégration de la charte graphique. Beaucoup de boulot en perspective mais cela devrait en valoir la peine pour les raisons que j'ai avancé et celles que tu as ajouté.

A+
PM