se servir d'une feuille de style apres l'avoir créée

ChristianTRAMBLY · Message par **ChristianTRAMBLY** » 03 oct. 2007, 00:16

Bonjour ,

Je commence mon deuxieme site . mais cette fois je veux utiliser une feuille de style pour servir de squelette à toutes les autres pages du site.
Je voudrais que toutes les pages aient la banniere, le menu , le style d'ecriture position des images en commun . Que si je veux faire une modif , je la fais sur le feuille de style et ceci se repercutera sur toutes les pages.

La démarche est-elle bonne?

J'ai donc créé un fichier en ".html" que j'ai sauvegardé en ".css" . je crée ensuite une page vierge où je voudrais importer les styles definis dans le fichier en ".css" en incorporant la syntaxe "<link.......... etc

Mais la page reste toujours vierge ...

Pourrais-je vous montrer ma feuille de style pour que je parte sur des bases saines

(M'indiquer comment je peux la mettre en fichier attaché

Merci d'avance

Chrstian

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

Message par **chinon37** » 03 oct. 2007, 09:20

ChristianTRAMBLY a écrit :Bonjour ,

Bonjour,

Je commence mon deuxième site . mais cette fois je veux utiliser une feuille de style pour servir de squelette à toutes les autres pages du site.

nan, nan

Je voudrais que toutes les pages aient la banniere, le menu , le style d'ecriture position des images en commun .

ne pas mélanger bannière, menu avec style d'écriture et position des éléments

Que si je veux faire une modif , je la fais sur le feuille de style et ceci se repercutera sur toutes les pages.

Bien pensé

La démarche est-elle bonne?

oui, sans aucun doute

J'ai donc créé un fichier en ".html" que j'ai sauvegardé en ".css" .

ça se gâte

je crée ensuite une page vierge où je voudrais importer les styles definis dans le fichier en ".css" en incorporant la syntaxe "<link.......... etc

pas mal de mélange

Mais la page reste toujours vierge ...

logique

Pourrais-je vous montrer ma feuille de style pour que je parte sur des bases saines

même pas la peine

(M'indiquer comment je peux la mettre en fichier attaché

il faut revoir les bases

Merci d'avance

y'a pas de quoi

Chrstian

Chinon37

Bien, en fait tu mélanges feuille de style css et modèle.
Le modèle est une page html que tu crées lors de l'enregistrement de ta première page comme modèle
Nota: je constate que dans KpZ 0.7.10 (dernière version connue à ce jour), cette possibilité a d'ailleurs disparue...pas gênant car ce n'était pas très satisfaisant
une feuille de style externe est un fichier texte à part de la page html et non la page html renommée. Généralement, on l'enregistre avec l'extension .css, c'est ce que fait évidement KpZ.
Ce fichier css contient les éléments de mise en page de ta page (police, couleurs de texte et de fond de page ou d'éléments, position des différents éléments, etc...)
Avec Kpz, la feuille de style est créée par un module appelé éditeur css. L'éditeur css peut être ouvert par f11 ou par outils, éditeur css... ou par une icône en forme de palette d'artiste peintre .
Il existe 2 types de feuilles de styles: la feuille liée et la feuille de style interne.
La feuille interne n'est pas un fichier à part. Tous les styles sont inclus dans le code source de la page concernée avant la balise <body>. Les styles ne concerneront que cette page.
La feuille de style externe est un fichier à part et dans le code source de la page, un lien renvoie vers ce fichier pour la mise en forme de la page.
C'est ce 2eme cas qui t'intéresse plus ou moins.
En effet, non seulement, tu veux le même design sur toutes les pages, mais tu veux aussi les mêmes éléments: là, il faut plutôt passer par des pages php avec la commande include.
Il serait un peu long d'expliquer tout ça, mais il en a déjà été question sur le forum.
avec la fonction "rechercher", tu devrais trouver ton bonheur.
Bonne journée

Message par **chinon37** » 03 oct. 2007, 09:29

Je pense que pour démarrer, tu pourrais t'inspirer de ce modèle:
http://www.geckozone.org/forum/viewtopic.php?t=57420
Ensuite, tu pourras le personnaliser et voir ce qu'il est possible de mettre en "include".

Par exemple, sur ce site, le menu du haut et le menu latéral sont en "include", donc dans des fichiers séparés. La feuille de style est externe également permettant la modification de toutes les pages en un coup de cuillère à pot.

ChristianTRAMBLY · Message par **ChristianTRAMBLY** » 08 oct. 2007, 22:43

Bonjour,

Je pietine ...

J'ai créé la page ci-dessous dans le but de sauvegarder la feuille de styles en .css puis incorporer le lien pour faire les autres pages.

et je coince . Qui y a-t-il d'incorrect ?

Que garde-t-on dans le fichier .css

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
 templateref="file:///D:/Christian/Granbo/chalet.html"><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>chalet</title><style
 type="text/css">
#conteneur {
border: 1px solid #993399;
width: 90%;
margin-left: 15%;
background-color: #ccccff;
}
#entete {
width: 100%;
background-color: #99ff99;
}
#menu {
width: 150px;
float: left;
color: #336666;
font-weight: bold;
font-style: italic;
text-align: center;
background-color: #ccccff;
line-height: normal;
font-family: Arial,Helvetica,sans-serif;
font-size: 11pt;
}
#texte {
margin-left: 150px;
font-style: italic;
font-weight: bold;
text-align: left;
background-color: #847094;
color: #66cccc;
}
#pied {
border-color: #333300;
background-color: #cc0000;
clear: left;
}
h2 {
color: #cc66cc;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
font-style: oblique;
}
imggauche {
border: 12px solid #336666;
float: left;
margin-left: 20px;
color: #cc9933;
}
imgdroite {
border-color: #ff0000;
float: right;
margin-right: 20px;
}
</style></head>
<body style="width: 918px;"><div style="width: 750px;"
 id="conteneur"><div style="width: 750px;"
 id="entete"><img style="width: 697px; height: 49px;"
 alt="banniere_champel" src="images/banniere_chalet_champel.jpg"
 vspace="5"></div><div style="height: 132px;"
 id="menu"><table
 style="text-align: left; width: 145px; height: 121px;"
 border="1" cellpadding="2" cellspacing="2"><tbody><tr
 align="center"><td><small>Le Chalet</small></td></tr><tr
 align="center"><td><small>L'appartement</small></td></tr><tr
 align="center"><td><small>Le Grand-Bornand</small></td></tr><tr
 align="center"><td><small>Tarifs et
