CSS3 & Positionnement, libération des blocs static?

Bonjour,

Mon anglais ne me permet pas vraiment de suivre les propositions du futur CSS3 concernant le positionnement des blocs mais j'aimerais bien qu'ils débrident les blocs static (positionnement par défaut) :

Explications :
Imaginez que le positionnement par défaut des blocs soit de se suivre sur la même ligne (tout en étant toujours de type bloc), qu'ils n'occupent que la place de leur contenu.
Une propriété break-after: yes/no (no par défaut) permettrait de passer à la ligne après le bloc de notre choix.
Les mises en page à colonnes dans le flux serait alors un jeux d'enfant...

Le principe : "1 bloc, une ligne" me semble profondément dé***e et tue dans l'oeuf le principe même des blocs CSS dans le flux...

Il faut débrider le positionnement static!


Il y aurait d'autres points à rationaliser (tailles en %, positionnement relatif devrait une être option des autres positionnements et non un positionnement à part entière)...


Le CCS à pour objectif de tourner la page des bidouilles (mise en page en tableau).

Pourtant, aujourd'hui, on bidouille toujours avec un modèle de positionnement de base mal foutu :
Le float est un outil de PAO pour insérer un encart dans un article (photo, petit bloc de texte) qui "pousse" les textes alentours mais pas les blocs! Il n'est pas de le flux...
Il n'est pas adapté à la mise en page. Cela donne le retour de bidouilles non satisfaisantes et non sémantiques : bloc spacer (clear both).

Voilà, je n'ai pas (vu) eu l'impression d'amélioration dans le CSS3 dans ce domaine. Me trompe-je?
Modifié par Pixweb (09 Mar 2011 - 12:43)

Bonjour,

Le mode par défaut des blocs <s>est relatif</s> à son dernier parent positionné, et ensuite positionné dans le flux par ordre d'apparition.

Il y a des avancées en matière de positionnement CSS3, la mise en colonne (column-count), la mise en page via des grilles, et le flex box-model.

Ce ne sont pas vraiment les standards qui sont problématiques/inexistants mais leurs implémentations au sein des (du ?) navigateur(s).

EDIT : Méa culpa , le positionnement est bien static par défaut.
Modifié par rs459 (13 Mar 2011 - 16:58)

Ce que j'ai compris de CSS3 c'est que ça apportait de nouvelles options mais pas vraiment de changement des comportements précédents.

Concernant le positionnement float, sache que tu n'est pas toujours obligé d'ajouter un div "clear:both" non sémantique. Tu peux d'appliquer "clear:both" a une div située après tes éléments flottants.

J'utilise beaucoup d'éléments flottants dans mes mises en pages et je n'ajoute que rarement du code non sémantique.

Par contre c'est vrai que je ne vois pas beaucoup l'utilité de forcer les blocs a prendre la largeur d'une ligne entière.

Pixweb a écrit :
Imaginez que le positionnement par défaut des blocs soit de se suivre sur la même ligne (tout en étant toujours de type bloc), qu'ils n'occupent que la place de leur contenu.

Voir du côté de display:inline-block (CSS 2.1).

Pixweb a écrit :
Une propriété break-after: yes/no (no par défaut) permettrait de passer à la ligne après le bloc de notre choix.

Ça par contre on n'a pas tout à fait ce qui permettrait de le faire.
Bien sûr, plutôt que display:inline-block tu pourrais aussi utiliser float:left qui a des effets en partie similaires, et utiliser un clear:left sur l'élément qui doit passer à la ligne. (CSS 2.1 encore.)

Pixweb a écrit :
positionnement relatif devrait une être option des autres positionnements et non un positionnement à part entière

En pratique ça marche déjà beaucoup comme ça.

Pixweb a écrit :
Cela donne le retour de bidouilles non satisfaisantes et non sémantiques : bloc spacer (clear both).

Peut-être. Mais il faut bien avoir à l'esprit que la mise en page n'est PAS sémantique à la base. Utiliser uniquement des propriétés CSS, ou rajouter un <div style="clear:both"></div> dans le code HTML, du point de vue de la sémantique HTML c'est exactement la même chose: aucune incidence. Ne pas avoir à modifier la structure HTML c'est bien, mais ça n'est généralement pas une question de sémantique.

