Le tuto de Gagea

[Gagea]

très certainement le padding

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Gagea]

Merci Fabrice pour cet exercice tout prêt. Je n'ai rien changé. J'ai juste évité de parler du raccourci clavier pour accéder à "Editer les CSS" car chez moi il n'a jamais fonctionné.
http://josar.free.fr/tutoKompozer/miseEnForme2.html
J'ai inclus ce paragraphe dans le chapitre "Les blocs". Je pense qu'il va bien à cet endroit et complète la mise en forme avec css. Quand j'aurai le temps je scinderai en 2 cette page sur les blocs car je la trouve un peu trop longue.
J'ai déjà scindé en 3 la page "Mon premier site".
Je teste actuellement mon tuto sur les participants à l'atelier que j'anime et, ma foi, ils ont l'air de s'en sortir pas mal !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

De rien.

Malheureusement, j'y ai même laissé des fautes ... d'orthographe, au moins celle-là:
"Identification d'éléments particuliers" au pluriel c'est mieux!

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.4

[GAUNCE]

Peut-être aussi :
représenter ces paragraphes avec un style définit au niveau css. Sans "t" svp.
ici:
Un ensemble d'élément cohérent pourront être regroupé.
un ensemble pourra, des, pourront sûrement!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Gagea]

Bonjour,
J'ai rectifié les petites fautes d'orthographe et aussi :

• - J'ai dégagé le div contenu qui était difficile à trouver car trop collé au précédent
  - Il y avait un espace de trop dans le lien de l'image arrière-plan du menu (elle ne s'affichait pas).

Si vous voyez d'autres erreurs, merci de me le dire.

Code : Tout sélectionner

#menu {  
        border: 1px dotted grey;
        text-align: left;
        float: left;
        width:200px;
        padding:20px;
        margin-right:20px;
        background:url (http://kompozer.sourceforge.net/images/kompozer_128x128.png) no-repeat;

Heureusement que j'ai pu comparer avec le lien de l'image arrière plan du contenu car sinon je n'aurais pas trouvé.
C'est formateur aussi de dire : cherchez l'erreur. J'aurais pu la laisser...
Je trouve cet exercice super bien fait. Merci encore Fabrice.
Si tu en as d'autres n'hésite pas à me les envoyer.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

En fait, c'était une idée qui m'est venue et que j'ai mise en musique en 2 temps 3 mouvements. Le premier jet est déjà intéressant. Mais je, nous pouvons l'améliorer en:
- partant d'une présentation vierge
- finissant à une présentation + évoluée que l'actuelle
- en mettant tout le code css en commentaire, il suffira de retirer le commentaire de ligne (//) pour visualiser l'effet, et donc le comprendre
genre

html {
// background: blue;
//background: url(http://kompozer.net/images/pyg-title.png) no-repeat;;
//background: url(http://kompozer.net/images/pyg-title.png) blue no-repeat;
...
}
...

- avoir le css au départ dans un fichier
- à la fin sauvegarder le nouveau css
- visualiser l'effet du changement sur un second fichier
- ajouter un lien vers un tuto de webdevelopper
- montrer la clarté du html par rapport à des versions tableaux ou non !

[Omnisilver]

Hello Gagea,

Bravo pour ce nouveau tuto qui est très clair ! Et qui m'a appris des choses (notamment les images à zone cliquables).

J'étais prêt à l'ajouter dans la listes des ressources sur KompoZer, mais un modérateur efficace s'en est déjà chargé

Une suggestion : pour la page feuilleStyle2.html, tu peux peut-être indiquer à la fin que l'extension pour Firefox ColorZilla permet d'obtenir en un clic les couleurs d'un site en notation RGB ou hexadécimale ?

Cordialement,

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.4) Gecko/2008111318 Ubuntu/8.10 (intrepid) Firefox/3.0.4

[Fabrice.Tres.Net]

Gagea,
Dans http://josar.free.fr/tutoKompozer/miseEnForme4.html , tu n'as pas séparé le fond de la forme: un crime de lèse-majesté!

En fait, on passe tous par là, et on tombera encore + d'1 fois dedans: c'est juste dans

Par exemple : la balise <span> avec un attibut class ayant pour valeur "lettreBleue" appliquée à la lettre c du mot couleur donnera : Couleur.

Imagine que tu décides de mettre un fond bleu ... tu vas changer les couleurs du texte et la classe "lettreBleue" s'écrira en blanc ou noir ou ...

Comme exemple, tu prends par exemple un métier ou une recette de cuisine et tu crées une classe "outil" ou "ingredient", chaque ingrédient d'une recette étant ou chaque outil étant mis en valeur dans un texte.
De cette manière la forme et le fond sont bien séparés.

PS: cela devient pointu!

[Gagea]

Une suggestion : pour la page feuilleStyle2.html, tu peux peut-être indiquer à la fin que l'extension pour Firefox ColorZilla permet d'obtenir en un clic les couleurs d'un site en notation RGB ou hexadécimale

Merci Omnisilver pour l'info. Je ne connaissais pas ColorZilla.
C'est OK je vais ajouter à ma page un petit paragraphe. Dès que j'ai le temps.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

J'ai fait une nouvelle version qui intègre ce que j'ai dit + haut:
Au final on obtient :

C'est là http://josar.free.fr/tutoKompozer/feuil ... o_css.html

[Gagea]

Bonsoir Fabrice,
J'ai publié la nouvelle version, plus évoluée, de ton exercice en modifiant la phrase indiquant qu'il s'agit ici d'une feuille de style externe.
Je vais apprendre plein de choses en m'exerçant à faire ces manipulations . Les débutants et moi la première te disons un grand merci.
J'ai l'impression que tu t'es bien amusé.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

J'espère que ce sera utile, cela a été fait dans cet objectif à priori.
Comme son usage est simple, à la rigueur, tu peux le mettre en chapitre "non classé" dans la liste du chapitre "Mise en forme". Peut-être sous une dénomination comme "un aperçu rapide et simple des feuilles de style" ou un truc dans le genre.

On peut faire la même chose sur le thème du positionnement, ...

[Gagea]

J'espère que ce sera utile, cela a été fait dans cet objectif à priori.
Comme son usage est simple, à la rigueur, tu peux le mettre en chapitre "non classé" dans la liste du chapitre "Mise en forme". Peut-être sous une dénomination comme "un aperçu rapide et simple des feuilles de style" ou un truc dans le genre.

Je suis sure que ce sera très utile.
Pour y accéder et comme tu me l'as suggéré, j'ai rajouté un lien dans le plan du chapitre Mise en forme. J'ai gardé ta dénomination avec juste en plus "exercice1".
Donc, quand tu auras le temps et l'envie j'ajouterai un autre lien pour l'exercice2 sur le positionnement. Merci Fabrice.

Deux petites questions à propos des liens de ton menu :

• - Comment fait-on dans Kompozer/onglet normal des liens inactifs ?
  - As-tu fait exprès de ne pas faire ouvrir les liens externes dans une nouvelle fenêtre ? Avec Firefox, si on ferme l'onglet on se retrouve sur la page plan du chapitre et on est un peu désorienté. Pourquoi nous ne nous retrouvons pas sur la page de l'exercice ?
  Je n'ai pas encore regardé comment cela se passe avec IE.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

Pour y accéder et comme tu me l'as suggéré, j'ai rajouté un lien dans le plan du chapitre Mise en forme. J'ai gardé ta dénomination avec juste en plus "exercice1".
Donc, quand tu auras le temps et l'envie j'ajouterai un autre lien pour l'exercice2 sur le positionnement. Merci Fabrice.

Deux petites questions à propos des liens de ton menu :

• - Comment fait-on dans Kompozer/onglet normal des liens inactifs ?
  - As-tu fait exprès de ne pas faire ouvrir les liens externes dans une nouvelle fenêtre ? Avec Firefox, si on ferme l'onglet on se retrouve sur la page plan du chapitre et on est un peu désorienté. Pourquoi nous ne nous retrouvons pas sur la page de l'exercice ?
  Je n'ai pas encore regardé comment cela se passe avec IE.

Ce mini tuto css avait un double but:
* montrer la force des css de manière autonome, surtout pour répondre aux questions récurrentes du forum
* un élément pédagogique qui s'insère dans le fil de ton tutoriel sur Kompozer

Q1: Qu'appelles-tu un lien inactif?
Q2: J'avais pensé "très rapidement" que cela était mieux mais je ne suis pas sûr que ce soit le bon choix. Je voulais surtout éviter des liens pointant dans le vide! Tu peux modifier à ta guise, mettre un autre menu,...bref tu es "propriétaire"! J'ai eu l'idée et elle n'a de valeur que si elle est partagée, réutilisée et améliorée par d'autres. Dans son trou, un trésor n'a aucune valeur.

IE ne gère pas les //, cela permet d'ailleurs de faire des hacks. Donc la page s'affiche dans l'état "final"!

[chinon37]

Bonjour à tous,

- Comment fait-on dans Kompozer/onglet normal des liens inactifs ?

Entends-tu par là un créer un lien qui ne pointe vers rien mais permet un effet au passage de la souris (règle :hover en css)? dans ce cas, dans l'adresse du lien, tu mets simplement le signe #