disponibilités</small></td></tr><tr align="center"><td><small>Nous
contacter</small></td></tr></tbody></table></div>
<div id="texte"><div><h2>Texte</h2></div></div><div
 style="width: 750px;" id="pied">Pied</div></div></body></html>

Merci d'avance

Christian

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

Invité · Message par **Invité** » 08 oct. 2007, 23:50

Bonjour
Je ne vois rien de foncièrement incorrect.
Bon, une largeur de 90% avec une marge gauche de 15%, ça fera peut-être un peu trop de %. Mais tout dépend sans doute de la taille des %

La feuille de style exportée contiendra bien 8 styles:

Code : Tout sélectionner

/* Generated by KompoZer */
#conteneur {
  border: 1px solid #993399;
  width: 90%;
  margin-left: 15%;
  background-color: #ccccff;
}
#entete {
  width: 100%;
  background-color: #99ff99;
}
#menu {
  width: 150px;
  float: left;
  color: #336666;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  background-color: #ccccff;
  line-height: normal;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11pt;
}
#texte {
  margin-left: 150px;
  font-style: italic;
  font-weight: bold;
  text-align: left;
  background-color: #847094;
  color: #66cccc;
}
#pied {
  border-color: #333300;
  background-color: #cc0000;
  clear: left;
}
h2 {
  color: #cc66cc;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  font-style: oblique;
}
imggauche {
  border: 12px solid #336666;
  float: left;
  margin-left: 20px;
  color: #cc9933;
}
imgdroite {
  border-color: #ff0000;
  float: right;
  margin-right: 20px;
}

Où serait le souci?

[edit]Ouuups... Je n'avais pas lu le début.
La technique à utiliser est décrite là, par exemple: http://info.sio2.be/kpz/2/12.php [/edit]

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)

Message par **chinon37** » 09 oct. 2007, 07:41

pour utiliser la feuille de style dans les pages suivantes, ill faut:
- exporter celle-ci. dans l'éditeur css de KpZ > clic sur la feuille de style > "exporter la feuille de style et utiliser ..."
- à la place de tes styles, tu auras dans ton code quelque chose du genre:

Code : Tout sélectionner

<link media="all" rel="stylesheet" href="style.css" type="text/css">

- il suffira de reporter ce code pour toutes tes pages pour bénéficier de la feuille de style exportée

ChristianTRAMBLY · Message par **ChristianTRAMBLY** » 09 oct. 2007, 22:12

Bonsoir,

Merci pour l'explication :exporter la feuille de style
Ca marche

Maintenant un autre probleme :
je veux inserer une image à gauche avec du texte flottant (comme sur "infosio2.be/kpz/3/9.php
mais il semble manquer quelque chose au niveau du bloc texte .

dois-je faire un paragraphe ou seulement un <div id>

et je n'arrive pas à appliquer la classe image gauche

je ne vais tout de même pas abandonner

@+

Christian

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
 templateref="file:///D:/Christian/Granbo/stylegranbo.html"><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>chalet</title><style
 type="text/css">
#conteneur {
border: 1px solid #993399;
width: 90%;
margin-left: 5%;
background-color: #ccccff;
}
#entete {
width: 100%;
background-color: #99ff99;
}
#menu {
width: 150px;
float: left;
color: #336666;
font-weight: bold;
font-style: italic;
text-align: center;
background-color: #ccccff;
line-height: normal;
font-family: Arial,Helvetica,sans-serif;
font-size: 11pt;
}
#texte {
margin-left: 150px;
font-style: italic;
font-weight: bold;
text-align: left;
background-color: #847094;
color: #66cccc;
}
#pied {
border-color: #333300;
background-color: #cc0000;
clear: left;
}
h2 {
color: #cc66cc;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
font-style: oblique;
}
imggauche {
border: 12px solid #336666;
float: left;
margin-left: 20px;
color: #cc9933;
}
imgdroite {
border-color: #ff0000;
float: right;
margin-right: 20px;
}
</style></head>
<body style="width: 918px;"><div style="width: 750px;"
 id="conteneur"><div style="width: 750px;"
 id="entete"><img src="images/banniere_chalet_champel.jpg"
 alt="banniere_champel" style="width: 751px; height: 52px;"
 vspace="5"></div><div style="height: 132px;"
 id="menu"><table
 style="text-align: left; width: 145px; height: 121px;"
 border="1" cellpadding="2" cellspacing="2"><tbody><tr
 align="center"><td><small>Le Chalet</small></td></tr><tr
 align="center"><td><small>L'appartement</small></td></tr><tr
 align="center"><td><small>Le Grand-Bornand</small></td></tr><tr
 align="center"><td><small>Tarifs et
disponibilités</small></td></tr><tr align="center"><td><small>Nous
contacter</small></td></tr></tbody></table></div>
<div id="texte"></div><div style="width: 750px;"
 id="pied">Pied</div></div></body></html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

Message par **Ymai** » 09 oct. 2007, 23:18

Re-
Il me semble voir un souci au niveau de la feuille de style.
Tu définis une "class" imggauche comme si "imggauche" était une balise HTML.
En fait, il faut la déclarer comme

Code : Tout sélectionner

.imggauche {
  bla bla bla
}

C'est le "." qui fait toute la différence.
Et même remarque, bien sûr, pour .imgdroite .

D'autre part, pas besoin d'ajouter un bloc <div> pour positionner une image. Cette "class" s'applique directement à la balise <img> correspondante.
Donc,
* clic sur l'image concernée pour la sélectionner
* clic droit sur la balise <img> dans la barre des tâches, au bas de l'écran.
* dans la liste déroulante, sélectionner la commande "classes" puis "imggauche" ou "imgdroite"

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)

ChristianTRAMBLY · Message par **ChristianTRAMBLY** » 02 nov. 2007, 09:33

Bonjour,

Mon site avance: j'ai utilisé les CSS

Maintenant je "fignole"et j'ai deux petites questions:

je ne sais pas comment faire des modifs sur le fichier CSS:
J'ai voulu ajouter un retrait de ligne à chaque paragraphe alors étant sur une page , je crée la regle de style sur p qui bien---------> tous les paragrahes de la page ont cette proprieté .

Mais comment exporter ceci dans le fichier ";css"

J'ai cherché un bouton exporter et waloo

En deux , j'ai fait un page avec des photos et du texte alterné à droite et à gauche comme expliqué sur "http://info.sio2.be/kpz/3/9.php"

Mais ce que je veux c'est lié quelques lignes de texte à coté de photo une fois à droite un fois gauche

Alors quelle technique utilisée ? Tableau une seule colonne? Bloc ?

Merci d'avance pour les reponses

Bonne journée

Christian

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

Message par **Ymai** » 02 nov. 2007, 10:00

Bonjour

ChristianTRAMBLY a écrit : je crée la regle de style sur p qui bien---------> tous les paragrahes de la page ont cette proprieté .
Mais comment exporter ceci dans le fichier ";css"

La nouvelle propriété des <p> se trouve donc, a priori, dans la feuille de style interne.
Lorsque tous les styles auront été créés et donneront satisfaction en interne, il suffit d'exporter la feuille de style dans son entier.
http://info.sio2.be/kpz/2/12.php

Mais ce que je veux c'est lié quelques lignes de texte à coté de photo une fois à droite un fois gauche
Alors quelle technique utilisée ? Tableau une seule colonne? Bloc ?

S'il s'agit de faire en sorte que l'image reste obligatoirement entièrement à gauche ou à droite du texte, sans habillage par celui-ci (le texte qui coulerait autour de l'image), je proposerais quelque chose comme ceci:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>tetq</title><style
 type="text/css">
.blocImageGauche p {
  margin-left: 225px;
}
.imageGauche {
  float: left;
}

</style></head><body>
<div class="blocImageGauche">
<img class="imageGauche" style="width: 200px; height: 200px;"
 alt="texte alternatif" src="image.png">
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla 
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
 </p>
</div>
</body></html>

Le bloc "blocImageGauche" serait muni d'une marge suffisante pour les paragraphes contenus. Dans mon exemple, 225px si les images mesurent 200px.
Les images contenues dans ce bloc ne sont pas soumises à cette marge et se calent donc à gauche. Elles sont flottantes pour laisser le texte se disposer directement à leur droite.

Idem pour les images à droite.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Ubuntu/7.10 (gutsy) Firefox/2.0.0.8

Message par **chinon37** » 02 nov. 2007, 10:04

La règle de style sur <p>, tu l'as créée dans la feuille de style externe ou la feuille de style interne?
externe: c'est un fichier css séparé qui est lié à tes pages html par le code suivant dans la page html:

Code : Tout sélectionner

<link media="all" rel="stylesheet" href="styles/mafeuille.css" type="text/css">