Pixweb a écrit :
Voilà, je n'ai pas (vu) eu l'impression d'amélioration dans le CSS3 dans ce domaine. Me trompe-je?

Déjà, tu n'as pas l'air de connaitre CSS 2.1 sur le bout des doigts.
Pour info, Raphael Goetter sort un livre dans quelques jours sur le sujet, chez Eyrolles.

Quelques infos plus générales:

Notes sur le positionnement en CSS 2.1

1. Je suis d'accord pour dire que float n'est pas prévu à la base pour du positionnement de bloc. On peut voir à ce sujet la définition de float en CSS 1. Cependant, CSS 2, qui résulte en partie d'un travail pour l'ajout de propriétés de positionnement à CSS, redéfinit en partie float et en fait un outil un peu plus polyvalent (destiné aux «boites», pas uniquement aux images ou bouts de texte). Ensuite, si on a beaucoup utilisé float c'est parce que les autres outils de positionnement en CSS 2 n'étaient pas adaptés à certains besoins, ou pas implémentés.

2. Le positionnement absolu est parfois utile. Il faut savoir l'utiliser efficacement (positionnement par rapport aux limites d'un conteneur, utilisation des coordonnées pour donner une dimension à l'élément...) et à bon escient.

3. Il y a pas mal de choses à voir du côté de valeurs de display. Notamment inline-block et table. Ça n'est pas la panacée du positionnement, mais c'est intéressant et ça permet pas mal de choses.

Du côté de CSS3

- La propriété box-sizing pour changer de modèle de boite à la demande. Utilisable dès aujourd'hui (IE8+).

- Le module Multi-column Layout se limite à certains cas d'usages mais peut s'avérer pratique. Implémenté dans Gecko et Webkit.

- Le module Flex Box, plutôt conçu pour des éléments d'interfaces que pour de la mise en page «magazine». Il a pas mal évolué dernièrement (refonte en cours), et il faut peut-être attendre que ça se calme pour l'utiliser activement. La première version est implémentée (au moins en partie) dans Gecko et Webkit.

- Il manque un module de mise en page «globale», dans une grille de mise en page. À l'heure actuelle il y a 3 propositions en ce sens (dernières mises à jour en 2007, 2010 et 2011), mais on ne sait pas encore laquelle sera retenue. Ça sera peut-être un nouveau module qui s'inspirera de ces trois propositions. Pour ma part j'aimerais beaucoup voir des designers experts grilles de mise en page (Khoi Vinh par exemple) et des experts en design d'interfaces applicatives travailler avec des experts CSS sur le sujet. Les solutions proposées ont toutes des mérites, mais elles ressemblent parfois à des réponses à la recherche d'un besoin. Travailler à partir de plusieurs cas d'usages précis, inspirés des bonnes pratiques du print et des besoins des applications web, ça serait bien.
Modifié par fvsch (11 Mar 2011 - 16:32)

Il y a aussi la proposition CSS Regions (pdf) de Adobe a rajouter à la liste. Apple a fait ses commentaires par dessus.

Visiblement tout ça vient d'être discuté à une réunion et une ébauche de plan est proposée. Je suis ultra en attente de ce qui sortira de ça vu que je suis une quiche pour créer un layout avec CSS. Et j'espère qu'on aura au moins une implémentation fin 2011 (mais je rêve sans doute).

(ps: premier post depuis 5 ans !)
Modifié par rik24d (11 Mar 2011 - 17:11)

Content de voir que le sujet était à l'agenda de la récente réunion du CSS WG. Il semblerait que la finalisation de CSS 2.1 (zéro bugs restant) va permettre d'avancer sur CSS 3.

fvsch a écrit :

Déjà, tu n'as pas l'air de connaitre CSS 2.1 sur le bout des doigts.
Pour info, Raphael Goetter sort un livre dans quelques jours sur le sujet, chez Eyrolles.

Là dessus, je suis entièrement d'accord avec toi...
J'ai déjà acheté et lu le livre de M. Goetter (3éme tirage 2006).

