disposer images avec "class"

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

Répondre
mobq
Arias
Messages : 10
Inscription : 02 févr. 2012, 23:42

disposer images avec "class"

Message par mobq »

Bonsoir,
Je débute en CSS (après avoir créé un site avec Frontage que je veux modifier).

Après avoir défini la largeur de la page d'accueil, j'ai créé une id"entête" dans lequel j'ai inséré 4 images en ligne. Lorsque je les insère toutes à la suite et ensuite leur attribue "class" je peux placer celle de droite mais ensuite pour les autres elles semblent liées et se déplacent ensemble. J'ai donc insérer une image à la fois et déplacer avec "class" j'ai obtenu à peu près ce que je voulais, mais pas dans le navigateur mais je ne peux améliorer, tout le groupe se déplace en même temps.

Je voudrais commencer du bon pied.
Pourquoi dans le code les accolades de fin, des images se mettent avant ? je dois dire que ce logiciel se bloque assez souvent je dois le fermer et le rouvrir ensuite ?
merci

Code : Tout sélectionner


body {
  margin: auto;
  display: block;
  width: 820px;
}
#entete {
  font-family: "Times New Roman",Times,serif;
}
.imagea {
  margin-left: 21px;
}
.imageb {
  margin-bottom: 18px;
  margin-left: 60px;
}
.imagec {
  margin-bottom: 17px;
  margin-left: 36px;
}
.imaged {
  margin-bottom: 18px;
  margin-left: 44px;
}
h3 {
  font-family: "Times New Roman",Times,serif;
  line-height: 0em;
  font-size: 0.98em;
  margin-left: 37px;
}
[modo]Rationalisation du code[/modo]
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: disposer images avec "class"

Message par Ymai »

Bonjour
mobq a écrit : Après avoir défini la largeur de la page d'accueil, j'ai créé une id"entête" dans lequel j'ai inséré 4 images en ligne. Lorsque je les insère toutes à la suite et ensuite leur attribue "class" je peux placer celle de droite mais ensuite pour les autres elles semblent liées et se déplacent ensemble. J'ai donc insérer une image à la fois et déplacer avec "class" j'ai obtenu à peu près ce que je voulais, mais pas dans le navigateur mais je ne peux améliorer, tout le groupe se déplace en même temps.

Je voudrais commencer du bon pied.
Pourquoi dans le code les accolades de fin, des images se mettent avant ? je dois dire que ce logiciel se bloque assez souvent je dois le fermer et le rouvrir ensuite ?
merci

Code : Tout sélectionner


body {
  margin: auto;
  display: block;
  width: 820px;
}
#entete {
  font-family: "Times New Roman",Times,serif;
}
.imagea {
  margin-left: 21px;
}
.imageb {
  margin-bottom: 18px;
  margin-left: 60px;
}
.imagec {
  margin-bottom: 17px;
  margin-left: 36px;
}
.imaged {
  margin-bottom: 18px;
  margin-left: 44px;
}
h3 {
  font-family: "Times New Roman",Times,serif;
  line-height: 0em;
  font-size: 0.98em;
  margin-left: 37px;
}
Le principe des "class(es)" est précisément que plusieurs objets différents peuvent recevoir la même "class". Inutile donc de définir une "imagea", "imageb",... Une seule class "image" suffit.
Question: pourquoi attribuer des caractéristiques différentes à chacune des "imagex" ?
A priori, vu les attributs des "imagex" actuelles, rien ne justifie qu'elles se comportent comme décrit. Y aurait-il quelque chose de particulier dans le code HTML?

La position de la "class" dans la feuille de style est complètement indifférente. Au début, à la fin, au milieu: peu importe.

Quelle version de KompoZer est concernée? Des "blocages" complets ne figurent pas dans les bugs connus de la dernière version existante: 0.8b3
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
mobq
Arias
Messages : 10
Inscription : 02 févr. 2012, 23:42

Re: disposer images avec "class"

Message par mobq »

Bonsoir,
version 0.8b3 (20100301) c'est la version que j'utilise, depuis le dernier mail, j'ai eu d'autres problèmes, disparition dans l'éditeurCSS (colonne de gauche) des attributs, ne restent que "body" et "h3" cependant ils se trouvent tous dans la liste déroulante "créer un style" et aussi dans la barre d'état en bas lorsqu'on clique sur un des éléments. J'ai recommencé mais j'ai un *I devant chaque attribut, j'ai le même problème que celui cité dans le forum le 30 janvier...pour info j'ai Win7 64b SP2.

Pour ce qui est des images je vais recommencer sans "class" mais je ne sais comment dans le guide j'ai bien lu propriété "float" mais right et left ne sont pas assez précis pour placer ces 4 images ?

Encore 2 questions il y at il une version plus stable ou sinon où se trouve le bouton pour notepad

merci
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: disposer images avec "class"

Message par Ymai »