le href étant évidemment l'adresse de ta feuille de style
Dans l'éditeur css, tu auras comme référence de feuille de style (panneau de gauche): + styles/mafeuille.css
Interne: les régles de ta feuille de style sont incluses dans le code de ta page html
Dans l'éditeur css, tu auras comme référence de feuille de style (panneau de gauche): +feuille de style interne.
Dans le 2eme cas, les styles sont appliqués uniquement à la page en cours
dans le 1er cas, les styles sont appliqués à toutes les pages ayant la ligne de code ci-dessus.
Une feuille de style interne peut très bien être exportée pour être ensuite utilisées pour toutes les pages. Dans l'éditeur css, il suffit de cliquer sur exportez la feuille de style et ...

[edit: tiens, Ymai n'est pas en vacances?

)

ChristianTRAMBLY · Message par **ChristianTRAMBLY** » 04 nov. 2007, 19:40

Bonjour,

J'ai fait un essai ...

J'ai peut-être oublié quelque chose

alors voilà :

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>tetq</title><style
 type="text/css">
.blocImageGauche p {
margin-left: 225px;
}
.imageGauche {
float: left;
}
.blocImageDroite p {
margin-right: 225px;
}
.imageDroite {
float: right;
}
</style></head><body>
<div class="blocImageGauche"><img class="imageGauche"
 style="width: 200px; height: 200px;" alt="texte alternatif"
 src="file:///D:/Christian/Granbo/granbo/images/garage.jpg"><p></p><p>Bla
bla bla Bla bla bla Bla bla bla Bla bla
bla Bla bla bla Bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla&nbsp;</p><p></p><p></p><p></p>
<div class="blocImageDroite"><img class="imageDroite"
 style="width: 200px; height: 200px;" alt="texte alternatif"
 src="file:///D:/Christian/Granbo/granbo/images/garage.jpg"><p>Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla&nbsp;</p><p></p><p></p><p></p><p><img
 class="imageGauche" style="width: 200px; height: 200px;"
 alt="texte alternatif" src="../Granbo/granbo/images/garage.jpg"></p><p></p><p>Bla
bla bla Bla bla bla Bla bla bla Bla bla
bla Bla bla bla Bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p><p>
</p></div><p></p></div></body></html>

J'ai fait un autre essai avec un tableau 1 colonne mais comment maitriser la hauteur des cellules . C'est anarchique

J'ai une autre idée : avec des caracteres de la couleur du fond pour faire des lignes avant et apres le texte pour donner du volume au paragraphes ou des paragraphes fictifs de la couleur du fond pour les rendre invisibles

En esperant avoir été clair .

Merci d'avance

Christian

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

Message par **Ymai** » 04 nov. 2007, 19:53

ChristianTRAMBLY a écrit :Bonjour,

J'ai fait un essai ...

J'ai peut-être oublié quelque chose

alors voilà :

Le seul souci que je sois capable de percevoir, ce sont les adresses des images qui ne sont pas relatives.
Sinon?

J'ai fait un autre essai avec un tableau 1 colonne mais comment maitriser la hauteur des cellules . C'est anarchique

Fausse bonne idée. Les tableaux sont comme des corsets inconfortables (enfin, j'imagine). Dès que l'on veut changer la moindre chose après, c'est galère.
Et, a priori, ça ne sert pas à faire de la mise en page.

J'ai une autre idée : avec des caracteres de la couleur du fond pour faire des lignes avant et apres le texte pour donner du volume au paragraphes ou des paragraphes fictifs de la couleur du fond pour les rendre invisibles

C'est une deuxième fausse bonne idée. Il suffit que le visiteur change un peu la taille des caractères (Affichage > Taille du texte) pour que la mise en page devienne n'importe quoi.

En esperant avoir été clair .

Ben, à vrai dire... Si je puis être tout à fait honnête: il en manque juste un poil pour ce soit assez clair pour moi

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Ubuntu/7.10 (gutsy) Firefox/2.0.0.8

Geckozone

se servir d'une feuille de style apres l'avoir créée

se servir d'une feuille de style apres l'avoir créée

Re: se servir d'une feuille de style apres l'avoir créée

créer le fichier .css

mise à jour fichier css

Re: mise à jour fichier css

images flottantes alternées

Re: images flottantes alternées

Qui est en ligne ?