[résolu]Image + bordure

Invité · Message par **Invité** » 10 janv. 2009, 20:57

Bonsoir,

Avant tout, je précise que je suis un néophyte en matière de création de page web.
Aussi vous m'excuserez si je n'emploie pas les termes appropriés pour décrire le problème que je n'arrive pas à résoudre.
Je dois inclure dans ma page plusieurs images de tailles différentes.
Je voudrais que ces images soient centrées et entourées d'une fine bordure pleine séparée de l'image de quelques pixels (disons 4 px par exemple).
J'aimerais donc créer un style qui permette çà.
Pour la hauteur j'y arrive, mais pour la largeur çà coince

La page de test est là

Sous Windows XP Pro et Komposer 0.7.10 en fr est-il possible de créer un tel style ?
@+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Gagea · Message par **Gagea** » 10 janv. 2009, 21:53

Code : Tout sélectionner

border: 1px solid black;
padding: 4px;

Dans Cascades tu crées une règle de style pour img
Onglet Bordure / style plein , épaisseur 1px, couleur black ou couleur de ton choix
Onglet Boite / Espacement 4px partout

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Invité · Message par **Invité** » 11 janv. 2009, 09:23

Bonjour,

Gagea a écrit :
Code : Tout sélectionner
border: 1px solid black;
padding: 4px;
Dans Cascades tu crées une règle de style pour img
Onglet Bordure / style plein , épaisseur 1px, couleur black ou couleur de ton choix
Onglet Boite / Espacement 4px partout

Je ne comprends pas bien le sens de ta réponse.
J'avais prévenu que mes connaissances étaient limitées

J'ai déjà une règle de style pour les images

Code : Tout sélectionner

.EmbedPict {
display: block;
position: relative;
text-align: center!important;
border: 3px solid #000099; background-color: #93bbe7;
padding: 4px }

Que dois-je ajouter enlever ou modifier à cette règle ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Message par **chinon37** » 11 janv. 2009, 10:11

la balise div avec .embedpict ne sert à rien.
C'est directement l'image qu'il faut stylé.
essaie ceci dans ta feuille de style:

Code : Tout sélectionner

img {
  border: 2px solid red;
  padding: 4px;
       }

et tu peux supprimer le div qui ne sert à rien

Invité · Message par **Invité** » 11 janv. 2009, 11:10

Bonjour "chinon37",

la balise div avec .embedpict ne sert à rien.
C'est directement l'image qu'il faut stylé.
essaie ceci dans ta feuille de style:
Code : Tout sélectionner
img {
  border: 2px solid red;
  padding: 4px;
       }
et tu peux supprimer le div qui ne sert à rien

J'ai testé sur la première image de la page, çà donne çà (image à la bordure rouge):

L'image n'est pas centrée et la bordure droite ne respecte pas les 4 px du bord droit de l'image.
@+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Message par **chinon37** » 11 janv. 2009, 11:43

Tu as supprimé le div dans le quel se trouve l'image?
pour le centrage, je regarde tout à l'heure.... là, pô le temps

Message par **Ymai** » 11 janv. 2009, 11:57

Sans vouloir froisser qui que ce soit, je serais enclin à plaider pour la conservation de la "class" .embedpict.
Elle pourrait servir à centrer les images.
Ensuite, la bordure, c'est tout simple, me semble-t-il (et la solution a déjà été donnée):

Code : Tout sélectionner

border: 1px solid red;
padding: 4px;

Résultat: http://info.sio2.be/test.php

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

Mongo Bob · Message par **Mongo Bob** » 11 janv. 2009, 14:30

oui, et comme Invité est en doctype xhtml strict, il a raison de garder le <div> pour rester conforme aux standards.
Ne pas coller une image directement dans le <body>, toute image doit être dans un bloc qui la contient (en strict, donc, en transitionnel c'est permis).

Message par **chinon37** » 11 janv. 2009, 14:48

Ok, je m'écrase

Ok, j'avais répondu un peu vite
Ok, j'ai tort
Ok, je ne me froisserais pas...
Sinon, vous pouvez toujours repasser

Mongo Bob · Message par **Mongo Bob** » 11 janv. 2009, 14:51

Non, non, c'est normal, nous débutâmes aussi, jadis, quand nous étions jeunes aussi...

Message par **chinon37** » 11 janv. 2009, 16:25

Mongo Bob a écrit :quand nous étions jeunes aussi...

Ouaip

Invité · Message par **Invité** » 11 janv. 2009, 19:23

Bonsoir "Ymai",

Sans vouloir froisser qui que ce soit, je serais enclin à plaider pour la conservation de la "class" .embedpict.
Elle pourrait servir à centrer les images.
Ensuite, la bordure, c'est tout simple, me semble-t-il (et la solution a déjà été donnée):
Code : Tout sélectionner
border: 1px solid red;
padding: 4px;
Résultat: http://info.sio2.be/test.php

OK, avec :

Code : Tout sélectionner

<body><div class="embedpict"><img style="width: 200px; height: 108px;"
 class="imageBordee" alt="test"
 src="http://XXXXX.jpg"></div>

Là çà fonctionne nickel pour la bordure avec l'image centrée.
Il me manque juste la couleur de fond entre l'image et la bordure .... je suis peut-être un peu chiant là non ?
@+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Mongo Bob · Message par **Mongo Bob** » 11 janv. 2009, 19:53

autre avantage de mettre l'image dans un <div>, pourquoi ne pas donner padding, bordure et couleur de fond à celui-ci, plutôt qu'à limage elle-même?
La couleur de fond du <div> ne se verra que sur les bords.

Arg! Il faudra donner au <div> les mêmes dimensions que l'image!

Message par **Ymai** » 11 janv. 2009, 20:44

Anonymous a écrit : Il me manque juste la couleur de fond entre l'image et la bordure ....

Comme ceci? J'ai simplement mis une couleur de fond à l'image.
J'espère que la délicatesse du choix des couleurs fera l'unanimité.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>Cours d'informatique</title><style
 type="text/css">
.embedpict {
  text-align: center;
}
.imageBordeeAvecFond {
  border: 1px solid red;
  padding: 4px;
  background-color: #33cc00;
}

</style>
</head><body><div class="embedpict"><img
 style="width: 200px; height: 108px;" class="imageBordeeAvecFond"
 alt="test" src="http://sio2.be/images/amethyste.jpg"></div></body></html>

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

Invité · Message par **Invité** » 11 janv. 2009, 21:44

Re,

Ymai a écrit :Comme ceci? J'ai simplement mis une couleur de fond à l'image.
J'espère que la délicatesse du choix des couleurs fera l'unanimité.

Tout à fait ce qu'il me fallait

Peut-être que je changerai juste la couleur de fond pour une autre

Merci à toi et à tous ceux qui ont pris la peine de me répondre.
Si un modo passe par là il peut marquer résolu pour ce post.
@+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Geckozone

[résolu]Image + bordure

[résolu]Image + bordure

Qui est en ligne ?