Geckozone

bonsoir,
j'aimerais savoir s'il est possible de faire des bords arrondis dans Kompozer, en html ou existe t'il une extension pour y parvenir.
Merci et bravo pour tous les renseignements obtenus sur le forum.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Il y a une propriété css 100% Mozilla qui ne fonctionnera que sur FF ou Mozilla ("moz-border-radius").
En html pur, c'est impossible (certitude à 95,5%).
En css, c'est possible sur tous les navigateurs en incluant des images d'arrondi dans le fond de l'élément concerné et en utilisant le même code-couleur pour une partie de l'image, et pour le fond sur lequel elle se détache, comme ci-dessous, voir le cadre du texte avec le vautour :
http://retourayuma.free.fr/desfilms.php#h4eleves
L'image en haut à gauche toute seule :

d'autres précisions? à+...

bonsoir Mongo,
merci pour ta réponse,mais quelques précisions me serait utiles.

inclure des images d'arrondis dans le fond, ok, mais comment me procurer ces images ou comment les fabriquer?faut-il un arrondi par taille de cadre?
doit-on les inclure avec l'onglet "fond" de css

j'ai encore besoin de ton aide.
A+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

malamok a écrit :comment les fabriquer?

j'ai faites les miennes avec The Gimp

malamok a écrit :faut-il un arrondi par taille de cadre

ben, je t'ai mis l'image haut gauche, il y en a 4 analogues pour chaque coin, regarde le code html :

Code : Tout sélectionner

(...)<div class="divhd"></div>
        <div class="divhg"></div>
        <p class="pintro">
          <img src="img/vautourintro.jpg" alt="le vautour, mascotte du site" width="68"> J'ai soufflé...

j'ai mis les images dans des div en css ("hd" pour haut droit...) aux dimensions des images : un div en flottant droite pour l'image haut droit en 1er, puis un div sans mention de flottant puisqu'étant dans le flux, il ira forcément à gauche, mais en html, il faut mettre la droite en 1er.
en css :

Code : Tout sélectionner

.divhd {
  background-repeat: no-repeat;
  height: 40px;
  width: 40px;
  background-image: url(img/motifhd.png);
  float: right;
  }
.divhg {
  background-repeat: no-repeat;
  height: 40px;
  width: 40px;
  background-image: url(img/motifhg.png);
}

L'image que j'ai mise + haut, c'est bien sûr l'image du coin supérieur gauche"motifhg.png".
et en fin de texte, html :

Code : Tout sélectionner

(...)Vanessa Hell (6 janvier 2006).<br>
          <img src="img/vautoursignature.jpg" alt="le vautour, mascotte du site" width="68">
        </p>
        <div class="divbd"></div>
        <div class="divbg"></div>

et css de toute évidence :

Code : Tout sélectionner

.divbd {
  width: 40px;
  height: 40px;
  background-image: url(img/motifbd.png);
  float: right;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.divbg {
  width: 40px;
  height: 40px;
  font-size: 1px;
  background-image: url(img/motifbg.png);
  background-position: left bottom;
  background-repeat: no-repeat;
}

malamok a écrit :doit-on les inclure avec l'onglet "fond" de css Question

Bien sûr, je ne parle que de css depuis le début

, essaie, ça marche, à bientôt.
(je crois que mes règles pourraient être simplifiées, ne prends pas forcément exemple pour tous les détails!)

Bonjour,
merci pour les infos, je vais m'y mettre et je te tiens au courant. çà va me prendre un peu de temps
à bientôt

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

bonsoir Mongo,
j'ai mis le temps mais j'y suis arrivé. Avec ta méthode,çà marche

Un dernier conseil sur le sujet, faut-il lorsque j'agrandis mon cadre en hauteur déplacer les div du bas

Merci encore et à bientôt sue le forum

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

Bonsoir à tous,

J'aimerai comprendre pourquoi on ne peut pas avoir des bords arrondi avec l'effet de transparence.
J'ai vu la solution alsacreation, j'ai fait mes coins arrondis sous gimp mais sur un fond qui est dégradé, cela ne marche pas.
Je ne pige pas, car quand je fais un div et que je met en fond css une image qui possède un effet de transparence, (comme par exemple une photo ovale en gif ou en png), la photo s'affiche parfaitement bien sur le fond du div conteneur dégradé.
Mais pour le cadre, visiblement c'est pas aussi simple. J'en suis venu à créer des div supplémentaires pour les déplacer ensuite en css entre mes bords arrondi avec transparence. Cela me parait vraiment usine à gaz.
Une idée à proposer ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

malamok a écrit :faut-il lorsque j'agrandis mon cadre en hauteur déplacer les div du bas

non, y'a pas du tout à les déplacer, ils suivent...

malamok a écrit :Avec ta méthode,çà marche

avec ma méthode, ça marche toujours...

à+...

electrophil a écrit :J'ai vu la solution alsacreation

Ils l'ont virée pour la mettre dans le bouquin CSS2 où je l'ai piquée sans vergogne.

electrophil a écrit :Cela me parait vraiment usine à gaz.

oui

electrophil a écrit :Une idée à proposer ?

oui, comme expliqué + haut : je ne vois pas l'intérêt de la véritable transparence, il y a trop de soucis avec IE 6 ou 7.
Il faut jouer sur des codes-couleurs identiques entre partie concave et convexe. Pour aller vite, avec l'image ci-dessous :

elle est incluse dans un élément blanc lui-même inclus dans un élément gris, le positionnement de l'image (en fait, du <div> aux mêmes dimensions que l'image) est haut gauche toutes dans l'élément blanc, blancs et gris se confondent :

