Centrer une image avec Cascades [Résolu]

Gagea · Message par **Gagea** » 02 août 2008, 08:37

Bonjour,
J'ai bien compris pour faire flotter des images à droite et à gauche mais comment doit-on s'y prendre pour avoir des images centrées sans utiliser l'outil Centrer de la barre Mise en forme 2 ?
http://josar.free.fr/tutoKompozer/premierSite.html
J'ai regardé l'Aide et les sujets déjà postés sur ce thème mais je n'ai pas trouvé de réponse.
Merci d'avance

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

Mongo Bob · Message par **Mongo Bob** » 02 août 2008, 09:31

Bonjour, comment fais-tu pour les aligner à droite ou à gauche?
Pour éviter la barre de mise en forme 2, qu'il est déconseillé d'utiliser, on peut créer un <div>, puis dans la barre d'état (tout en bas), clic droit sur <div>/Styles internes/Boîte/Indiquer la largeur de l'image comme largeur, et donner la valeur "auto" à Marge droite et Marge gauche.
Retour dans Normal, clic dans le <div>,insérer l'image.

On peut créer un <div> par l'interface de Kpz, par la punaise "dissocier du texte", à droite (Barre de mise en forme 1) mais ça me paraît hasardeux (la phrase "dissocier du texte" est obscure) et ensuite, il faut faire disparaître dans <div>/Styles internes/Boîte, l'indication "Absolu" pour indiquer "Non défini", le centrage par "margin: auto" ne marche que en Non défini (=dans le flux) et les indications de positionnement de Décalage droit et gauche qui sont du coup superflues, et même absurdes, avant de préciser largeur et marge. Compliqué à expliquer dans un tuto, tout ça.

Y a-t'il un moyen plus simple de créer un <div> dans l'onglet Normal de Kpz. Vive l'éditeur-texte par Handcoder, tu tapes <div></div> et c'est fait!

J'espère que Kaze reverra cette phrase absconse "dissocier du texte", ça veut dire quoi, en fait?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Mongo Bob · Message par **Mongo Bob** » 02 août 2008, 11:00

J'avais pas vu "avec Cascades" dans le titre, et tu as une feuille de style externe, donc : après avoir créé ce fameux div, lui donner une "id" (ou une classe si toutes tes images à centrer auront la même largeur) par : dans la barre d'état, clic droit sur <div>/Propriétés avancées/Onglet Attributs html/Flèche noire de "Attribut" en bas, choisir "id" ou "classe"/Valeur : donner le nom que tu veux, puis :
dans Cascades, créer une règle pour le nom que tu as choisi après avoir coché "Style appliqué à l'élément portant l'id" ou "...aux éléments de même classe", puis reprendre comme ci-dessus en allant dans l'onglet Boîte de ton id (ou classe) pour appliquer les valeurs de largeur (la même que celle de l'image) et de marge g et dr "auto". OK.

Je m'interroge toujours sur la façon de créer un <div> par l'onglet Normal de Kpz.
Par ailleurs, je te conseille de t'adjoindre Tidy pour nettoyer ton code, précisions suivent si tu es intéressée...
Ton code actuel :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html
 lang="fr"><head> <meta name="generator"
 content="HTML Tidy for Windows (vers 18 June 2008), see www.w3.org"> <meta
 content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Mon
premier site</title><link rel="stylesheet" href="monStyle.css"
 type="text/css"> <meta content="jos Argaud" name="author"> <meta
 content="Prise en main de Kompozer : mon premier site"
 name="description"></head> <body> <div id="wrapper"> <div
 id="entete"> <h1> <img style="width: 128px; height: 128px;"
 class="logo" alt="Logo Kompozer" src="terrekpZ1goldrorange128.png"> </h1>
<h1> <img style="width: 790px; height: 88px;"
 alt="Faire son site et le publier" src="images/commun/titre790x88.jpg">
</h1> <h1 style="text-align: left;"> &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; KompoZer et CSS </h1> </div> <div id="menu"> <ul>

<li> <a href="index.html">Bienvenue sur mon site</a> </li> <li> <a
 href="kompozerInstal.html">Kompozer Installation</a> </li> <li>Prise