Ce qui est grave, c'est qu'après de nombreuses heures passées sur le sujet, je ne le domine toujours pas.
Soit je suis le dernier des #### soit il y a un problème avec cette norme qui est sensée être utilisée par toute la planète...
Le CSS me donne l'impression d'un truc qui doit être dur à comprendre pour que seul ceux qui passent leur journées dessus puissent l'utiliser...
Pour moi, il est mal foutu et pas démocratique... pour un réseau qui devrait l'être...

J'ai l'impression que CSS3 va nous apporter des ombres et des box aux coins arrondi Super! (ok, j'exagère) tout en concevant un modèl de base à revoir...
Alors qu'il devrait apporter un modèl de positionnement naturel et intuitif, qui coule de source...
Un langage planétaire comme le HTML/CSS devrait être limpide et trivial comme un jeux cube, du moins, à un premier niveau. Après, qu'il y est des tas de options/fonctions "avancées" pour aller plus loin, ok.

Que ce langage soit inapte à faire simplement, naturellement, rapidement, sans hésitation, une mise en page simple comme : un header, 3 colonnes (même deux!) et un footer me démonte littéralement!

Les gabarits que l'on trouve (livre cité, alsacreations.com etc) donnent l'impression qu'on a réussit à faire tenir "tout ça" avec des bouts de ficelles, en rusant (déjà!) avec le langage, que "ça devrait marcher à peu près dans tout les cas" alors qu'on en ai juste à la première ébauche!
Si le CSS était bien pensé, il n'y aurait PAS de gabarits sur le web! Leurs présence est un avoeux de dysfonctionnement.

J'ai été webmaster un temps à l'époque des tableaux HTML (1999), j'ai "bouffé de l'ASP, du dreamweaver et du photoshop (ou l'inverse...), je ne pense pas être complètement neuneu dans le domaine même si je suis plus (+) graphiste que développeur dans l'âme.

Bon j'arrête là pour aujourd'hui, et je retourne me battre contre les CSS qui devraient pourtant être mes alliés...

bonjour,

le probleme vient peut-être aussi des navigateurs et que la mise en forme, ce n'est pas si simple que ça ...

Heureusement, le w3c tente de normalisé tout ça.
La norme est utile, n'empêche qu'un forgeron qui ne forge pas ou peu ou toujours sur la même enclume ...

CSS offre beaucoup de possibilité et a des limites, Limites et possibilités différentes d'un navigateur ou codage du document a l'autre. CSS n'est pas un langage de programmation mais est interprété et est peut-être surestimé.

faire des ronds, des effets de transitions, ou autres effets graphiques, c'est amusant, mais etait-ce au feuille de style de s'occuper de ça ?

En fait je ne comprends pas vraiment ce que tu souhaite voir apparaitre de plus . Je lis de gauche a droite , phrases par phrases, etc ...(d'autres c'est de droite a gauche ou de haut en bas ... ) Si on mélange tout ça je vois pas trop comment je vais suivre dans le bon sens ce que je lis et repérer les différents contenus d'une page, pareil pour construire le document, je ne le considere pas comme un fourre-tout en vrac.

sinon pour reprendre ce qui est dit plus haut:
float, display:inline-block; (ou inline-table ou run-in, ...) semble prévoir en tout ou partie ce que tu recherches.

Les pseudo :after/:before permettent aussi de se dégager ou englober les flottants par exemple.

Pour les gabarits, ce sont a mon avis en premier lieux des outils de démos relativement simple a appréhender et a retravailler, c'est du libre service : ).

gentiment,
GC

Pixweb a écrit :

J'ai déjà acheté et lu le livre de M. Goetter (3éme tirage 2006).

En passant très rapidement, je pense que Florent parle du livre qui va sortir dans quelques jours : "CSS avancées - vers HTML5 et CSS3" et non du livre "CSS 2 pratique du design web" qui a déjà quelques années au compteur

Pixweb a écrit :
Que ce langage soit inapte à faire simplement, naturellement, rapidement, sans hésitation, une mise en page simple comme : un header, 3 colonnes (même deux!) et un footer me démonte littéralement!

Inapte? C'est aller un peu vite en besogne.

<div id="header">…</div>
<div id="left">…</div>
<div id="right">…</div>
<div id="footer">…</div>

#header {
  background: #CCFFFF;
}
#left {
  display: table-cell;
  width: 25%;
  background: #FFCCFF;
}
#right {
  display: table-cell;
  width: 75%;
  background: #FFFFCC;
}
#footer {
  background: #FFFFCC;
}