Maintenant, est-ce que ça marche dans ton cas, je sais pas ce que tu veux faire, alors...

Mongo Bob, ne te cache plus, t'es repéré!

Salut à tous,

J'ai bien pigé, (je crois) que sur un fond uni, les coins doivent avoir la couleur du cadre et la couleur du fond.
J'ai fait un exemple visible ici: http://www.electrophil.fr/test/toto.html
Le cadre du haut possède les coins avec transparence qui ne fonctionne pas et celui du bas, j'ai rempli le fond des coins avec la couleur de son conteneur.
Mais au risque d'être un peu chiant, si je ne veux pas de fond uni, si je veux un fond dégradé, ou pire, une photo?
Tu es en train de me dire que je dois me taper à la mano le remplissage du fond des 4 coins ?
Si je bouge mon cadre, si je mets plus de texte, je dois recommencer vu que s'il y a un dégradé dans le fond, la couleur varie en fonction de la position.
Si je suis encore plus chiant, un dégradé dans le cadre arrondi ?
Sur le site http://www.dreamlinux.com.br/ je ne crois pas qu'ils font de détail. Ils intègrent directement des images avec les coins arrondit, sans passer pas css.
J'en demande trop à css ?
Merci à vous

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

Si tu veux voir comment sont faites les images sur dreamlinux, tu fais un clic droit sur les images et "aficher l'image"... et tu verras que les images sont toutes à coins carrés.
Tu peux aussi installer l'extension web developper et avec cette extension, entourer les images...
Donc, ils n'intègrent pas des images aux coins arrondis, mais avec l'illusion que les coins sont arrondis.

Effectivement Chinon37, tu as raison, les images sont souvent en .jpg donc sans transparence, donc coins carrés.
Dans certaines boites arrondis, il y a un dégradé, ce qui me fait dire, qu'elles ne sont pas faite en css.
Je vais jeter un oeil sur l'extension que tu porposes.
Une idée pour une boite arrondi en css sur un fond qui est une photo ?
Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

la transparence, si elle est bien gérée par Firefox , est très mal gérée par Internet explorer, qui, malheureusement, reste encore le navigateur le plus utilisé (même s'il perd tous les jours des adeptes

)
Donc, en l'état actuel des choses, il est difficile de réaliser ce que tu souhaites.
Un excellent tuto sur les coins arrondis: http://www.alsacreations.com/articles/cadre/

bonsoir à tous,
les deux coins du bas ne suivent pas quand j'augmente la hauteur du cadre.
Comment dois-je m'y prendre?
Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

chinon37 a écrit :Mongo Bob, ne te cache plus, t'es repéré! Très content

aaarrrggghhh!... et on (je) continue à se faire avoir!...

malamok a écrit :les deux coins du bas ne suivent pas quand j'augmente la hauteur du cadre.

peux-tu montrer ton code? Tes images sont chacune dans un <div> aux mêmes dimensions que les images qu'ils contiennent?

chinon37 a écrit :Un excellent tuto sur les coins arrondis: http://www.alsacreations.com/articles/cadre/

je croyais qu'il avait été supprimé, il est même pas au sommaire, si je ne m'abuse....

electrophil a écrit :si je veux un fond dégradé, ou pire, une photo?

c'est pour nous compliquer la vie? Ca risque d'être bien plus difficile.... Mais faudrait que tu nous montres avec une image ce que tu veux précisément...

electrophil a écrit :Dans certaines boites arrondis, il y a un dégradé, ce qui me fait dire, qu'elles ne sont pas faite en css.

mauvaise conclusion, une image d'un dégradé peut fort bien être en css, pourquoi pas?

Geckozone

bords arrondis

bords arrondis

bords arrondis

bords arrondis

bords arrondis

Bord arrondi sans transparence, pourquoi ?

bords arrondis