margin-right="20"

9 réponses
Avatar
AlainL
Bonjour,

J'ai presque réussi à coller mon image dans une boite avec, à droite un
texte qui continue sous l'image. Le padding de la boite est OK.

Mais je ne parviens pas à décoller le texte du bord droit de l'image. Je
pensais à margin-right pour l'image mais ça ne marche pas.
Ça doit quand même être possible.

C'est là : http://autourdalos.fr/EssaisHerbier/pagetestboites.php

Merci pour un tuyau !

alainL

9 réponses

Avatar
Photo
Le 07/02/2017 à 13:04, AlainL a écrit :
Bonjour,
J'ai presque réussi à coller mon image dans une boite avec, à droite un
texte qui continue sous l'image. Le padding de la boite est OK.
Mais je ne parviens pas à décoller le texte du bord droit de l'image. Je
pensais à margin-right pour l'image mais ça ne marche pas.
Ça doit quand même être possible.
C'est là : http://autourdalos.fr/EssaisHerbier/pagetestboites.php
Merci pour un tuyau !
alainL

Essaie padding x x x x
--
https://grenault.net/accueil.htm
Avatar
AlainL
Le 07/02/2017 à 14:18, Photo a écrit :
Le 07/02/2017 à 13:04, AlainL a écrit :
Bonjour,
J'ai presque réussi à coller mon image dans une boite avec, à droite un
texte qui continue sous l'image. Le padding de la boite est OK.
Mais je ne parviens pas à décoller le texte du bord droit de l'image. Je
pensais à margin-right pour l'image mais ça ne marche pas.
Ça doit quand même être possible.
C'est là : http://autourdalos.fr/EssaisHerbier/pagetestboites.php
Merci pour un tuyau !
alainL

Essaie padding x x x x

Bonjour,
J'ai déjà un padding pour l'intérieur de ma div blanche bordée noir.
Je parviens à ce que je veux en ajoutant le "margin: 0 20px 0 0" dans la
classe 'arrondie' mais ça va me forcer à définir 4 classes suivant la
place de l'image dans la boite ! J'ai essayé de le coller de toutes les
façons dans la commande html qui appelle l'image mais ça ne fonctionne pas.
.arrondie {
border:4px solid red;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin : 0 20px 0 0;
}
http://autourdalos.fr/EssaisHerbier/pagetestboites2.php
alainL
Avatar
Pierre Maurette
AlainL :
Bonjour,
J'ai presque réussi à coller mon image dans une boite avec, à droite un texte
qui continue sous l'image. Le padding de la boite est OK.
Mais je ne parviens pas à décoller le texte du bord droit de l'image. Je
pensais à margin-right pour l'image mais ça ne marche pas.
Ça doit quand même être possible.
C'est là : http://autourdalos.fr/EssaisHerbier/pagetestboites.php
Merci pour un tuyau !

.arrondie { margin-right: 15px;}
--
Pierre Maurette
Avatar
docanski
AlainL a écrit le 07/02/17 à 13:04 :
Bonjour,

Salut,
Mais je ne parviens pas à décoller le texte du bord droit de l'image.

Ce brouillon de code reprenant ta page convient-il :
[code]
<html>
<body>
<div style="width:97%;background:#FFFFFF;border:2px solid
#000000;border-radius:10px;-moz-border-radius:10px;
-webkit-border-radius:10px;text-align:justify;font-size:14px;padding:10px">
<img src="image.jpg"
style="width:400px;height:300px;float:left;margin-right:10px"
alt="Alevins" title="Alevins" />
Souvent décrié par le « monde idéaliste de la pêche », l'alevinage
demeure
la priorité de l'AAPPMA de Basabürüa. Ayant une excellente
connaissance
des cours d'eau dont ils ont la gestion, les bénévoles de
l'association
s'emploient à compenser un déficit de truites farios juvéniles
sur les
secteurs les plus impactés par la pollution, avec un alevinage
de qualité,
en grande partie constitué de truitelles post-juvéniles de
6-8cm (provenance :
INRA-Pisciculture fédérale des Hautes-Pyrénées et La truite des
torrents
à Licq-Athérey).
La boîte « Vibert », longtemps utilisée, ayant montré ses
limites (colmatage) notamment en période de fort coup d'eau, n'est
plus utilisée.
Les résultats obtenus nous maintiennent dans l'idée qu'il faut
continuer sur cette voie.
Soyons réalistes, une frayère est en moyenne fonctionnelle
au bout de 1.5 mois, avec une température d'eau de 10°C. 1,5
mois d'exposition
à toutes les pollutions diffuses émanant de notre mode de vie «
moderne »,
nous vous invitons à méditer sur ses chances de réussite dans
beaucoup de
cours d'eau, même en montagne.
Il est difficile d'évaluer l'efficacité d'un alevinage lorsque
les poissons déversés vont co-habiter avec des poissons sauvages. Mises
à part les truites "de bassine" facilement reconnaissables et d'ailleurs
vite prélevées, il est difficile et coûteux d'évaluer le taux de reprise
des alevins déversés quelques mois avant. La méthode de marquage la plus
courante est l'ablation de l'adipeuse, la lecture génétique sans doute
plus sûre étant bien plus difficile à appliquer. Mais des <a
href="http://www.saumon-sauvage.org/node/93">études</a> tendent à
prouver que cette nageoire est utile à la truite et que sa suppression
risque de gêner son adaptation au milieu....
</div>
</body>
</html>
[/code]
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
AlainL
Le 07/02/2017 à 16:46, docanski a écrit :
AlainL a écrit le 07/02/17 à 13:04 :
Bonjour,

