petit jeu... - blog alsacréations : xhtml, css et standards web
petit jeu... - blog alsacréations : xhtml, css et standards web
aller au contenu aller au menu aller à la recherche
recherche sur le blog
blog alsacréations
tutoriels
forum
blog
pro
emploi
boutique
élucubrations xhtml, css et standards web
recherche par mot-clés
css ·
xhtml ·
standards w3c ·
webdesign ·
accessibilité ·
référencement ·
javascript ·
php ·
humour
alsaquiz
a retenir
les kiwiz sur alsacréations
principes fondamentaux du webmaster
accesskey, le grand échec de l'accessibilité
netscape 4 ou accessibilité ?
css : confusions et amalgames
un site compatible sur tous les navigateurs
comment résoudre les problèmes d'affichage en css ?
le point sur la fonction php include
javascript : aucune contre-indication.
archives
voir les archives
novembre 2007octobre 2007septembre 2007août 2007juillet 2007juin 2007mai 2007avril 2007mars 2007février 2007janvier 2007décembre 2006novembre 2006octobre 2006septembre 2006août 2006juillet 2006juin 2006mai 2006avril 2006mars 2006février 2006janvier 2006décembre 2005novembre 2005octobre 2005septembre 2005août 2005juillet 2005juin 2005mai 2005avril 2005mars 2005février 2005janvier 2005décembre 2004novembre 2004octobre 2004septembre 2004août 2004juillet 2004juin 2004mai 2004
syndication
fil rss
fil atom
rédacteurs du blog
raphaël goetter
florent verschelde
olivier patry
dominique cocagne
laurent denis
jean-pierre villain
tout le collectif alsacréations
partenaires
code promo
acheter parfum
location vacances entre particuliers
poster
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) :
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 5578 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
12345
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.
forum > derniers sujets
salon général et débutants : y a t-il un pro du php dans l'avion ? (pas moi je l'avouehtml, xhtml, sémantique web : popup sémantiquesalon spécifique aux tutoriels et articles alsacréations : menu déroulant vertical + ie6/ie7 + z-index mal réglé=problèmeshtml, xhtml, sémantique web : probléme menu déroulantcss et mise en forme : problème centrage de la page sous ie
faq > au hasard
quelles sont les propriétés qui s'appliquent à :first-letter ?polices, quelle taille choisir ?comment éditer un sujet sur le forum, et comment classer un sujet en [résolu] ?
emploi > dernières offres
chargé de référencement / net-linking (intuiti, nantes)webmaster - intergrateur web site media (newsweb (groupe lagardère), saint cloud)[stage] développeur php/mysql (yateo, paris 13ème)
haut de page - conception : alsacréations.fr - hébergement : nikozen -
mesure d'audience roi frequentation par
Acceuil
suivante
petit jeu... - blog alsacréations : xhtml, css et standards web Annuaire Web souk referencement : Internet st quentin Bourse aux jouets et à la puériculture à Saint-Quentin-de-Baron ... Yvelines (78) Quentin vous guide : beauté, minceur, épilation, voyance sur ... Paroisse : Saint-Quentin-les-Sources à Montigny-le-Bretonneux - L ... Partitions de Louis Quentin Fédération Française des Échecs Loch Ness Pub à Saint Quentin Aisne [Bar discothèque Aisne ... L’Equipement dans les Hauts-de-Seine - Nanterre - Jules Quentin Doyenné de Saint-Quentin Est (Yvelines) - Proposer un article PROJET DE LOI ORGANIQUE PORTANT DISPOSITIONS STATUTAIRES ET ... JANIDEL Immobilier Quentin Elias: Les meilleurs sites retenus par Célébrités Sélection immobilier Saint-Quentin - 2100 - 2691 - Se loger Saint-Quentin ... Agence immobilière Saint Quentin - Se loger Saint Quentin - Saint ... Agences immobilières, St.-Quentin, Aisne - Yahoo! Local France Agences immobilières, St-Quentin, Aisne - Yahoo! Local France Graphanco graphiste designer Aisne, Graphiste Aisne 02 ... St-quentin Restaurant LA VILLA D'ISLE - Saint-Quentin Aliment, nourriture, alimentation animale - Saint-Quentin - Aisne ... webpulser www.artipicardie.com - Dépannage informatique. Saint Quentin 02 aisne Annuaire INDEXA Recherche saint quentin Réseau des médiathèques de Saint-Quentin-en-Yvelines Doyenné de Saint-Quentin Est (Yvelines) Gratuit, q u e n t i n r a d i o p o d c a s t . com sur ... Achat Maison Saint Quentin SeLoger.com - Immobilier Le site de Saint Quentin Algorithmique aisne, picardie, laon, st quentin, s... - Création ... Quentin Durward : Comparer les prix avec Clubic Organisé par la Maison de l’Entreprise de Saint-Quentin-en ... Gratuit, Restaurant le patisson à st quentin (02) sur LeBest.fr ... Quentin caffier, photographe de mode à paris Laboratoire Suds d'Amériques UVSQ [Ravel Info] Plan du site Quentin Tarantino - Photos, Vidéos, Biographie, Fan club, Site ... CREATION SITE INTERNET CREATION SITE WEB INTRANET AGENCE NETPILOTE Documents : Paris Ile de France Ouest (PIFO) : détails de la P1 à ... Encyclopédie - Saint-Quentin-en-Yvelines site de la paroisse saint quentin les sources [ Moovement.fr ] - Le moteur de recherche d'offres d'emploi et de ... Croix-Rouge francaise, délégation de Saint-Quentin en Yvelines ... QUENTIN TARANTINO, CINÉPHILE ET CINÉASTE Site Web personnel - Laurent Destailleur Culture.fr: Le musée de la ville (Saint-Quentin-en-Yvelines) Culture.fr: ÉGLISE SAINT-QUENTIN Les jardins de Saint-Quentin Université de Versailles-Saint-Quentin-en-Yvelines (UVSQ) thegrannysmith - Droit de comprendre, ou devoir de parjure ? TodayStars - Quentin Grosset Site officiel de la mairie de SAint-Cyr-L’École dans les Y dasp Damn ! A Sublime Post-system ! archives Présentation des relevés BMS de St Quentin au Bosc Relevé des baptêmes de St Quentin au Bosc (76) OFFICE DE TOURISME DE SAINT-QUENTIN ET SA REGION LE SAINT-QUENTINOIS Repertoire Pages Persos Free - http://quentin.rochedreux.free.fr MEMO - Le site de l'Histoire Tests permis mer Cotier, carte mer Parcours Aventure de St Quentin en Yvelynes Montigny le Bretonneux ...