Petit jeu...

Pour changer un peu, je vous propose un petit jeu : construire la figure ci-dessous à l'aide de CSS.

Le résultat devra être atteint uniquement à l'aide de code CSS. Aucune image, aucun Flash, aucun Javascript ou autre langage de programmation ne devra être employé.

Voici la figure à reproduire (dimensions approximatives) :
Figure support

Il n'y a pas de date de clôture du jeu, vous pouvez participer tant que vous avez des idées.

Oups, un petit détail que j'ai failli oublier : aucune propriété Position, ni aucune propriété Float ne sera acceptée :-)

Attention à ne pas poster de code HTML dans les commentaires ! Les balises HTML font planter le blog. Les codes CSS sont eux autorisés.

Par Raphael GOETTER - mercredi 28 juillet 2004 à 10:42

Blabla - #44 - Lu 6715 fois - Intérêt du billet: 1(3) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le mercredi 28 juillet 2004 à 11:33, par mebon :: #

Cool, une jeu !! Merci, on va moins s'ennuyer maintenant ;) mhh, j'ai pas encore trouvé comment j'allais faire, mais si tu proposes le jeu c'est que c'est faisable j'imagine. Bon, je vais aller cogiter....

Le mercredi 28 juillet 2004 à 11:35, par Quentin :: site :: #

Youpi ! J'ai gagné !

le CSS :

#un {
background-color: #003300;
margin-left: 10px;
height: 100px;
width: 100px;
margin-top: 0px;
}
#deux {
background-color: #999900;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: 110px;
}
#trois {
background-color: #CCFF66;
margin-top: -100px;
margin-left: 310px;
height: 100px;
width: 50px;
}


C'est bon ?
Salut !

EDITE par Raphaël / Sibelius car les balises HTML plantaient le blog ;-)

Le mercredi 28 juillet 2004 à 11:45, par Sibelius :: site :: #

@Quentin > c'est en effet une solution qui fonctionne sur IE6 et Mozilla Firefox 0.8 (testé chez moi).
Il doit y avoir d'autres solutions ;)

Le mercredi 28 juillet 2004 à 11:47, par mebon :: #

Désolé de faire 2 commentaires de suites, mais faut-il que ça soit valide ? (bon, ça ça va pas être trop dur), compatible ? (peut être plus dur, ça dépend ^^)

Le mercredi 28 juillet 2004 à 11:51, par Quentin :: site :: #

@Sibelius > Biensûr ! Je ne prétend pas avoir trouvé la seule solution !
Parcontre je suis à peu près sûr que c'est la plus simple... Non ?
Salut !

ps : T'inquiète, moi aussi j'ai testé !

Le mercredi 28 juillet 2004 à 11:52, par Sibelius :: site :: #

@mebon > Valide en HTML ou XHTML strict de préférence, oui.
Compatible : oui ce serait mieux aussi :) (au moins les navigateurs récents)

Le mercredi 28 juillet 2004 à 12:43, par Talou :: site :: #

Une autre solution ou les blocs sont découpés par lignes.
Valide et ok sur gecko/ie6
artis-tic.com/div/jeu_als...

Le mercredi 28 juillet 2004 à 12:54, par mebon :: #

Moi aussi je propose une autre solution. Notez que la particularité n'est pas tant dans le css que dans le xhtml... (bon, par contre c'est pas très compatible)
arcadia.island.free.fr/te...

Le mercredi 28 juillet 2004 à 13:04, par Quentin :: site :: #

Pfwa ! J'aurais même pas cru que ça puisse marcher !
IE aurait été d'accord avec moi...
Trop marrant !

Le mercredi 28 juillet 2004 à 13:07, par Talou :: site :: #

@mebon : c'est excellent ! bravo !

Le mercredi 28 juillet 2004 à 13:57, par Raphael Goetter :: site :: #

Eh ben je suis vraiment bluffé par certaines idées !!!

PS : j'ai dû supprimer la réponse de Quentin qui faisait planter le blog en raison du code intégré sans doute :(

