Pour ceux qui ont du temps et des cheveux à perdre (casse-tête CSS)

Hello tout le monde,

Je crois pas qu'il l'ait posté ici, donc je vous indique ce petit exercice CSS sur le blog d'Aymeric Jacquet. Si vous aimez vous creuser le ciboulot, ça vaut le détour.

Pour ma part, j'ai bloqué sur la fin, et je me retrouve avec du texte qui chevauche. Pas réussi à trouver/imaginer le moyen de réaliser le design demandé. Argh. Mais vous serez sans doute plus imaginatifs que moi.

Pour ceux qui se lanceraient dans l'aventure : merci de ne pas divulguer de solution dans ce sujet ou dans les commentaires du blog ! (à la rigueur, par MP si ça vous chante).

Juste pour info (mais vous la retrouverez sur le blog), il faut réaliser ceci :


Mais moi je n'arrive qu'à ça ( ) :



Bon courage !

Rohhh l'autre ehhh, comment qu'il se fait aider.

AymericJ a écrit :
Rohhh l'autre ehhh, comment qu'il se fait aider.

Je réfute cette accusation mensongère :

Florent V. a écrit :
Pour ceux qui se lanceraient dans l'aventure : merci de ne pas divulguer de solution dans ce sujet ou dans les commentaires du blog ! (à la rigueur, par MP si ça vous chante).

Sylvain a écrit :
Bonjour à toi Florent V.
Je suis ravi que tu aies découvert Alsacréations.

Tiens, on dirait qu'un membre demande à être banni.

Sylvain a écrit :
Pour ton problème de chevauchement, tu dois poster dans le forum approprié, c'est à dire CSS et mise en forme

Oué oué... bon, c'est vrai que c'est quand même plus logique, alors on y va...

Je suis arrivé à ça sans trop de difficulté mais avec une astuce pas terrible
(testé avec IE6, Firefox et Opera)
Modifié par Alan (17 Jan 2007 - 21:47)

Je crois bien alan, que pour obtenir ce genre de trucs on est un obligé de faire appel à des astuces pas terribles.

C'est vraiment juste pour s'amuser à pousser les possibilités, même si c'est parfois très borderline.

... bon si les astuces pas terrible sont ok j'suis arrivé à ceci

mais ca ne supporte pas trop les différentes dimensions ... on doit pouvoir jouer sur les marges pour mieux cacher l'astuce
Modifié par kzone (17 Jan 2007 - 23:09)

Ben après ça dépend de ce qu'on appelle une astuce pas terrible. Si ça consiste à rajouter un élément vide dans une des deux colonnes pour faire « comme si » l'encart du milieu repoussait bien le texte des deux côtés, c'est un peu juste...

J'ose espérer qu'Aymeric à un peu plus sympa que ça à nous proposer.

Florent V. a écrit :
Si ça consiste à rajouter un élément vide dans une des deux colonnes pour faire « comme si » l'encart du milieu repoussait bien le texte des deux côtés, c'est un peu juste...

Bah justement c'était ça mon astuce pas terrible
Voir ici (ou bien là pour une version plus fluide)
Modifié par Alan (18 Jan 2007 - 00:14)

bonjour,

j'etais tombé sur cette page au debut de mon intéret pour le css .

http://www.alistapart.com/articles/crosscolumn/

tres interessant .


Pour l'idée de la bidouille de conteneur en float, une façon de faire grossir celui qui est vide , serait de lui reinjecter du texte avec un content:'<?php echo 'blabla' ?>'; de façon a ne pas polluer inutilement le html , IE serait encore hors jeux ....



bonsoir
Modifié par gcyrillus (18 Jan 2007 - 01:24)

.... ben j'étais parti sur un truc pareil , mais plus tordu et moins fonctionnel ( les miens ils jouent à cache - cache ..)
chat ...

... pas perché , t'as perdu on te vois le bour du nez !

Bon je mets le miens hors -jeu tout seul , il est pas concluant !!

ps :

a écrit :
j'etais tombé sur cette page au debut de mon intéret pour le css

surtout dans les exemples additional , l'exemple 4
Modifié par kzone (18 Jan 2007 - 02:09)

le 5

http://www.alistapart.com/d/crosscolumn/example5.html