Salut,
Mais je ne parviens pas à décoller le texte du bord droit de l'image.

Ce brouillon de code reprenant ta page convient-il :
[code]
<html>
<body>
<div style="width:97%;background:#FFFFFF;border:2px solid
#000000;border-radius:10px;-moz-border-radius:10px;
-webkit-border-radius:10px;text-align:justify;font-size:14px;padding:10px">
<img src="image.jpg"
style="width:400px;height:300px;float:left;margin-right:10px"
alt="Alevins" title="Alevins" />
Souvent décrié par le « monde idéaliste de la pêche », l'alevinage demeure
la priorité de l'AAPPMA de Basabürüa. Ayant une excellente
connaissance
des cours d'eau dont ils ont la gestion, les bénévoles de
l'association
s'emploient à compenser un déficit de truites farios
juvéniles sur les
secteurs les plus impactés par la pollution, avec un
alevinage de qualité,
en grande partie constitué de truitelles post-juvéniles de
6-8cm (provenance :
INRA-Pisciculture fédérale des Hautes-Pyrénées et La
truite des torrents
à Licq-Athérey).
La boîte « Vibert », longtemps utilisée, ayant montré ses
limites (colmatage) notamment en période de fort coup
d'eau, n'est
plus utilisée.
Les résultats obtenus nous maintiennent dans l'idée qu'il
faut
continuer sur cette voie.
Soyons réalistes, une frayère est en moyenne fonctionnelle
au bout de 1.5 mois, avec une température d'eau de 10°C.
1,5 mois d'exposition
à toutes les pollutions diffuses émanant de notre mode de
vie « moderne »,
nous vous invitons à méditer sur ses chances de réussite
dans beaucoup de
cours d'eau, même en montagne.
Il est difficile d'évaluer l'efficacité d'un alevinage
lorsque les poissons déversés vont co-habiter avec des poissons
sauvages. Mises à part les truites "de bassine" facilement
reconnaissables et d'ailleurs vite prélevées, il est difficile et
coûteux d'évaluer le taux de reprise des alevins déversés quelques mois
avant. La méthode de marquage la plus courante est l'ablation de
l'adipeuse, la lecture génétique sans doute plus sûre étant bien plus
difficile à appliquer. Mais des <a
href="http://www.saumon-sauvage.org/node/93">études</a> tendent à
prouver que cette nageoire est utile à la truite et que sa suppression
risque de gêner son adaptation au milieu....
</div>
</body>
</html>
[/code]

Merci. J'ai re-écrit l'appel de l'image, en respectant mieux la syntaxe
que j'avais plutôt maltraitée et en y incluant donc la marge à droite.
Ça marchait aussi en la mettant dans ".arrondie" mais comme j'aurai
aussi des img arrondies avec marge a gauche (voire en haut ou en bas) je
préfère gérer les marges individuellement.
Merci à vous et bonne soirée.
alainL
Avatar
Pierre Maurette
AlainL :
Bonjour,
J'ai presque réussi à coller mon image dans une boite avec, à droite un texte
qui continue sous l'image. Le padding de la boite est OK.
Mais je ne parviens pas à décoller le texte du bord droit de l'image. Je
pensais à margin-right pour l'image mais ça ne marche pas.
Ça doit quand même être possible.
C'est là : http://autourdalos.fr/EssaisHerbier/pagetestboites.php
Merci pour un tuyau !

