Position dans le flux ou pas ?

Bonsoir à tous,

Je lis actuellement le livre de Raphaël Goetter (CSS Avancés vers HTML5 et CSS3) que je trouve très bien fait, d'ailleurs j'apprend beaucoup de choses que je e connaissais pas ou que je n'osais pas utiliser.

Revenons à nos moutons, dans le chapitre 5 il mentionne le positionnement en CSS tabulaire et je voulais savoir si "il" fallait le remplacer par le positionnement en flottant ? (bien sûr IE6 et 7 devrons dans tout les cas être en flottant). Mais est-ce mieux d'utiliser table, table-cell, etc sur les navigateurs moderne plutôt que des flottant ? Si c'est le cas le changement risque d'être brutal au niveau de ma conception

Le référencement est t-il mieux pris en charge si c'est dans le flux (CSS tabulaire) que si c'est hors du flux (flottant) ?

N'hésitez pas à diree si vous utilisez le positionnement CSS tabulaire en remplacement du flottant et vos pour et contre, bref ce que vous utilisez le plus souvent et ce qui vous semble le mieux (selon un contexte peut-être ?)

Merci d'avance.

Cordialement,
R-transat
Modifié par R-transat (11 Jul 2012 - 00:12)

Bonsoir,

Je ne sais pas si ce sujet est bien à sa place ici. Je le verrai plutot dans le bar.

Sinon pour répondre à ta question, tu verras dans le livre que Raphael conseille d'utiliser le positionnement tabulaire.

Sur le dernier site sur lequel j'ai bossé, j'ai pas mal utilisé cette méthode pour ne pas avoir à calculer la taille de mes colonnes.
C'est vrai que ça te fait tout de suite quelque chose de propre, avec des hauteurs identiques, etc... Pas mal d'avantages donc, mais pas que. J'ai eu quelques souci au niveau des marges par exemple. Je souhaitais avoir des marges extérieurs plus petites que les autres, j'ai du bidouiller un peu.

Ceci étant j'ai tout de meme utilisé les flottants pour d'autres éléments, je pense que chacun à son utilité.

Enfin je précise que je n'ai pas développé ce site pour IE 7.

Pour le référencement, je pense que ça n'a rien à voir.

cordialement

aelor a écrit :

Pour le référencement, je pense que ça n'a rien à voir.

Je confirme, ça n'a absolument rien à voir. Quand je vois ce genre de questions j'ai l'impression que pour beaucoup, le référencement c'est un peu comme du vaudou.

Salut,

aelor a écrit :
Sinon pour répondre à ta question, tu verras dans le livre que Raphael conseille d'utiliser le positionnement tabulaire.
[…]Ceci étant j'ai tout de meme utilisé les flottants pour d'autres éléments, je pense que chacun à son utilité.

A mon avis, le bouquin en question n'a clairement pas pour prétention d'indiquer une méthode d'intégration en particulier. Ce type de positionnement possède clairement des inconvénients (d'ailleurs signalés par Raphaël) et il peut être préférable d'utiliser des positionnements à base de flottants dans certaines conditions. En fait, pour être honnête, assez souvent. C'est clairement un détournement de l'usage initialement prescrit (le comportement flottant n'est pas fait pour cela), mais ça fonctionne bien. Ces détournements sont monnaie courante dans l'histoire de l'innovation, et les récentes évolutions des CSS les prennent en compte. C'est bien, mais il y a une période de transition avant leur stabilisation finale.

aelor a écrit :
Pour le référencement, je pense que ça n'a rien à voir.

Je surconfirme ton avis et celui de jb_gfx : ça n'a rien à voir… à partir du moment où on ne croise pas les effluves…

audrasjb a écrit :