en main<br> Premier site </li> <li> <a href="Filezilla.html">Publier
avec Filezilla</a> </li> <li> <a href="feuilleStylePlan.html">Feuille
de style<br> interne - export</a> </li> <li> <a
 href="miseEnFormePlan.html">Mise en forme CSS</a> </li> <li> <a
 href="MenuHorizontaReactif.html">Menu horizontal réactif</a> </li> </ul>

</div> <div id="texte"> <h2> Prise en main : Mon premier site </h2> <p
 class="MsoNormal"> Ce premier site, permettant de prendre en main le
logiciel, sera composé de 4 pages&nbsp;:&nbsp; </p> <ul> <li>Une
page d'accueil de présentation personnelle liée à 3 pages </li> <li>Mes
loisirs préférés </li> <li>Mon chanteur favori </li> <li>Mon

Ton code nettoyé par Tidy :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 18 June 2008), see www.w3.org">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Mon premier site</title>
<link rel="stylesheet" href="monStyle.css" type="text/css">
<meta content="jos Argaud" name="author">
<meta content="Prise en main de Kompozer : mon premier site" name=
"description">
</head>
<body>
<div id="wrapper">
<div id="entete">
<h1><img style="width: 128px; height: 128px;" class="logo" alt=
"Logo Kompozer" src="terrekpZ1goldrorange128.png"></h1>
<h1><img style="width: 790px; height: 88px;" alt=
"Faire son site et le publier" src=
"images/commun/titre790x88.jpg"></h1>
<h1 style="text-align: left;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; KompoZer et CSS</h1>
</div>
<div id="menu">
<ul>

<li><a href="index.html">Bienvenue sur mon site</a></li>
<li><a href="kompozerInstal.html">Kompozer Installation</a></li>
<li>Prise en main<br>
Premier site</li>
<li><a href="Filezilla.html">Publier avec Filezilla</a></li>
<li><a href="feuilleStylePlan.html">Feuille de style<br>
interne - export</a></li>
<li><a href="miseEnFormePlan.html">Mise en forme CSS</a></li>
<li><a href="MenuHorizontaReactif.html">Menu horizontal
réactif</a></li>

</ul>

c'est mieux, non?

Gagea · Message par **Gagea** » 02 août 2008, 16:10

Mongo Bob a écrit :tu as une feuille de style externe, donc : après avoir créé ce fameux div, lui donner une "id" (ou une classe si toutes tes images à centrer auront la même largeur) par : dans la barre d'état, clic droit sur <div>/Propriétés avancées/Onglet Attributs html/Flèche noire de "Attribut" en bas, choisir "id" ou "classe"/Valeur : donner le nom que tu veux, puis :
dans Cascades, créer une règle pour le nom que tu as choisi après avoir coché "Style appliqué à l'élément portant l'id" ou "...aux éléments de même classe", puis reprendre comme ci-dessus en allant dans l'onglet Boîte de ton id (ou classe) pour appliquer les valeurs de largeur (la même que celle de l'image) et de marge g et dr "auto". OK.

Bonjour Mongo Bob,
J'ai essayé de mettre en pratique ton explication <div class="imageCentre"> sur la page :
http://josar.free.fr/tutoKompozer/feuilleStyle1.html
les 2 premières images que je veux centrer font toutes les deux 600 pixels de large mais la troisième n'en fait que 500. Quelle est la solution ?
J'ai aussi essayé de nettoyer le code avec Tidy.
Merci

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.1)

Mongo Bob · Message par **Mongo Bob** » 02 août 2008, 20:49

Si tu prends cette 1ère solution, il suffit, pour une image de largeur différente, d'attribuer une nouvelle classe ou id à un nouveau <div> et de lui attribuer la même largeur que cette nouvelle image.
Note que tu peux te contenter de donner à tous les <div> qui contiennent une image à centrer la propriété "text-align: center" (2ème solution), mais si tu n'attribues pas de largeur aux <div>, ils prendront toute la largeur disponible, si tu leur donnes une largeur, qu'elle soit égale à celle de l'image comme dans la 1ère solution.

Tu peux supprimer la propriété "float: left;" de la classe "imageGauche", elle ne sert à rien : les images portent vers la gauche naturellement (quand elles sont dans le flux html, ce qui est le cas) et la marge droite ne sert strictement à rien dans tous les cas : une marge droite ne peut servir que pour un élément en "float: right;", au lieu de ça actuellement :

Code : Tout sélectionner

.imageGauche {
  border: 1px solid #000099;
  float: left;
  margin-right: 10px;
}

ne garde que ce qu'il faut pour ta bordure :

Code : Tout sélectionner

.imageGauche {
  border: 1px solid #000099;
 }

Tu obtiendras le même résultat... à+...

Gagea · Message par **Gagea** » 03 août 2008, 13:23

Merci beaucoup Mongo Bob,
J'ai adopté la deuxième solution car mes images ont des largeurs très différentes.
J'ai aussi supprimé la propriété "float: left;" de la classe "imageGauche" ainsi que la marge droite. Merci pour le tuyau; ce n'est pas évident quand on débute.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

Gagea · Message par **Gagea** » 04 août 2008, 14:52

Mongo Bob a écrit :Tu peux supprimer la propriété "float: left;" de la classe "imageGauche", elle ne sert à rien : les images portent vers la gauche naturellement (quand elles sont dans le flux html, ce qui est le cas) et la marge droite ne sert strictement à rien dans tous les cas : une marge droite ne peut servir que pour un élément en "float: right;"

Bonjour Mongo Bob,
Je débute en CSS et je peux me tromper ou alors je n'ai pas bien compris ce que tu m'as dit. Sur ton conseil, j'avais supprimé la propriété "float: left;" ainsi que la marge droite de la classe imageGauche mais je me suis aperçue que je n'obtenais pas ce que je voulais. Effectivement les images, dans le flux html, viennent se positionner naturellement à gauche mais le texte n'habille pas l'image; il commence au bas de l'image.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

Mongo Bob · Message par **Mongo Bob** » 04 août 2008, 16:15

Tu veux que le texte "Dans Kompozer l'éditeur de styles est l'outil CaScadeS..." commence où exactement? Si tu veux qu'il commence avec le mot "Dans" exactement à gauche et sous l'image de la palette de Cascades, tu as une bonne raison d'utiliser finalement une marge droite assez longue pour repousser le texte, ou "Dégagement : droit" dans l'onglet Boîte d'un <div> que tu crées pour y insérer l'image, ou ajouter des <br>, c'est moins élégant mais c'est pas interdit!
Je regarderai, mais j'utiliserais plutôt une marge droite en valeur de "%" qui interdirait au texte de rester à droite de l'image...
et quand on fait "Image/Propriétés de l'image/Apparence/Placement du texte en bas"?

Gagea · Message par **Gagea** » 04 août 2008, 17:00

Je veux par exemple que dans la page Kompozer Installation à la fin de la page, le texte (Le meilleur dictionnaire français ...) se positionne à droite de l'image qui flotte à gauche, dès le haut de l'image et non pas à partir du bas de cette image. J'ai mis une marge de 20 pixels. Je n'ai pas encore essayé les marges en valeur de %.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

Mongo Bob · Message par **Mongo Bob** » 04 août 2008, 20:33

Gagea a écrit :le texte (Le meilleur dictionnaire français ...) se positionne à droite de l'image qui flotte à gauche, dès le haut de l'image

comprends pas parce que pour moi, c'est déjà le cas, autant en 800x600 qu'en 1280x1068 :

Gagea · Message par **Gagea** » 04 août 2008, 21:00

Tu peux supprimer la propriété "float: left;" de la classe "imageGauche", elle ne sert à rien

Je voulais simplement te dire que pour obtenir ce que je voulais j'ai du remettre la propriété "float: left" et la marge que j'avais enlevées quand tu m'as dit que ça ne servait à rien.
Excuse-moi de t'avoir fait chercher puisque maintenant tout va bien de nouveau.
J'avance peu à peu. Beaucoup de notions nouvelles à la fois

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

Geckozone

Centrer une image avec Cascades [Résolu]

Centrer une image avec Cascades [Résolu]

Qui est en ligne ?