Rien de bien compliqué.

Ce qui explique qu'on a parfois des solutions plus compliquées que ça, c'est tout simplement que les implémentations dans les navigateurs n'ont pas toujours suivi. Même aujourd'hui la solution ci-dessus va poser problème à IE7, car elle n'est pas implémentée dans IE avant la version 8. Donc on va souvent utiliser du positionnement flottant ou absolu à la place du display:table-cell, ce qui implique de prendre en compte des spécificités ou limites de ces positionnements.

Si on prend CSS 2.1, la spécification n'est pas parfaite (elle est un peu légère sur le positionnement), mais les outils essentiels sont là. Ce qui rajoute de la complexité, c'est la multiplicité des logiciels clients, et les retards de certains (10 ans pour implémenter des parties essentielles de la spécification).

Il faut aussi garder à l'esprit qu'une page web est une interface informatique, pas un document figé, ce qui rajoute un certain nombre de contraintes que l'on n'a pas dans un logiciel de graphisme.

PS: je parlais effectivement du prochain livre de Raphael.
Modifié par fvsch (12 Mar 2011 - 01:05)

Raphael a écrit :
En passant très rapidement, je pense que Florent parle du livre qui va sortir dans quelques jours : "CSS avancées - vers HTML5 et CSS3" et non du livre "CSS 2 pratique du design web" qui a déjà quelques années au compteur

Oui c'est bien ce "vieux" livre que je médite...
Le HTML5/CSS3 ne m'intéresse pas : Il n'est pas officiel ni bien supporté.
Le CSS2 est bien assez touffu et tordu pour me "distraire" encore quelque temps...

fvsch a écrit :

Inapte? C'est aller un peu vite en besogne.

<div id="header">…</div>
<div id="left">…</div>
<div id="right">…</div>
<div id="footer">…</div>

#header {
  background: #CCFFFF;
}
#left {
  display: table-cell;
  width: 25%;
  background: #FFCCFF;
}
#right {
  display: table-cell;
  width: 75%;
  background: #FFFFCC;
}
#footer {
  background: #FFFFCC;
}

Rien de bien compliqué.
...

Euh, pourquoi j'ai pas vu cette solution dans le chapitre "positionnement" du livre de Raphael, ni dans les 3 tutos d'Alsa (guide de survie, initiation I et II), ni dans les gabarits près à l'emploi??? Mauvaise lunettes?
CSS nous sortirait-il un lapin de son chapeau?

Je n'en démords pas :

1) Le w3c (et son CSS worsing group ) a pondu un truc tordu. Pourquoi? Certainement parce qu'ils se sont dit : "Bon, les webmasters du monde entier se sont fait des noeuds au cerveau à mettre en page des PSD avec des balises HTML pas faites pour ça pendant une décennie.
Si on leur pond un truc simple bien foutu, avec des propriétés qu'on l'on peut utiliser pour ce qu'elles sont sans avoir à trouver une solution de comportement. Eh ben les webmasters du monde entier, y vont pas être contents, ils vont avoir l'impression de plus servir à rien... si tout le monde peut faire son site tout seul...

Et là, les gars du worsing group, il se sont dit : "On va refaire un truc bien tordu..." Qu'est-ce qu'on pourrait bien trouver?....
Attends, regardes ,j'ai un idée: Imagines que les blocs, ils puissent n'y en avoir qu'un par ligne, ils seront bien emmerdé les webmasters du monde entier. T'as déjà vu un site qu'avec des lignes superposées toi?!
Ouais super! On pourrait rajouté une histoire de flux pour les embrouiller encore plus. Les blocs se chevaucheraient les un et autres. Y vont bien se casser la tête, les webmasters du monde entier!
... Et des float qui seraient à moitié existant, à moitié inexistant! Ouais super! On commence à tenir un truc là!
Ouais pas mal, mais faut surtout pas qu'on s'éloigne de cette ligne, faut pas qu'on revienne à des trucs simples et logiques...

Là, ils seront bien obligés de recommencer leur gymnastique cérébrale et donc, ils seront à nouveau contents les webmaster du monde entier. Ils auront à nouveau l'impression qu'ils sont indispensables.