En fait, pour être honnête, assez souvent. C'est clairement un détournement de l'usage initialement prescrit (le comportement flottant n'est pas fait pour cela

N'était pas fait pour cela... en CSS 1.

audrasjb a écrit :

Je surconfirme ton avis et celui de jb_gfx : ça n'a rien à voir… à partir du moment où on ne croise pas les effluves…

Modifié par jb_gfx (11 Jul 2012 - 02:12)

Merci pour vos réponses. Je me doutais que ça n'avait pas d'impact sur le référencement mais je voulais en être sur.

Bonjour,

Pas d'impact sur le référencement, non. Par ailleurs, il est prouvé scientifiquement que ça ne rend pas sourd.

Sur le choix du type de positionnement:
- Il y a le Guide de survie du positionnement CSS qui donne de bons repères (si je peux m'envoyer des fleurs). Il ne prend pas en compte display:table et display:inline-block car écrit à la grande époque d'IE 6-7, mais pour bien comprendre les bases ça reste pertinent. Donc commencer par cette lecture.
- En CSS 2.1, display:inline-block est un autre outil disponible, c'est compatible IE8 et éventuellement compatible IE7 en bidouillant un peu (utilisation d'une astuce à base de hasLayout). Ça permet par exemple de faire des séries de petits blocs alignés qui se disposent automatiquement dans un conteneur de largeur fluide, c'est utile pour certains listings ou des images avec légende et d'autres usages sympa. Exploitable également pour mettre en page les principales colonnes d'une interface, mais ça n'est pas super adapté pour ça.
- Toujours en CSS 2.1, display:table-cell est encore un outil, compatible IE8+, qui permet de faire la même chose qu'un tableau de mise en page sans le défaut des tableaux de mise en page (à savoir qu'on n'utilise pas les éléments TABLE, TD, etc., qui signalent des données tabulaires et donc corrompent la sémantique de ton document, avec les risques pour l'accessibilité que ça comporte). Une limite côté mise en page: pas d'équivalent CSS à colspan et rowspan. Autre chose, côté mise en page: la mise en page de type tableau (avec ou sans TABLE côté HTML) a des avantages (colonnes de même hauteur, calcul dynamique de la largeur des colonnes en fonction du contenu) mais aussi des inconvénients (calcul dynamique de la largeur des colonnes en fonction du contenu — oui c'est aussi un désavantage parfois — et nombre de colonnes figé).
- Enfin, en CSS3, il y a deux outils qui sont en cours de spécification ou d'implémentation dans les navigateurs: Flex Box et Grid Layout. Le premier est utile pour des éléments à disposer de manière dynamique sur une seule ligne ou colonne, avec pas mal de possibilités sympa. Le deuxième permet de définir des grilles de mise en page et d'y placer des contenus de manière arbitraire, avec une forte indépendance entre la structure HTML et la mise en page. Ces deux outils sont super mais pas utilisables avant des années pour des sites web généralistes.
Modifié par fvsch (11 Jul 2012 - 11:26)

Deplacons cela au bar

pour ma part j suis l avis d audrasjb.
Les flottements vieux comme le monde fonctionnent bien a condition de retablir le flux juste apres

sinon pour se passer du flottant,on peut se servir de inline-block(table cell pour les donnees tabulaires de preference) sinon c est dangereux en terme de comp))

ou alors prendre exemple sur alsa-->regardez le header du forum

ils utilisent un conteneur relatif,laissent leut logo dans le flux et placent leur menu en absolu

en gros rester dans le flux par defaut en jouant avec les ancetres positionnes permet deja de faire beaucoup

Un des avantages du positionnement tabulaire c'est par exemple une sidebar et la zone de contenu feront la même hauteur (en fonction du contenu de l'un ou de l'autre). Alors qu'avec du positionnement flottant il faut définir en CSS la div parente de sidebar + content un background, bon c'est pas bien méchant mais si la sidebar et le content on des effets d'ombre porté (sur le côté par de problème mais sur le top et le bottom c'est plus embêtant on se retrouve encore avec 2 div supplémentaires; un jour cette époque sera révolue \o/).

Tout ça pour dire que pour moi c'est les principaux avantage du positionnement tabulaire, l'adaptation de la hauteur du bloc par rapport à son contenu.

phpCbien a écrit :
table cell pour les donnees tabulaires de preference

Ça c'est la bêtise du jour.
Tu pensais peut-être à autre chose et tu te seras mal exprimé?

Bien entendu display:table-cell n'est absolument pas à réserver aux données tabulaires. Les données tabulaires seront, fort logiquement, dans un tableau, dont les éléments TD sont par défaut en display:table-cell. Ça ne veut pas dire que display:table-cell est à réserver aux données tabulaires (de même que si l'or brille, tout ce qui brille n'est pas or ).
Modifié par fvsch (11 Jul 2012 - 12:57)

Oui fvsch

je lis le bouquin de raphael et cette valeur de display est geniale

je lui ai envoye un mail si eventuellement je pouvais positionner un site integralement selon table-cell et de poser une classe conditionnelle sie ie<8 pour utiliser les flottements, il m a repondu que Oui

Apres mieux vaut faire des tests unitaires je pense.

Et puis zut pour les effets dombrages ou arrondis des parents contenant des flottants c deja galere car ca sort du flux

c'est degeu tout ca mais pour finir:

Quelqun a t il essaye de faire une mise en page quasi totale avec ce type de pos?
Si oui,quelles genres de contraintes avec vous rencontre?

Perso,je pense qu on doit sy mettre maintenant !
c'est chiant,je suis en vacances,
Modifié par phpCbien (11 Jul 2012 - 14:27)

Bonjour,
en plus de tout ce qui a été dit (que j'approuve), et pour ma part j'utilise table-cell pour tout les navigateurs excepté IE7- et inline-block (avec display:inline + layout + ajout de commentaires vides pour éviter l'espace horizontal supplémentaire) pour IE7- quand je peux avoir un rendu un peu dégradé pour IE7 pour les grand blocs de structuration.
L'inline-block (contrairement au flottants) permet d'utiliser la propriété vertical-align, tout comme un élément en table-cell.
Je réserve les flottants pour ce à quoi ils ont été prévus à l'origine ou pour placer
des éléments aux extrémités droites, voire pour quelques autres cas particuliers.

Autre avantages possible du table-cell en plus de ceux cités précédemment : la possibilité d'ajouter des "marges" (ou gouttières) avec la propriété border-spacing sur le bloc parent des éléments en table-cell dont le display calculé passe à "table" de manière transparente (pas besoin de le déclarer).

Autre inconvénient :
le positionnement relatif d'un élément en table-cell sous IE (me souviens plus des versions) n' est pas pris en compte dans le positionnement absolu des éléments enfants.
Modifié par Hermann (11 Jul 2012 - 14:30)

Bonjour,

Pour le déplacement vers le bar, c'est non. C'est bien un sujet CSS.


phpCbien > merci de faire attention à la façon dont tu t'exprimes (on ne te demande pas de parler vieux françois, mais si tu pouvait éviter d'être vulgaire ça serait cool) et dont tu écris (je te rappelle que certains visiteurs peuvent utiliser des lecteurs d'écran ou des traducteurs automatique qui ne comprendrons pas vraiment des abréviations en pagaille...).

phpCbien a écrit :

Quelqun a t il essaye de faire une mise en page quasi totale avec ce type de pos?
Si oui,quelles genres de contraintes avec vous rencontre?

Oui (voir mon message précédent) mais je n'ai pas fait le choix de passer par le display:table.htc pour IE7- car ça m'a posé par mal de problème...
Je pense qu'il faut réserver l'utilisation de table-cell aux grands blocs principalement ou lorsque on a besoin d'avoir 2 colonnes de même hauteur bien sûr (ou carrément utiliser un tableau de mise en forme si nécessaire).