27500 sujets

CSS et mise en forme, CSS3

Pages :
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. Smiley smile

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 :
upload/2043-un-joli-blo.png

Mais moi je n'arrive qu'à ça ( Smiley bawling ) :
upload/2043-test.png


Bon courage ! Smiley lol
Bonjour à toi Florent V.
Je suis ravi que tu aies découvert Alsacréations.

Pour ton problème de chevauchement, tu dois poster dans le forum approprié, c'est à dire CSS et mise en forme. Des membres très gentil (dont je fais pas souvent parti) t'aideront sans doute mieux que ce forum où reignent les jeudîstes et les modos-sados.

Bonne continuation Smiley lol


(Ce qu'il fallait comprendre: c'est bien trop compliqué pour moi, je n'ai pas d'idée Smiley smile )
Modifié par Sylvain (17 Jan 2007 - 20:17)
AymericJ a écrit :
Rohhh l'autre ehhh, comment qu'il se fait aider. Smiley smile

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).

Smiley fache
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. Smiley lol

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

Oué oué... bon, c'est vrai que c'est quand même plus logique, alors on y va...
Je suis arrivé à ça upload/4496-jeuxalsa.png sans trop de difficulté mais avec une astuce pas terrible Smiley confused
(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. Smiley smile

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 upload/8937-exosCss.jpg
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. Smiley lol
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 Smiley lol Smiley biggol
Voir ici (ou bien pour une version plus fluide)
Modifié par Alan (18 Jan 2007 - 00:14)
Modérateur
bonjour,

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

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

tres interessant Smiley smile .


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 ! Smiley ola

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)
Bonjour,

j'obtiens ça, à priori FF, IE5.5 à 7 ...
upload/5854-test.jpg

<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. Smiley lol



Comment qu'il essaie de me mettre la pression lui. Smiley lol
Bonjour,

Arf, C'est jouer sur les mots !!
Smiley rolleyes
Pas de div vide mais un div double emploi ... Je l'avais hier, j'ai perdu une heure de sommeil pour rien Smiley cligne
ghost a écrit :
Arf, C'est jouer sur les mots !!
Smiley rolleyes
Pas de div vide mais un div double emploi ... Je l'avais hier, j'ai perdu une heure de sommeil pour rien Smiley cligne

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. Smiley biggrin
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 Smiley confus

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. Smiley cligne
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. Smiley smile

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).
Pages :