Un web où une maîtresse de primaire ne peut pas expliquer à ses élèves comment faire une page perso avec les mêmes structures logiques que les webmaster pros (qui eux, iront bien plus loin en design, mise en page, fonctionnalité...) n'est pas un web ouvert...

Bon, aller, je vais pondre un spec CSS3 pour ce soir minuit, spec diffusée aux équipes développement browser lundi matin, et en recommandation pour le 1er septembre 2011 :

1) Nos chers blocs : A la queue leu leu. Et Hop! que ça saute!

<div>
  <div id="header">Titre, sous titre, slogan, flux RSS, connexion...</div>
  <div id="nav-gauche">Tous les liens en liste ...</div>
  <div id="corps">Bla bla bla...</div>
  <div id="nav-droit">Pub, réseaux sociaux ...</div>
  <div id="pied">Mentions légales, plan ...</div>
</div>
#header {
break-after= yes;
width: 100%;
}
#nav-gauche {
width: 160px;
height: 100%;
}
#corps {
width: 100%; /* 100% de la place qui reste en les 2 blocs nav */
height: 100%;
}
#nav-droit {
break-after= yes;
width: 160px;
height: 100%;
}
#pied {width: 100%;}

Et hop! Une mise en page, Une! pour la table 3 et en 3 coups de cuillère à pot. Robuste, simple, logique, (supportée par IE 6 ... heu??? T'es sûr là? Non pas trop...) et compréhensible par un enfant de 6 ans.
Tu veux 6 colonnes? No problème... Je t'en mets 28 si tu veux...

2) Flux
Plus de "flux pas fux" mais des couches comme sous Photoshop, Gimp... :
Tout les blocs sont sur le layer 0 par défaut. Plus aucun chevauchements. Ni en float, ni en absolute. Ils se poussent les blocs! Si un absolute vient sur les "terres" d'un static (position non définit), le static se bouge...
Idem float... Qu'on garde (satanés float) UNIQUEMENT pour les "encarts PAO."
Pour superposer 2 blocs --> layer 1, 2, 3 ... SVP. Merci monsieur.

3) Taille
width 100% --> Donne 100% du viewport (fenêtre browser) ou premier parent dimensionné.
Height 100% Pareil

Débordement ? Dans un bloc dimensionné. --> Par défaut le bloc grossit avec son contenu... Pour suivre le HTML.

4) Alignement
2 propriétés pour le texte (et autres inline) (X, Y), 2 propriétés pour les blocs :

text-align-x: center
text-align-Y: bottom

bloc-align-x: right
bloc-align-y: center

Basta.


Pour les testes, direction les écoles de CP, si les gamins digèrent ça en 5 min, c'est validé, les webmasters du monde entiers, devraient comprendre...

Bon, je sais, c'est un peu léger comme spec, mais ça me semble bien plus
SAIN comme point de départ...

Bon, je crois que c'est tout pour ce soir...

Pixweb a écrit :
Euh, pourquoi j'ai pas vu cette solution dans le chapitre &quot;positionnement&quot; du livre de Raphael, ni dans les 3 tutos d'Alsa (guide de survie, initiation I et II), ni dans les gabarits près à l'emploi???

Pour la raison que j'ai donnée dans mon message précédent.
Cette solution est spécifiée depuis 1998. Elle n'a été implémentée dans Internet Explorer qu'en 2009. Et même aujourd'hui on doit encore faire des sites compatibles avec des versions d'Internet Explorer datant d'avant 2009 (IE7, voire IE6).

Pixweb a écrit :
1) Le w3c (et son CSS worsing group ) a pondu un truc tordu.

Non. CSS 2 n'est pas parfait, notamment du point de vue du positionnement, mais ça reste très correct. Appeler ça «un truc tordu» est une grossière exagération.

Je trouve ceci plutôt bien fichu:
- display:block (par défaut) met les blocs les uns sous les autres;
- display:inline-block met les blocs les uns à côté des autres sur la même ligne (d'où le "inline");
- display:table-cell met les blocs les uns à côté des autres comme des cellules de tableau.

Pixweb a écrit :
Attends, regardes ,j'ai un idée: Imagines que les blocs, ils puissent n'y en avoir qu'un par ligne, ils seront bien emmerdé les webmasters du monde entier.

En fait on est dans une situation très différente: il y a plusieurs moyens pour placer les blocs sur une même ligne. Sans compter le positionnement absolu (pas fait pour ça) ou display:inline, j'en compte trois. Les vrais problèmes qu'on a sont les suivants:
- On a l'embarras du choix (et c'est pire si on compte CSS3). Et avoir trop de choix, ça rend les gens ronchons.
- Chacune de ces trois méthodes a ses caractéristiques et limites propres.

Donc oui, c'est plus compliqué ça pourrait l'être dans un monde idéal. Les raisons de ces imperfections n'ont rien à voir avec le sadisme supposé, et je pourrais les expliquer mais ça se résumerait à une série de rappels au bon sens.

Pixweb a écrit :
On pourrait rajouté une histoire de flux pour les embrouiller encore plus.

Le flux est essentiel pour construire des documents accessibles, et qui puissent être affichés sur des anciennes versions des navigateurs par exemple. Une page web est un document linéaire: il y a un flux du document, et au niveau des paragraphes ou ligne de texte un flux du texte. Par défaut, les éléments apparaissent sur la page en fonction de leur ordre d'apparition dans le flux, de même pour les mots dans les paragraphes. Je trouve ça plutôt sympa comme fonctionnement. Tu préfères un système ou tout est dans tous les sens et ne respecte aucun ordre? Tu aimes te faire embrouiller toi.

Une fois que le principe du flux est posé, on peut aussi s'intéresser aux propriétés qui permettent de faire sortir un élément du flux, ce qui est utile ponctuellement. On a donc, en CSS 2.1:
- position:absolute et position:fixed qui font sortir «totalement» l'élément du flux;
- float qui fait sortir l'élément du flux au niveau de la ligne de texte (pas au niveau global du document), pour l'aligner à gauche ou à droite.

Un fonctionnement de base solide, et des outils intéressants pour y déroger. J'ai envie de dire que c'est de la bonne conception logicielle tout ça.
En CSS3, il y aura d'autres outils plus poussés pour déroger à ce principe du flux.

Pixweb a écrit :
Et hop! Une mise en page, Une!

Tu utilises 10 déclarations CSS pour faire la même chose que ce que je fais en 4 déclarations. Effectivement, c'est beaucoup plus simple.
Par ailleurs, ton utilisation des hauteurs en pourcentages n'est juste pas implémentable. Tu supposes aussi que tes éléments doivent prendre toute la hauteur du viewport (zone de visualisation du navigateur), sans le demander explicitement dans ton code, et alors même que ce principe est contraire au fonctionnement de la plupart des pages web.

Si les spécifications sont un peu moins simple qu'on le voudrait, c'est aussi parce qu'elles doivent prendre en compte des dizaines de milliers de cas de figure, et que ça ne peut pas se résumer à «dans le doute, merci de lire mes pensées et de faire ce que je veux». Oui, c'est frustrant, mais c'est normal.

Pixweb a écrit :
Plus de flux (...) Ils se poussent les blocs!

Si les blocs se poussent, c'est qu'il y a un flux.
Je crois que tu as fait un bon gros blocage sur ce concept.

Après, CSS ne fonctionne effectivement pas comme tu le souhaiterais. Désolé. Si le langage était repensé complètement aujourd'hui, il y aurait sans doute pas mal de choses différentes. Ça serait un peu plus simple, mais pas beaucoup plus abordable.
Même ce que tu suggères n'est pas aussi simple que tu le penses; quand c'est ce dont on a envie, quand ça ressemble à ce qu'on connait déjà, une solution imaginaire semble tout de suite extrêmement simple. Si on ajoute à ça les contraintes d'implémentation (on ne peut pas implémenter toutes les super idées qu'on a, il faut faire des concessions à cause de difficultés d'ingénierie logicielle), ta solution rendue réaliste aurait alors quelques atouts, mais ça ne serait pas radicalement meilleur... et ça demanderait à nouveau un apprentissage rigoureux.

