Page 1 sur 1

disposer images avec "class"

Publié : 29 mars 2012, 22:49
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]

Re: disposer images avec "class"

Publié : 30 mars 2012, 23:55
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

Re: disposer images avec "class"

Publié : 02 avr. 2012, 00:15
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

Re: disposer images avec "class"

Publié : 02 avr. 2012, 08:47
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

Re: disposer images avec "class"

Publié : 02 avr. 2012, 12:38
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.

Re: disposer images avec "class"

Publié : 02 avr. 2012, 17:57
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...

Re: disposer images avec "class"

Publié : 02 avr. 2012, 19:04
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.

Re: disposer images avec "class"

Publié : 02 avr. 2012, 20:32
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++

Re: disposer images avec "class"

Publié : 02 avr. 2012, 20:48
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: )

Re: disposer images avec "class"

Publié : 02 avr. 2012, 21:12
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.

Re: disposer images avec "class"

Publié : 03 avr. 2012, 00:07
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++.