Bonjour
mobq a écrit :Bonsoir,
version 0.8b3 (20100301) c'est la version que j'utilise, depuis le dernier mail, j'ai eu d'autres problèmes, disparition dans l'éditeurCSS (colonne de gauche) des attributs, ne restent que "body" et "h3" cependant ils se trouvent tous dans la liste déroulante "créer un style" et aussi dans la barre d'état en bas lorsqu'on clique sur un des éléments. J'ai recommencé mais j'ai un *I devant chaque attribut, j'ai le même problème que celui cité dans le forum le 30 janvier...pour info j'ai Win7 64b SP2.
Ce bug-là est connu.
Je pense que quelqu'un avait trouvé une rustine plus élégante que la suppression des "|" dans un éditeur de textes utilisé en parallèle; Que celui/celle-là se manifeste, si possible... Trop la flemme de chercher :twisted:
Pour ma part, c'est un souci que je ne rencontre pas ou que j'ai peut-être vu une fois ou deux dans ma carrière.
Est-ce lié à une différence de pratique ou à une différence d'OS?
Peut-être est-ce seulement dû au fait que je ne touche presque jamais à mes feuilles de styles qui sont (suffisamment) au point pour moi.
Pour ce qui est des images je vais recommencer sans "class" mais je ne sais comment dans le guide
Le guide?
j'ai bien lu propriété "float" mais right et left ne sont pas assez précis pour placer ces 4 images ?
J'aurai essayé :? .

Encore 2 questions il y at il une version plus stable ou sinon où se trouve le bouton pour notepad
Il n'existe pas de version plus stable. Il serait étonnant qu'il en existât une un jour. Et beaucoup le regrettent.
Le bouton pour accéder à un éditeur de textes externes est celui qui est marqué "<HTML>".
Sous Windoze, on ne saurait trop conseiller de remplacer Notepad par Notepad++
Dans KpZ, ll faut configurer l'éditeur externe dans
> Préférences > Applications > Applications > Editeur de textes
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Re: disposer images avec "class"

Message par chinon37 »

Il me semble que ce bug est lié à une manip très précise (lièe à l'onglet source, je crois).
Mais aussi la flemme de chercher dans le forum pour retrouver le post.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
atheo
Lézard vert
Messages : 181
Inscription : 03 févr. 2010, 15:45

Re: disposer images avec "class"

Message par atheo »

"mais je crains qu'il n'ait jamais été possible de trouver une façon de provoquer la faute et donc d'y remédier."


Cette histoire de | dans les CSS est parfaitement reproductible.
Il suffit d'aller bricoler dans la source...

Je ne l'ai plus, bien sûr puisque j'utilise notepad ++


C'est un de mes messages et je persiste et signe...
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: disposer images avec "class"

Message par Ymai »

Bonjour
atheo a écrit :Il suffit d'aller bricoler dans la source...
Je m'en voudrais de paraître négatif, mais je bricole *tout le temps* dans le fichier source.
À la différence possible que mes CSS sont presque entièrement externes. Juste quelques retouches à gauche et à droite, de temps en temps.
Je m'en viendrais donc proposer l'externalisation des CSS comme une bonne parade. Et, de toute façon, c'est une bonne pratique.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
atheo
Lézard vert
Messages : 181
Inscription : 03 févr. 2010, 15:45

Re: disposer images avec "class"

Message par atheo »

Quand je dis "bricoler" ça n'a rien de péjoratif.

Mes feuilles CSS sont externalisées.
Il n'empêche que tu te mets en mode "conception"
Tu crées une page quelconque qui utilise tes feuilles CSS
Tu vas sur l'onglet "source"
Tu corriges ne serait ce qu'une faute d'orthographe. (ok il y plus simple)
Tu retournes dans "conception"

Tu regardes ton ou tes fichiers CSS et bingo... tu as tes |*

Et ça fonctionne à tous les coups.

Donc ce bug est parfaitement reproductible.
Et donc si je dois "bricoler" dans la source, j'utilise notepad++
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Re: disposer images avec "class"

Message par chinon37 »

Merci Atheo, il me semblait bien qu'il y avait un truc comme ça.

Merci de nous rafraichir la mémoire (à défaut de la glotte :lol: )
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: disposer images avec "class"

Message par Ymai »

atheo a écrit :Quand je dis "bricoler" ça n'a rien de péjoratif.
Moi non plus :wink:
Conclusion: le phénomène m'est resté complètement invisible depuis tout le temps où j'utilise KpZ.
L'apparition des "|" semble être complètement interne à KompoZer: en réalité, les CSS externes ne sont pas modifiés. Jusqu'au moment où l'on tente une édition de CSS dans KpZ.
C'est directement lié à la page dans laquelle on fait l'édition en mode "Source". Une autre page ouverte simultanément et qui partage les CSS externes n'est pas affectée.
Si on ferme puis on ré-ouvre immédiatement la page affectée, tout rentre dans l'ordre.

Et s'il y avait un spécialiste du rafraîchissement de la glotte dans les parages, ce ne serait pas de refus.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
mobq
Arias
Messages : 10
Inscription : 02 févr. 2012, 23:42

Re: disposer images avec "class"

Message par mobq »

merci je prends note, je travaille avec des feuilles de style externe.
J'ai aussi sur le conseil de Ymai configurer l'éditeur externe notepad++.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité