bords arrondis

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

malamok
Salamandre
Messages : 30
Inscription : 02 févr. 2008, 23:42

bords arrondis

Message par malamok »

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. :lol:



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
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

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 :
Image
d'autres précisions? à+...
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
malamok
Salamandre
Messages : 30
Inscription : 02 févr. 2008, 23:42

bords arrondis

Message par malamok »

bonsoir Mongo,
merci pour ta réponse,mais quelques précisions me serait utiles. :oops:
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
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

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 :wink: , 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!)
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
malamok
Salamandre
Messages : 30
Inscription : 02 févr. 2008, 23:42

bords arrondis

Message par malamok »

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
malamok
Salamandre
Messages : 30
Inscription : 02 févr. 2008, 23:42

bords arrondis

Message par malamok »

bonsoir Mongo,
j'ai mis le temps mais j'y suis arrivé. Avec ta méthode,çà marche :D
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
electrophil
Lézard vert
Messages : 108
Inscription : 26 févr. 2008, 19:16

Bord arrondi sans transparence, pourquoi ?

Message par electrophil »

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
Remets toujours au lendemain ce que tu pourrais saloper la veille
Invité

Message par Invité »

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... 8-) :wink: à+...
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 :
Image
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 :
Image
Maintenant, est-ce que ça marche dans ton cas, je sais pas ce que tu veux faire, alors...
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Mongo Bob, ne te cache plus, t'es repéré! :D
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
electrophil
Lézard vert
Messages : 108
Inscription : 26 févr. 2008, 19:16

Message par electrophil »

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
Remets toujours au lendemain ce que tu pourrais saloper la veille
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

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.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
electrophil
Lézard vert
Messages : 108
Inscription : 26 févr. 2008, 19:16

Message par electrophil »

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
Remets toujours au lendemain ce que tu pourrais saloper la veille
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

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/
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
malamok
Salamandre
Messages : 30
Inscription : 02 févr. 2008, 23:42

bords arrondis

Message par malamok »

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
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

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?
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités