CSS et autres embrouilles....

klaviebel · Message par **klaviebel** » 30 avr. 2007, 10:38

alors, voilà, j'ai lu, relu, re-relu, re-re-re etc. différents tutos sur les CSS et j'en arrive à ce résultat déconcertant

(voire un tantinet angoissant... ) que c'est pas simple cette histoire de CSS.
Je voudrais dans un premier temps savoir : il y a les feuilles de style intégrées et externes.
Si je résume la situation, il faut faire les deux c'est ça?
- une feuille de style externe pour le design général (genre qui me permettra de lui mettre d'autres habits pour l'hiver) : qui contient le tableau (qui ne sera plus un tableau), les couleurs, le menu en haut et en bas, les logos etc. mis dans un fichier à part nommé .css et à partir duquel on mettra un lien dans le code source .html
- et pour chaque page une feuille de style intégrée pour ce qui est relatif à la page concernée : la mise en page des textes et images etc... qui sera directement dans le code source.

Vrai ou faux ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

klaviebel · Message par **klaviebel** » 30 avr. 2007, 10:41

ah, et histoire d'en rajouter : les feuilles de styles externes, je les écris dans NotePad++

et les intégrées dans Kpz

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Mongo Bob · Message par **Mongo Bob** » 30 avr. 2007, 21:30

Naaooonnn : une seule feuille de style externe, ou deux mais quand tu auras un trés trés grand site. La feuille est liée à toutes les pages grâce à :

Code : Tout sélectionner

<link rel="stylesheet" href="templates/geckozone/geckozone.css" type="text/css" />

Ca veut dire au navigateur d'aller chercher les directives de style là quelle que soit la page. Pas de feuille de style interne, ça sert à rien, ou trés peu, disons.
Ne t'aurais-je point déjà donné ce lien, à tout hasard?

:
http://info.sio2.be/kpz/2/index.php

ah, et histoire d'en rajouter : les feuilles de styles externes, je les écris dans NotePad++ Question et les intégrées dans Kpz Question

Pareil, voir réponse ci-dessus, c'est dans Kpz et dans Kpz dans Kazcades (cliquer sur la palette en-haut). Notepad++ uniquement pour le code html.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

klaviebel · Message par **klaviebel** » 30 avr. 2007, 22:08

Merci pour la réponse Mongo Bob

Si, bien sûr que je suis allée visiter le site

mais ça ne me suffit pas pour comprendre comment ça marche les CSS et surtout pouvoir l'appliquer à mes besoins.
Mais alors qu'est-ce qu'un feuille de style intégrée, si ce n'est pas une feuille de style interne? (cf le tuto)
En plus, une fois de plus je vais me payer une petite tranche de ridicule, mais je n'arrive pas à dompter Kazcade (même après avoir essayer plusieurs fois d'appliquer scrupuleusement les directives d'Ymai).

Du coup, je les écris directement dans Notepad++ et là au moins ça donne quelque chose (enfin dans les limites de l'amateurisme bien entendu

): Kpz prend directement ce que j'écris dans Notepad++.
En plus, j'ai voulu repartir de mon code source (pour la page accueil par exemple), et là HORREUR, c'est comme si Kpz avait hiérarchisé et conservé tous les tests, bêtises, changements d'avis ect. dans mon code source. Du coup, c'est illisible. Bref, tout ça pour dire, que malgré mon désespoir (si, si... je craques

) je réécris le code HTML + CSS en même temps, dans Notepad et inch allah!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Mongo Bob · Message par **Mongo Bob** » 01 mai 2007, 01:00

Pourrais-tu donner le code de ta page, que j'y jette un oeil?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Message par **Ymai** » 01 mai 2007, 09:12

klaviebel a écrit :Si, bien sûr que je suis allée visiter le site mais ça ne me suffit pas pour comprendre comment ça marche les CSS

Ben zut alors. C'est pourtant l'objectif. Que faudrait-il améliorer? Qu'est-ce qui ne va pas du tout?

et surtout pouvoir l'appliquer à mes besoins.
Mais alors qu'est-ce qu'un feuille de style intégrée, si ce n'est pas une feuille de style interne? (cf le tuto)

Intégré, interne, c'est la même chose. Les deux termes me semblent tellement évidemment synonymes que je ne suis peut-être pas assez attentif. Dois-je vraiment utiliser un seul des deux?

En plus, une fois de plus je vais me payer une petite tranche de ridicule, mais je n'arrive pas à dompter Kazcade (même après avoir essayer plusieurs fois d'appliquer scrupuleusement les directives d'Ymai).

Ben zut alors.

Du coup, je les écris directement dans Notepad++ et là au moins ça donne quelque chose

L'avantage d'utiliser KompoZer et KaZcadeS c'est de voir, en temps réel, ce qui se passe dans la page quand on applique une directive de sty§le. En même temps, on peut aussi aller voir l'onglet "Général" pour voir et apprendre quel code se cache là-derrière. Plus pédagogique que cet outil de Kazé, il n'y a pas...

(enfin dans les limites de l'amateurisme bien entendu ): Kpz prend directement ce que j'écris dans Notepad++.
En plus, j'ai voulu repartir de mon code source (pour la page accueil par exemple), et là HORREUR, c'est comme si Kpz avait hiérarchisé et conservé tous les tests, bêtises, changements d'avis ect. dans mon code source. Du coup, c'est illisible.

J'ai un peu de mal à saisir. On peut voir ce code?

Bref, tout ça pour dire, que malgré mon désespoir (si, si... je craques ) je réécris le code HTML + CSS en même temps, dans Notepad et inch allah!

Moi, je dis KpZ/KaZcadeS et Allah Bonheur...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

klaviebel · Message par **klaviebel** » 01 mai 2007, 09:19

voilà le code source en entier de la page "accueil"

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>accueil</title><style
 type="text/css">
essai {
text-decoration: overline line-through;
color: #cc6600;
background-color: #ffcccc;
font-family: Andale Mono IPA;
}
</style></head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(255, 204, 0); width: 800px;"
 alink="#000000" link="#000000" vlink="#990099"><br><br><table
 style="text-align: left; height: 537px; background-color: rgb(255, 204, 255); margin-left: 20%; width: 800px;"
 border="0" cellpadding="0" cellspacing="0"><tbody><tr><td
 style="background-color: rgb(255, 255, 255); text-align: center; width: 682px; height: 161px;"
 colspan="4" rowspan="1"><big><span
 style="font-weight: bold; font-family: Papyrus;"><img
 style="width: 800px; height: 141px;" alt=""
 src="logo%20Keo/logo%20ent%EAte%20page.jpg"></span></big></td></tr><tr
 align="center"><td colspan="4" rowspan="1"
 style="width: 682px; height: 45px;"><big
 style="font-family: Papyrus; color: rgb(255, 153, 0);"><big><big><span
 style="font-weight: bold;"><span
 style="color: rgb(0, 0, 0);"></span></span></big></big></big><big
 style="font-family: Monotype Corsiva;"><big><big><span
 style="font-family: Girls are Weird;"></span></big></big></big><big><span
 style="font-weight: bold; font-family: Papyrus;"></span><big
 style="color: rgb(153, 0, 0);"><big><span
 style="font-family: Papyrus;"><span
 style="font-family: Jester;"></span></span></big></big></big><big
 style="font-family: Monotype Corsiva;"><big><big><span
 style="font-family: Girls are Weird;"></span></big></big></big><big><big
 style="color: rgb(153, 0, 0);"><big><span
 style="font-family: Papyrus;"><span
 style="font-family: Jester;"></span></span></big></big></big><img
 style="width: 276px; height: 54px;" alt=""
 src="logo%20Keo/BijouxpourElle.jpg"></td></tr><tr
 align="center"><td colspan="4" rowspan="1"
 style="width: 682px;"><img
 style="width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/accueil_actif.gif">&nbsp;<a
 href="collections.html"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/collections.gif"></a> <a
 href="commander.html"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/commander.gif"></a> <a
 href="mailto:keocreations@free.fr"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/contact.gif"></a> <a
 href="portrait.html"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/portrait.gif"></a>&nbsp;<a
 href="curieuses.html"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/curieuses.gif"></a></td></tr><tr><td
 style="width: 71px;">&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;</td><td colspan="3"
 rowspan="1" style="width: 682px;"><br><h2
 style="font-family: Jester;"><span
 style="color: rgb(153, 0, 0);">Bienvenue
sur Keo !</span></h2><div
 style="text-align: justify; width: 747px;"><span
 style="font-family: Georgia;">&nbsp;&nbsp;&nbsp;
Vous trouverez
ici un
large choix de bijoux artisanaux créés à partir de <a
 href="curieuses.html">pâte polymère</a>. Ils sont
entièrement façonnés
à la main et à ce titre sont des modèles uniques. J'apporte un soin
particulier à toutes les étapes de la fabrication.</span><span
 style="font-family: Georgia;"><br>&nbsp;&nbsp;&nbsp;
Mes
créations vous sont présentées au travers de collections
thématisées selon leurs univers de références. </span><span
 style="font-family: Georgia;">Bon voyage à travers les
galeries !</span></div><br><div
 style="text-align: center; margin-left: 114px; width: 313px;"><br><big><big><span
 style="font-weight: bold;"></span></big></big></div><big><big><span
 style="font-weight: bold;"><small><small><small><span
 style="font-family: Arial;"></span></small></small></small></span></big></big></td></tr><tr><td
 style="width: 71px; background-color: rgb(255, 204, 255);"></td><td
 colspan="1" rowspan="1"
 style="width: 682px; background-color: rgb(255, 204, 255);"><div
 style="font-family: Curlz MT; text-align: center;"><div
 style="margin-left: 0px; margin-top: 0px; height: 71px; width: 570px; text-align: center;"><big><big><span
 style="font-weight: bold;"><span
 style="color: rgb(255, 204, 0);"></span></span></big><big
 style="font-family: Girls are Weird;"><big><span
 style="font-weight: bold;"><span
 style="color: rgb(255, 204, 0);"></span></span></big></big></big><big><big><span
 style="font-weight: bold;"><span
 style="color: rgb(255, 204, 0);"></span></span></big></big><big><big><span
 style="font-weight: bold;"></span></big></big><img
 style="width: 437px; height: 103px;" alt=""
 src="Les%20petits%20caprices%20du%20mois/capricedumoi.jpg"></div></div><big
 style="font-family: Curlz MT;"><big><span
 style="font-weight: bold;"><span
 style="color: rgb(255, 204, 0);"></span></span></big></big><big><big><span
 style="font-weight: bold;"><small><small><small><span
 style="font-family: Arial;"></span></small></small></small></span></big></big></td><td
 colspan="1" rowspan="1"
 style="width: 473px; text-align: justify;"><big><big><small><small><span
 style="font-family: Arial;"><span
 style="font-family: Georgia;"></span></span></small></small></big></big><big><big><small><small><span
 style="font-family: Arial;"><span
 style="font-family: Georgia;"></span></span></small></small></big></big><br><br><br><br></td><td></td></tr><tr><td
 colspan="4" rowspan="1" style="width: 682px;"><h4
 style="text-align: center;"><big><big><small><small><span
 style="font-family: Arial;"><span
 style="font-family: Georgia;"></span></span></small></small><span
 style="font-weight: bold;"><small><small><small><span
 style="font-family: Arial;"></span></small></small></small></span></big></big><span
 style="font-family: Georgia;">Je vous présente ici une
petite
sélection de bijoux à croquer sans modération !</span></h4><div
 style="text-align: center;"><big><big><span
 style="font-weight: bold;"><small><small><small><span
 style="font-family: Arial;"><a href="talisman.html"><span
 style="text-decoration: underline;"><img
 style="border: 0px solid ; width: 147px; height: 193px;" alt=""
 src="Les%20petits%20caprices%20du%20mois/miniatureREF%206%204%2081%2007.jpg"></span></a>&nbsp;&nbsp;
&nbsp;&nbsp; &nbsp;<a href="bleu.html"><span
 style="text-decoration: underline;"><img
 style="border: 0px solid ; width: 177px; height: 193px;" alt=""
 src="Les%20petits%20caprices%20du%20mois/miniatureREF%205%205%2052%2007.jpg"></span></a>
&nbsp; &nbsp;&nbsp;<a href="sautoir.html"><span
 style="text-decoration: underline;"><img
 style="border: 0px solid ; width: 253px; height: 193px;" alt=""
 src="Les%20petits%20caprices%20du%20mois/miniatureREF%203%206%2034%2007.jpg"></span></a></span></small></small></small></span></big></big></div></td></tr><tr><td
 style="width: 71px;"></td><td colspan="3"
 rowspan="1" style="width: 682px;">&nbsp;<h3
 style="text-align: center;"><span
 style="font-family: Jester;">Pour faire connaître le site de
Keo à vos
ami(e)s cliquez <a href="faire_connaitre.html">ici</a>!&nbsp;<a
 href="faire_connaitre.html"><img
 style="border: 0px solid ; width: 64px; height: 64px;" alt=""
 src="boutons%20de%20navigation/mailbox%20RED.png"></a></span></h3></td></tr><tr
 align="center"><td style="width: 71px;"></td><td
 colspan="3" rowspan="1"
 style="font-family: Georgia; width: 682px;"><big><small>Dernière
mise
à jour : le 24 Avril 2007</small></big></td></tr><tr
 align="center"><td colspan="4" rowspan="1"
 style="width: 682px;"><big><big><img
 style="width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/accueil_actif.gif">&nbsp;<a
 href="collections.html"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/collections.gif"></a> <a
 href="commander.html"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/commander.gif"></a> <a
 href="mailto:keocreations@free.fr"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/contact.gif"></a> <a
 href="portrait.html"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/portrait.gif"></a> <a
 href="curieuses.html"><img
 style="border: 0px solid ; width: 94px; height: 27px;" alt=""
 src="boutons%20de%20navigation/curieuses.gif"></a></big></big></td></tr></tbody></table></body></html>

Tiens, pour illustrer ce que j'écrivais hier, ici par exemple, tu vois toutes les polices que j'ai essayé avec lplus ou moins de big etc. Alors qu'en fait, il ne devrait y avoir que le chemin vers mon image "bijoux pour elle" (puisque je voulais conserver la police "Girls are wierd"j'ai fait une image

:

Code : Tout sélectionner

style="font-family: Papyrus; color: rgb(255, 153, 0);"><big><big><span
 style="font-weight: bold;"><span
 style="color: rgb(0, 0, 0);"></span></span></big></big></big><big
 style="font-family: Monotype Corsiva;"><big><big><span
 style="font-family: Girls are Weird;"></span></big></big></big><big><span
 style="font-weight: bold; font-family: Papyrus;"></span><big
 style="color: rgb(153, 0, 0);"><big><span
 style="font-family: Papyrus;"><span
 style="font-family: Jester;"></span></span></big></big></big><big
 style="font-family: Monotype Corsiva;"><big><big><span
 style="font-family: Girls are Weird;"></span></big></big></big><big><big
 style="color: rgb(153, 0, 0);"><big><span
 style="font-family: Papyrus;"><span
 style="font-family: Jester;"></span></span></big></big></big>

Bref, ça me parait pas très normal ça, non?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

klaviebel · Message par **klaviebel** » 01 mai 2007, 09:26

Ymai, je pensais te faire un petit mail sur ce qui m'a manqué dans ton tuto une fois que j'aurai assez de distance et de compréhension des CSS (parce que là, c'est encore un peu le brouillard). Ca n'empêche que je ne m'explique pas moi même pourquoi je n'ai pas réussi à reproduire l'utilisation de Kazcade, parce que c'est bien expliqué et ça n'a pas l'air sorcier mais bon... on peut pas toujours être bon ?!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Message par **Ymai** » 01 mai 2007, 09:38

klaviebel a écrit :Ymai, je pensais te faire un petit mail sur ce qui m'a manqué dans ton tuto une fois que j'aurai assez de distance et de compréhension des CSS

Cela me serait effectivement très utile. Merci d'avance pour cette contribution.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Message par **Ymai** » 01 mai 2007, 09:52

klaviebel a écrit :voilà le code source en entier de la page "accueil"

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>accueil</title><style
 type="text/css">
essai {
text-decoration: overline line-through;
color: #cc6600;
background-color: #ffcccc;
font-family: Andale Mono IPA;
}
</style>

Si je ne m'abuse, tout le reste ne concerne absolument plus l'éditeur de styles KaZcadeS.
La seule chose qu'il ait produite est le contenu de la zone

Code : Tout sélectionner

<style
 type="text/css">
essai {
text-decoration: overline line-through;
color: #cc6600;
background-color: #ffcccc;
font-family: Andale Mono IPA;
}
</style>

Toutes les mises en formes, y compris les directives relatives aux polices de caractères, sont obtenues en utilisant la barre d'outils de mise en forme de KompoZer et non l'éditeur de styles.
Il n'est pas étonnant de retrouver dans le code les traces de tous les errements, tâtonnements et autres hésitations. KompoZer n'a aucun moyen de savoir que lorsqu'on applique une certaine police de caractères à un bout de texte, puis qu'on en applique une autre parce que la première ne convenait pas, l"application de la première police doit être supprimée. Et tout s'accumule. Idem pour les <big><big></big></big>....
L'idéal serait d'avoir un outil du même type que le nettoyeur de balises et qui pourrait nettoyer le code a posteriori. Cela ne doit pas être très compliqué à programmer (un petit algorithme bien récursif...). Utilisant KaZcadeS et n'ayant pas trop de temps, je n'ai jamais été assez motivé pour le faire moi-même.
Avec l'éditeur de styles, on teste une police de caractères pour tous les éléments de type h1, par exemple. On voit ce que cela donne à l'écran; si ça ne convient pas, on change et l'ancienne version est remplacée: elle ne peut plus apparaître.
Cela demande toutefois que le texte soit bien structuré au départ. Que tous les composants aient été bien définis. Donc, ne pas partir bille en tête sur le clavier, mais recourir au bon vieux papier/crayon.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Mongo Bob · Message par **Mongo Bob** » 01 mai 2007, 10:24

Ymai a écrit :Intégré, interne, c'est la même chose. Les deux termes me semblent tellement évidemment synonymes que je ne suis peut-être pas assez attentif. Dois-je vraiment utiliser un seul des deux?

Et enfin, Kazcades utilise le terme de feuille "incorporée"!

"Interne" s'imposerait, je pense.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Message par **Ymai** » 01 mai 2007, 11:04

L'oracle Gogole a réondu:
CSS interne: 1.200.000 résultats
CSS incorporée: 73.000 résultats
Il n'en reste pas moins que tant KpZ que NVU utilisent "incorporée".
Je ne change donc rien pour l'instant malgré le score stalinien de "interne".

PS: en plus, "in-corporé", ça me fait même penser plutôt aux styles en ligne, dans le corps de la page... Bref, pas terrible.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

klaviebel · Message par **klaviebel** » 01 mai 2007, 11:04

Si je ne m'abuse, tout le reste ne concerne absolument plus l'éditeur de styles KaZcadeS.
La seule chose qu'il ait produite est le contenu de la zone

effectivement, c'est le code source de ma page accueil avant transformation...
N'empêche que ça me fait plaisir d'écrire directement des codes dans NotePad++ (ça me donne une légère impression d'avoir progressé, et de passer de l'autre côté du miroir!

)[/quote]

Ymai a écrit:
Intégré, interne, c'est la même chose. Les deux termes me semblent tellement évidemment synonymes que je ne suis peut-être pas assez attentif. Dois-je vraiment utiliser un seul des deux?

Et enfin, Kazcades utilise le terme de feuille "incorporée"! Clin d'oeil "Interne" s'imposerait, je pense.

Bon, j'avais bien compris, c'est déjà ça!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Geckozone

CSS et autres embrouilles....

CSS et autres embrouilles....

Qui est en ligne ?