Discussion:
margin-right="20"
(trop ancien pour répondre)
AlainL
2017-02-07 12:04:03 UTC
Permalink
Raw Message
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
Photo
2017-02-07 13:18:33 UTC
Permalink
Raw Message
Post by 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
Essaie padding x x x x
--
https://grenault.net/accueil.htm
AlainL
2017-02-07 14:10:16 UTC
Permalink
Raw Message
Post by Photo
Post by 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
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
Pierre Maurette
2017-02-07 14:49:12 UTC
Permalink
Raw Message
Post by 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
docanski
2017-02-07 15:46:52 UTC
Permalink
Raw Message
Post by AlainL
Bonjour,
Salut,
Post by AlainL
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). <br />
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.<br />
Les résultats obtenus nous maintiennent dans l'idée qu'il faut
continuer sur cette voie. <br />
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.<br />
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.... <br />

</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/
AlainL
2017-02-07 18:12:56 UTC
Permalink
Raw Message
Post by docanski
Post by AlainL
Bonjour,
Salut,
Post by AlainL
Mais je ne parviens pas à décoller le texte du bord droit de l'image.
[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
INRA-Pisciculture fédérale des Hautes-Pyrénées et La
truite des torrents
à Licq-Athérey). <br />
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.<br />
Les résultats obtenus nous maintiennent dans l'idée qu'il faut
continuer sur cette voie. <br />
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.<br />
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.... <br />
</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
Pierre Maurette
2017-02-07 18:42:34 UTC
Permalink
Raw Message
Post by 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
SAM
2017-02-08 11:34:44 UTC
Permalink
Raw Message
Post by 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" ...
.arrondie { border: ...}
.hautgauche {
float: left;
margin: 0 1em 1em 0;
}
.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
AlainL
2017-02-09 08:53:39 UTC
Permalink
Raw Message
Post by SAM
Post by 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" ...
.arrondie { border: ...}
.hautgauche {
float: left;
margin: 0 1em 1em 0;
}
.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
docanski
2017-02-09 09:21:02 UTC
Permalink
Raw Message
Post by AlainL
Bonjour,
...
Post by AlainL
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/
Loading...