Thème en cours : ambiance sucrée.
Gateaux, bombons, couleurs chatoyantes et acidulées, rivière de chocolat,... développez une image qui évoque ces plaisirs sucrés.
_____________________________________________________________________
Salut,
 
Pour ceux qui ne connaitraient pas l'expérience csszengarden, le principe :
une même page html pour tout le monde et on design via les css uniquement
 
Le but était de promouvoir l'utilisation des CSS, ce site à rempli sa mission (et ne semble plus mis à jour )
 
Donc à défaut d'une page conçue par nous (rien n'empêche d'y plancher, si ya des volontaires...), on va utiliser le code de zengarden.
 
http://www.csszengarden.com/tr/francais/ (voir source puis copier-coller dans un éditeur )
 
Le but du topic c'est d'apprendre les CSS  et de se faire plaisir sans forcément se soucier des critères de sélection de zengarden donc si certains veulent mettre un peu de JS ou utiliser des propriétés exotiques...
 
__________________________________________________________________________
 

• Pour l'instant est retenue la conception d'un design sur la base d'un thème (seul ou en équipe) défini prochainement.

• Mais on peut aussi disséquer des feuilles de style des thèmes csszengarden.

- on choisi un thème et on pose des questions dessus,
  ou les + avertis signalent une particularité interessante de la CSS à leurs yeux et l'expliquent
- on pose des questions sur n'importe quel thème et go ahead, fly with the wind.  
 
__________________________________________________________________________
 
La structure de la page