Le mercredi 28 juillet 2004 à 14:02, par vchahun :: site :: #

Je me suis dit qu'avec des tables ça rendrait pas mal ... (ouuuuuuuuh !!!)
... et pour consoler les adeptes de CSS, j'ai fait aussi une version avec des display:table-cell etc ...
vchahun.free.fr/div/test_...

Un hypothèse sur la solution de Sib: peut-être on pourrait utiliser les clip ?

Le mercredi 28 juillet 2004 à 16:47, par Popov :: site :: #

panglao.free.fr/paul/test...

Bon, j'avais la flemme de faire du html correct, mais le CSS l'est... C'est peut etre la réponse de Quentin, mais comme le lien a été supprimé je ne peux pas savoir ;)

Mebon, j'adore ta solution ^^ Je ne pensais pas qu'on pouvait utiliser les meta tags comme ca :)

Super ce petit jeu, merci Sib

Le mercredi 28 juillet 2004 à 17:19, par Quentin :: site :: #

Woh blazé...
Jme suis fait virer ma super-réponse-qui-marche-du-tonnere-de-Dieu !

Bon, pour la postérité, sachez qu'elle marchait de la bombe et qu'elle utilisait 3 divs avec des margins négatives...
Voilà ! Ce qui était à César lui a été rendu !

Tchao !

Le mercredi 28 juillet 2004 à 17:19, par Sibelius :: site :: #

@Popov > Non, il ne s'agit pas du code de Quentin.
Je vais réafficher son commentaire en supprimant uniquement quelques balises html, en espérant que tout fonctionne.

Le mercredi 28 juillet 2004 à 17:46, par Quentin :: site :: #

Yeah !

Le mercredi 28 juillet 2004 à 18:04, par Ldo :: site :: #


li {
background: #003300;
height: 100px;
width: 100px;
}
li+li {
background: #999900;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: 100px;
}
li+li+li {
background: #CCFF66;
height: 100px;
width: 50px;
margin-left: 300px;
}
ul {
list-style-type: none;
}

comment ca faut que ca marche sur primitive explorer ? :P

Le jeudi 29 juillet 2004 à 02:02, par nanoum :: site :: #

sans width, height, padding ni margin ;)

* {
font-size:1.2em;
}
ul, li {
display:inline;
}
#un {
font-size:5em;
border-left: 1em solid #003300;
vertical-align:0.9em;
}
#deux {
font-size:10em;
border-left: 0.75em solid #999900;
}
#trois {
font-size:6em;
border-left: 0.5em solid #CCFF66;
vertical-align:-0.13em;
}

<ul><li id="un"></li><li id="deux"></li><li id="trois"></li></ul>

et ne marche pas non plus sous ie :p

Le jeudi 29 juillet 2004 à 12:03, par Jep :: site :: #

J'comprend pas l'intéret de cette restriction :
"aucune propriété Position, ni aucune propriété Float ne sera acceptée"

Le jeudi 29 juillet 2004 à 14:05, par Sibelius :: site :: #

@Jep : "J'comprend pas l'intéret de cette restriction"
>> Le fun, uniquement le fun. Sinon ce serait trop simple, non ? :-)

Le jeudi 29 juillet 2004 à 15:17, par vchahun :: site :: #

Un peu, oui (du moins avec float, tout est réglé en 2 sec)

Le mercredi 18 août 2004 à 15:05, par lapino :: #

J'arrive un peu en retard, mais voilà ce que je propose:

div {display:inline;}
#un {
background-color: #003300;
margin-left: 10px;
height: 100px;
width: 100px;
vertical-align:top;
}
#deux {
background-color: #999900;
height: 200px;
width: 200px;
}
#trois {
background-color: #CCFF66;
height: 100px;
width: 50px;
vertical-align:bottom;
}

Le lundi 31 janvier 2005 à 13:46, par solo :: site :: #

J'ai vu la solution de mebon et elle est EPATANTE!

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.