Le tuyau, c'est que vous vous compliquez la vie, et ce sur chacun de
vos problèmes. Les classes, c'est cumulatif, et il n'y a aucun overhead
à en utiliser plusieurs, et même beaucoup. Ici, vous caractérisez votre
cadre image par le fait qu'il contient une image (ici, *c'est* une
image, mais c'est pareil), que vous souhaitez des bords arrondis et
qu'il sera en haut à gauche. Vous lui donnerez donc les classes
'arrondie' et 'hautgauche' : <img class="arrondie hautgauche" ...
Ensuite vous écrivez le CSS:
.arrondie { border: ...}
.hautgauche {
float: left;
margin: 0 1em 1em 0;
}
tant que vous y êtes vous anticipez:
.hautdroit {
float: right;
margin: 0 0 1em 1em;
}
--
Pierre Maurette
Avatar
SAM
Le 07/02/17 à 19:42, Pierre Maurette a écrit :
AlainL :
C'est là : http://autourdalos.fr/EssaisHerbier/pagetestboites.php

Le tuyau, c'est que vous vous compliquez la vie, et ce sur chacun de vos
problèmes. Les classes, c'est cumulatif, et il n'y a aucun overhead à en
utiliser plusieurs, et même beaucoup. Ici, vous caractérisez votre cadre
image par le fait qu'il contient une image (ici, *c'est* une image, mais
c'est pareil), que vous souhaitez des bords arrondis et qu'il sera en
haut à gauche. Vous lui donnerez donc les classes 'arrondie' et
'hautgauche' : <img class="arrondie hautgauche" ...
Ensuite vous écrivez le CSS:
.arrondie { border: ...}
.hautgauche {
float: left;
margin: 0 1em 1em 0;
}
tant que vous y êtes vous anticipez:
.hautdroit {
float: right;
margin: 0 0 1em 1em;
}

Je ne suis pas du tout d'accord avec cette manière de faire
mébon ...
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
AlainL
Le 08/02/2017 à 12:34, SAM a écrit :
Le 07/02/17 à 19:42, Pierre Maurette a écrit :
AlainL :
C'est là : http://autourdalos.fr/EssaisHerbier/pagetestboites.php

Le tuyau, c'est que vous vous compliquez la vie, et ce sur chacun de vos
problèmes. Les classes, c'est cumulatif, et il n'y a aucun overhead à en
utiliser plusieurs, et même beaucoup. Ici, vous caractérisez votre cadre
image par le fait qu'il contient une image (ici, *c'est* une image, mais
c'est pareil), que vous souhaitez des bords arrondis et qu'il sera en
haut à gauche. Vous lui donnerez donc les classes 'arrondie' et
'hautgauche' : <img class="arrondie hautgauche" ...
Ensuite vous écrivez le CSS:
.arrondie { border: ...}
.hautgauche {
float: left;
margin: 0 1em 1em 0;
}
tant que vous y êtes vous anticipez:
.hautdroit {
float: right;
margin: 0 0 1em 1em;
}

Je ne suis pas du tout d'accord avec cette manière de faire
mébon ...
Cordialement,

Bonjour,
Je ne sais pas si j'avance dans la construction de ma page ! Hier soir,
en bricolant sur ma tablette (Win10 et Notepad++ tests sur Chrome)
j'avais une mise en page "correcte". Ce matin, je passe tout sur une
clé, recharge celle ci dans la grosse machine (celle qui ne bascule pas
sur les genoux) avec Win10, chrome et Dream...
Par précaution, je j'ouvre la page avec chrome depuis l'explorateur.
Chouette, ça marche !...
Je déplace les fichiers dans mon répertoire principal en vue de
l'envoyer. J'ouvre Dream et, par précaution je fais un aperçu et là, je
constate que l'image 100% est rognée à droite !.. Je réduis à 98%,
aperçu... horreur, les marges entre les images du haut et du bas ont
disparu ! Et là, j'ai fait la cuisine pendant 10 min pour caler les
marges... et c'est encore un peu boiteux...
La page obtenue hier soir, avec Notepad :
autourdalos/EssaisHerbier/pagetestboites4.htm
Voilà la page suite aux ajustages en passant par Dream :
autourdalos/EssaisHerbier/pagetestboites3.htm
Peut-on se fier au contrôle par Dream ? (wamp n'était pas ouvert)
Bonne journée
alainL
Avatar
docanski
AlainL a écrit le 09/02/17 à 09:53 :
Bonjour,

...
Peut-on se fier au contrôle par Dream ? (wamp n'était pas ouvert)

Salut,
Toujours coder en "dur" évite les désagréments des éditeurs wysiwyg !
Et passer par le contrôle du W3C c'est utiliser le meilleur arbitre pour
être compatible tous navigateurs. Enfin ... en principe. :-)
Cordialement,
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/