Je recommande vivement l'achat du livre éponyme  .Si vous ne deviez acheter qu'un livre sur les CSS, c'est celui-ci.
On peut aussi citer le mémento CSS de Raphaël Goetter (d'alsacreation), très pratique. indispensable en fait, vous apprenez déjà bcp rien qu'avec ce petit dépliant.

En outils, firebug pour firefox (une version lite existe sous forme de bookmarklet pour les autres navigateurs) me semble indispensable (installez-le vous comprendrez vite pourquoi) et webdevelloper peut aussi être utile.
_________________________________________________________________________________

Quelques ressources utiles
http://wiki.mediabox.fr/documentation/css
http://www.alsacreations.com/astuc [...] -base.html
_________________________________________________________________________________

On ne peut apprendre les CSS sans savoir un minimum sur quoi il s'applique.
Pour les total débutant il faut donc d'abord jeter un oeil sur le balisage xhtml. Comprendre la nature des éléménets xhtml est importante pour la déclaration de propriétés CSS.
Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne [alsacreations]

L'étape suivante, la première en CSS, consiste à connaitre la syntaxe du langage. Elle est simple (les espaces les tabulations et les retours_chariots ne sont pas impactant, hormis sur le poids du fichier, ne pas hésiter à en mettre pour faciliter la lecture)
élément_xhtml_visé {propriété : valeur ;}
ex: p {margin-bottom : 15px ;}
On peut enchainer les propriétés au sein des accolades en les séparant par un point-virgule.
ex: p {margin-bottom : 15px ; color : #ddd ;}

On peut aussi cibler un  élément en désignant sa classe ou son id si il en a une.
Exemple se basant sur le balisage de csszengarden (voir image du post au dessus)
ex: .p1 {color : red ;}
Le point avant p1 designe une classe (une classe est partagée par plsrs éléments contrairement à une id qui est unique dans le document, voir la structure au dessus encore une fois- le # désigne une id, ex: #explanation {font-size : 20px ;} )
Tous les éléments du document appartenant à la classe .p1 seront en rouge (soit 6 paragraphes).

Très bien mais supposons que l'on préfère que le p1 de #explanation soit en vert, on va alors écrire
.p1 {color : red ;}
#explanation.p1 {color : green ;}
La déclaration dit : tous les éléments appartenant à la classe .p1 se trouvant dans un élément d'id #explanation.

L'ordre des déclarations ICI n'a pas d'importance, on peut très bien inverser les 2 lignes.
La 2e est simplement plus précise, elle a donc plus de poids et écrase la 1e.

A ce niveau il est important de comprendre le C de CSS. C de Cascading signifie que les styles suivent une notion de hiérarchie et d'héritage.
Comprendre l'héritage et la parenté des styles CSS [alsa]

à suivre (ou pas)

Liste des design fait par les forumeurs (images cliquables)
 
Fastclemmy

drapal

Spectateurs ou participants ?

choix 1 pour le moment  

Je sais pas encore. On verra.

JLB est participant d'office puisque c'est son idée

je conseille transcender css aussi

Oui, ajouté

Enfin, je vais apprendre
Sans me rendre !
Dans ce grand mais virtuel jardin
Couché Saoul de Savoir
Les Class et moi ne ferons qu'un
Allez ! Je veux voir...

maj post 2

Des idées d'autres utilisations du topic si ça tente:
 
Disséquer des feuilles de style des thèmes csszengarden.
- on choisi un thème et on pose des questions dessus,
  ou les + avertis signalent une particularité interessante de la CSS à leurs yeux et l'expliquent
- on pose des questions sur n'importe quel thème et go ahead, fly with the wind.
 
 
On fait un design collectif pour zengarden.
Ca implique de faire plsrs choix, donc qu'il y ai :
- des propositions,  
- un peu de discussion,
- qu'on tranche,
- qu'on passe au choix suivant
 
Dès qu'on peut passer à la pratique on le fait.
 
Pour tout ce qui sera CSS on peut envisager le choix de spoiler pour que ceux qui veulent bosser sur le sujet puisse continuer à lire le topic.
 
Pour ce qui est production graphique (ça ouvre le topic au reste de la cat, pas forcément interessée par les CSS) une fois la thématique choisie on peut proposer des croquis/visuel, développer des recherches,... le choix entre les propositions sera l'objet d'un vote.
 
Rien n'empeche de faire plsrs design sur la base d'un même fichier CSS... donc on peut envisager plsrs groupes
 
 
 

 
Bonne idée ce topic, ça me manque les topics collectifs où tout le monde participe.

Perso je pense que le plus "utile" serait de reprendre les données  d'un CMS comme Joomla/WordPress ou DotClear (une page HTML généré par ces dernier)...
Ça pourra nous permettre de transformer le package XHTML/CSS ainsi créé en template pour ces derniers monstres...

You're welcome dans tous les sens de l'expression

Utile peut-être, enfin surement même. Maintenant par rapport à mon expérience qui se limite à WP (j'ai commencé à le faire pour mon design) la déclinaison d'un design sous forme de thème WP se résume à remplacer les éléments de contenu (les h1, la date, les cats...) d'un template html par des boucles ou des tags PHP au sein du html. Donc ça n'a pas grand chose à voir (on peut même dire rien) avec le graphisme.
WP ne rend que le html qu'on lui donne à rendre via un template. Pour les autres je ne sais pas comment ça marche donc je passe peut-être à côté de ce que tu voulais dire
 
 

Ce que j'entends, c'est que chaque CMS à une structure fixe... divisé et subdivisé...
La mise en page se fait par "template"... t'en a un général qui fait la structure de la page, un qui fait la structure des news, un qui fait la structure du menu etc...
Bref, pour résumer, entre notre page HTML et notre template, on aura juste trier les type de contenu...
On a juste à mettre un tag special qui dira au "moteur" où injecter tel type de donné...
Après, c'est une étape en plus qui intéressera +ou- les forumeurs... c'était pour inover sur la structure de base HTML qu'on prenait...

Sinon, je dépose ma candidature, mais je m'y mettrais quand on aura fixé la base...
Je compte perso m'éclater avec JQuery et HTML5 si l'utilité se présente...

Mais la structure c'est toi qui la décide (enfin ptet pas dans tous les CMS mais c'est qd même mieux). Dans WP tu as qq tag PHP qui te renvoient un contenu structuré (les cat sous forme de liste par exemple) mais ça s'arrête là, tous le reste tu structures comme tu veux.

Oui, par structure de base HTML, j'entends un échantillon représentatif du type de contenu du site... (menu / titre de la page / ...)

http://www.eskimo.com/~bloo/indexdot/css/index.html

Merci mais il parrait loin d'être à jour ton site Fens
 
http://wiki.mediabox.fr/documentation/css

Ha mince, j'ai pas tout vérifié, ils utilisent ça au boulot
Ça aura fait un up au moins.

drap et up pour un bon topoc

Ouais

Bon si on part sur un design commun ou par équipe, vous avez des préférences, comme le type de design (fixe/élastique/fluide), des conditions à respecter (dégradation vertueuse pour navigateurs de merde par ex, ou valid CSS2.1,...), des propriétés obligatoires à utiliser, ou des effets...

Des idées de thème à proposer ?

Participant ?

quelque chose d'interactive et gay
 
un thème en noir et blanc style le site à wizo ?

=> "La grippe A"...

Je note... même les conneries

Sinon, c'est à toi de fixer le contenu à mettre Céhaiçaissé...
Moi perso, le joker que j'utiliserai dans tous les cas c'est JavaScript...

EDIT:

Il faudrait un contenu un peu plus poussé que CSSZenGargen qui est un blog...
Par exemple, un menu / sous-menu, pourquoi pas une galerie, ...

Ben le contenu, c'est le html de zengarden

ah oui un instant j'ai eu un doute sur ma compréhension de l'utilité du css

Oki oki, j'avais justement cru qu'on partirait d'une autre base HTML

C'était l'idée de base de JLB mais si il faut attendre que tt le monde se mette d'accord sur le html avant de commencer on est pas encore parti pour parler faire du graphisme et coder des CSS à mon avis (cf feu les topics académiques)
 
L'interet c'est de partir d'une contrainte (le contenu avec sa structure), et d'en exploiter au mieux les possibilités en se concentrant uniquement sur la CSS et les graphismes. Et on peut le faire très vite (ou pas).
 
Il faut voir aussi qu'il y a déjà des centaines de design sur cette structure auxquels on peut se référer. C'est utile pour comparer des techniques et pratique comme support pédagogique je trouve.
 

Ok, alors je dérogerai une partie à la règle dans le sens ou si je veux mettre du JS, je suis obligé de rajouter une ligne au HTML...

Pas de problème vu qu'à la base je suis certain que tu feras en sorte que le JS ne soit pas obstrusif (sinon c'est mal )

pourquoi mettre du JS ?

Pour améliorer l'usabilité/ergonomie.

- Des gros seins !
- De la glace (pas le truc qui se mange, le truc du pôle nord)
- Ambiance "Charlie et la chocolaterie". Des bonbons et des gâteaux partout.
 

Ca m'étonnerait, ch'ui pas graphiste