Bonjour,

j'obtiens ça, à priori FF, IE5.5 à 7 ...


<edit> Crotte c'est une méthode sandwich, ça m'apprendra à lire avant de poster !!
Modifié par ghost (18 Jan 2007 - 03:59)

Florent V. a écrit :
Ben après ça dépend de ce qu'on appelle une astuce pas terrible. Si ça consiste à rajouter un élément vide dans une des deux colonnes pour faire « comme si » l'encart du milieu repoussait bien le texte des deux côtés, c'est un peu juste...

J'ose espérer qu'Aymeric à un peu plus sympa que ça à nous proposer.

Comment qu'il essaie de me mettre la pression lui.

AymericJ a écrit :
Comment qu'il essaie de me mettre la pression lui.

Surtout maintenant que j'ai trouvée une solution plus robuste que celle d'A List Apart, mais qui ferait grincer bien des dents sémantiques !

Pour les curieux (z'êtes pas obligés de regarder le code si vous voulez pas connaitre les rouages) : la version propre mais incomplète et la version complète mais pas propre.

Bonjour,

Arf, C'est jouer sur les mots !!

Pas de div vide mais un div double emploi ... Je l'avais hier, j'ai perdu une heure de sommeil pour rien

ghost a écrit :
Arf, C'est jouer sur les mots !!

Pas de div vide mais un div double emploi ... Je l'avais hier, j'ai perdu une heure de sommeil pour rien

Ben j'ai dit que c'était une solution pas propre. Par « pas propre », j'entends surtout : problèmes d'accessibilités (styles désactivés, navigateurs non graphiques, une partie des lecteurs d'écran --> Contenu en double).

Mais c'est une solution qui, par rapport à un bloc vide dimensionné en pixels ou même en EM, de mieux simuler la double adaptation du texte autour du flottant, quelle que soit la taille du texte.

Mais j'attends toujours mieux.

Je crois que la solution d'Aymeric est similaire d'après ce qu'il m'a dit. On verra.

Pour ma part j'avais envisagé de « remplir » le div vide par le même contenu que l'autre, mais j'avais trouvé ça « exagéré » pour les raisons que tu viens de donner Florent. C'est un peu comme pour les ombres : dupliquer le texte d'un titre pour obtenir un simple effet de présentation, c'est plus que limite

Je crois qu'avec des dimensions en EM et en laissant un peu de jeux, on peut facilement faire face à l'augmentation de la taille du texte. (mais c'est problématique de donner une hauteur si l'on ne sait pas à l'avance la longueur du texte...)
Ça serait quand même plus simple avec une image !

Je n'ai pas très bien compris dans ton exemple le rôle de la déclaration visibility:hidden et de la couleur verte pour le fond et le texte : le fait que #encart2 vienne le recouvrir n'est pas suffisant ?
Modifié par Alan (18 Jan 2007 - 13:48)

Alan a écrit :
Je crois qu'avec des dimensions en EM et en laissant un peu de jeux, on peut facilement faire face à l'augmentation de la taille du texte. (mais c'est problématique de donner une hauteur si l'on ne sait pas à l'avance la longueur du texte...)

Pour s'adapter à la longueur du texte dans un bloc de hauteur fixe (en EM, par exemple), il y a : overflow:auto.
Petit test de cette solution :
http://web.covertprestige.info/divers/ajblog/exo1c.html

Alan a écrit :
Ça serait quand même plus simple avec une image !

Oui, c'est d'ailleurs un truc à retenir pour ce genre de cas : mettre une image en encart entre deux colonnes peut permettre de briser un peu les lignes du design, ce qui est parfois bien utile.

Alan a écrit :
Je n'ai pas très bien compris dans ton exemple le rôle de la déclaration visibility:hidden et de la couleur verte pour le fond et le texte : le fait que #encart2 vienne le recouvrir n'est pas suffisant ?

Si si. La couleur verte doit être un reste des tests de mise en place de cette solution. Quant au visibility: hidden, c'est une « sécurité » intéressante en cas de problème de positionnement (on ne verra pas le contenu en double), et ça évite d'avoir un contenu en double avec certains agents-utilisateur (certains lecteurs d'écran qui l'interprètent à tort).