Au sujet de la simplicité, prenons les choses autrement:
1. N'importe qui peut créer un document Word, taper du texte au kilomètre, peut-être essayer deux-trois options de mise en page (en évitant les colonnes ou zones de texte, parce que là ça devient vite compliqué), mettre du texte en gras ou en grande taille et en rose. Par contre, si on veut faire un document un peu bien fichu, il faut avoir des compétences en mise en page.
2. De même, n'importe qui peut créer et publier des pages web simples. On peut même les faire dans Word et les enregistrer en HTML. La publication de pages web est vraiment, réellement accessible à tous (le plus compliqué pour les néophytes est la question de l'hébergement). Par contre, si on veut construire une interface de site web, là aussi ça demande des compétences précises.

Moi il n'y a rien dans ce fonctionnement qui me choque. Imaginer qu'on puisse créer un système tellement simple qu'il permet de faire des choses précises sans acquérir une compétence, c'est à mon avis se bercer de douces illusions. Ce qu'on peut faire, par contre, c'est mettre en place des modèles réutilisables -- et pour ça il suffit d'aller ouvrir un blog sur wordpress.com et de choisir un des thèmes proposés (entre autres exemples).

Pixweb a écrit :

Euh, pourquoi j'ai pas vu cette solution dans le chapitre &quot;positionnement&quot; du livre de Raphael

Peut-être parce qu'il date originellement de 2005 et que ce positionnement n'était alors pas reconnu du tout par IE.

Pour ce qui concerne le livre "CSS avancées", as-tu regardé le sommaire avant de te faire ton avis sur son contenu en HTML5 et CSS3 ?
Il évoque justement surtout les techniques CSS avancées (CSS 2.1, positionnements, médias, etc.) et n'est pas un nouveau livre dédié à CSS3 et HTML5.
Modifié par Raphael (13 Mar 2011 - 05:22)

display:inline-bloc est effectivement le comportement que je cherchais ... Du moins en théorie :

En effet, il est difficilement utilisable car il affiche un espace entre 2 blocs!!!
Sauf à coller, dans le code HTML, les 2 DIV comme ceci : <div></div><div></div>... Ce qui rend le code HTML illisible... Bien joué les gars! Quand je vous dis le CSS est avant tout jeux de patience genre case-tête chinois...
Il existe bien 2 3 bidouilles (commentaire HTML, insert PHP, police à zéro) mais aucune n'est vraiment satisfaisante.

Ce positionnement permettrait pourtant d'envoyer aux oubliettes nos chers float...

Ma question reste donc entière : Le W3C sait-il que des millions d'intégrateurs utilisent, chaque jour, le CSS pour faire des mises-en-page web???
A quoi cela sert-il de pondre des positionnements inutilisables en pratiques???

Bon, reste : table-cell que je n'ai pas encore étudié... mais je suis sûr qu'il va encore y avoir un TRUC pour m'empêcher de l'utiliser ...

J'aime bien le CSS, c'est un truc sensé te permettre de faire des mises en page, mais dans la pratique il te fout tout le temps des bâtons dans les roues...

Dites, ça doit être bien le métier de maquettiste PAO? : T'as déjà vu Xpress se rebeller et qui dire "Non! Je ne le mettrais PAS là ton bloc! Démerdes toi, trouves une ruse...

PS Je n'ai pas encore jeté un œil au nouveau livre de Raphaël...
Modifié par Pixweb (24 Mar 2011 - 16:32)

Pixweb a écrit :
display:inline-bloc est effectivement le comportement que je cherchais ... Du moins en théorie :

En effet, il est difficilement utilisable car il affiche un espace entre 2 blocs!!!
Le W3C sait-il que des millions d'intégrateurs utilisent, chaque jour, le CSS pour faire des mises-en-page web???

Il n' y a pas vraiment de surprise a ce niveau, c'est le comportement normal des element ayant un formatage de type inline-block (les input des formulaires ou les images par exemples).

Il est moins dangereux de jouer sur le letter-spacing ou word spacing que bidouillé des marges négatives , eliminé l'indentation du code a l'edition ou via js ou un font-size à zero.

Pour table-cell, tu y retrouvera le comportement des td dans un tr (pas de retour a la ligne sans en passer par un autre conteneur mais la possibilité d'un alignement vertical du contenu ... par exemple ... ).

Une page web ce n'est pas une maquette graphique, il faut faire avec et admettre cette différence , d'autant que chaque navigateur aura ses différences ou défauts.

cordialement