créer un cadre arrondi en css

Marsh Posté le 10-07-2005 à 00:34:33

voila mon probleme:

je vais souvent sur alsacréation et comme il n'y a plus quelques tutos, je le pose ici car
j'ai pas trop envie d'acheter son livre meme si j'adore raphael pour un tuto :

créer un cadre arrondi en css, mais alors j'ai aucune idées, mais alors aucunes, lol
voila ma question.

vous etes pas obligés de me repondre pas écrit, avec un lien sur un site qui l'explique.

voila merci a tous ciao @+++

a oui, j'ai une autre question, il faut mettre le quel de charset iso je sais pas quoi ???
mettez moi un lien de site en français de preférance

Message édité par alaindeloin69 le 10-07-2005 à 00:41:40

---------------
mon site perso, allez visiter

Reply

Marsh Posté le 10-07-2005 à 00:34:33

Reply

Marsh Posté le 10-07-2005 à 00:58:56

alaindeloin69 a écrit :

créer un cadre arrondi en css, mais alors j'ai aucune idées, mais alors aucunes, lol
voila ma question.

Les coins arrondis sont une propriété CSS3 pas vraiment implémentée pour le moment.

Il existe actuellement 3 moyens de faire des cadres arrondis à peu près propre:
1- Le faire uniquement dans les navigateurs le gérant
C'est à dire les navigateurs basés sur gecko (Seamonkey, Firefox, Camino, K-Meleon) grace à la propriété -moz-border-radius et ceux basés sur KHTML (Konqueror et Safari) grâce à -khtml-border-radius

2- Custom corners and borders de Roger Johansson

3- Nifty Corners d'Alessandro Fulciniti

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 10-07-2005 à 01:04:26

oula, lol, j'ai pas tt saisi, et le probleme c'est que tes liens, j'ai ésayé de regarder mais ...... les autres langues que le français ....... voila quoi lol

raphael a utilisé quoi comme technique ???? car je pense que c'est la mieu et la plus courte ??????? mais si c'est
trop dure je le ferais pas ..... je me débrouillerais autrement

sinon pour le charset iso .... on met quoi ?

Message édité par alaindeloin69 le 10-07-2005 à 01:04:48

---------------
mon site perso, allez visiter

Reply

Marsh Posté le 10-07-2005 à 01:30:21

masklinn a écrit :

Les coins arrondis sont une propriété CSS3 pas vraiment implémentée pour le moment.

Il existe actuellement 3 moyens de faire des cadres arrondis à peu près propre:
1- Le faire uniquement dans les navigateurs le gérant
C'est à dire les navigateurs basés sur gecko (Seamonkey, Firefox, Camino, K-Meleon) grace à la propriété -moz-border-radius et ceux basés sur KHTML (Konqueror et Safari) grâce à -khtml-border-radius

2- Custom corners and borders de Roger Johansson

3- Nifty Corners d'Alessandro Fulciniti

4- Avec le système de porte coulisante. Ca ne s'applique pas partout je crois.

Source : http://alistapart.com/articles/mountaintop/

---------------
my flick r - Just Tab it !

Reply

Marsh Posté le 10-07-2005 à 13:02:47

dac merci mais pour le charset iso, vous m'avez pas repondu ?

---------------
mon site perso, allez visiter

Reply

Marsh Posté le 10-07-2005 à 13:05:35

Ben vu la question...

le charset c'est la "langue" du document, son encodage, donc ça depend de l'encodage configuré dans ton éditeur de texte [:spamafote]

Les deux principaux charsets pour les langages européens sont utf-8 et iso-8859-1 (parfois nommé "latin-1" )

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 10-07-2005 à 16:27:36

ok merci, mais j'utilise xhtml-kit, il me met automatiquement le DOCTYPE mais pas le charset:

voici le doctype qu'il me met :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

dans ce cas je met quoi comme charset???? pk ???
y a t-il un raccourci dans html-kit pour le mettre un charset ?

---------------
mon site perso, allez visiter

Reply

Marsh Posté le 11-07-2005 à 09:47:51

Le charset est précisé par le serveur, lorsqu'il envoie la page. Après tu peux l'inclure dans ton doc HTML, ce qui servira par exemple quand t'ouvres la page via le disque dur :

Reply

Marsh Posté le 11-07-2005 à 14:15:21

Euh sinon, raphael, il a mis le tuto sur les coins arrondis dans son livre "CSS2, pratiques du webdesign", chez eyrolles.

C'est un bon achat, et c'est en francais !

:pt1cable:

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

Reply

Marsh Posté le 11-07-2005 à 14:57:33

FlorentG a écrit :

Le charset est précisé par le serveur, lorsqu'il envoie la page. Après tu peux l'inclure dans ton doc HTML, ce qui servira par exemple quand t'ouvres la page via le disque dur :

comment ça ???? comment je fais pour trouver quel charset mettre sur mon site (pas fini) par ex ?

---------------
mon site perso, allez visiter

Reply

Marsh Posté le 11-07-2005 à 14:57:33

Reply

Marsh Posté le 11-07-2005 à 15:03:28

Dans ton cas, via PHP, avec un p'tit header(); Parce que là, le serveur n'envoi pas de charset. Et pour ma part, j'ai mis l'encodage par défaut en utf-8, et du coup tous les caractères accentués et autres s'affichent mal. D'ailleurs c'est dingue le nombre de sites qui t'envoit des pages sans charset, en espérant que l'internaute est en iso-8859-1 par défaut

Reply

Marsh Posté le 11-07-2005 à 15:07:37

alaindeloin69 a écrit :

comment ça ???? comment je fais pour trouver quel charset mettre sur mon site (pas fini) par ex ?

Citation :

ça depend de l'encodage configuré dans ton éditeur de texte

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 03-08-2005 à 13:31:08

ps: crée un cadre arrondi en CSS : http://www.alsacreations.com/articles/cadre/

---------------
mon site perso, allez visiter

Reply

Marsh Posté le 03-08-2005 à 13:47:37

merci alain c'est exactement ce que je cherchai, dire que je l'avais perdu :'(

Reply

Marsh Posté le 03-08-2005 à 13:51:47

Une meilleure version pour custom corners

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 03-08-2005 à 13:54:30

:sweat: :whistle: Merci masklinn mais je prefere tout comprendre :sarcastic:

Reply

Marsh Posté le 03-08-2005 à 14:37:34

derien !!! je l'ai trouvé tt seul !! pour une fois !!

---------------
mon site perso, allez visiter

Reply

Marsh Posté le 03-08-2005 à 16:16:49

mais je ne sais toujours pas commen faire des bordures ( sur les 4 cotes ) en css :'(

Reply

Marsh Posté le 03-08-2005 à 16:28:47

Tu comptes faire des bords arrondis a des blocs. Peux tu nous en dire plus sur tes blocs ? Seront-ils de largeur fixe par exemple ? Le probleme serait alors beaucoup beaucoup plus simple. Car les methodes de alsacreation et compagnie sont des methodes fexibles (horizontalement et verticalement) : contraintes qui compliquent sensiblement le probleme.

Et pourquoi ne pas faire une solution en javascript ? Ca aurait le merite de ne pas polluer le code HTML de div inutiles. Les navigateurs sans JS auraient des bordures rectangulaires : ca ne gene e rien l'accessibilite. Lorsque CSS3 sera supporté tu n'auras pas a toucher a ton code HTML pour faire de belles bordures : juste vire le javascript et definir des background multiples et bien places dans le CSS.

Reply

Marsh Posté le 03-08-2005 à 16:37:34

Wé en fait http://www.456bereastreet.com/arch [...] d_borders/ c'est du javascript c'est bien comme tout

Reply

Marsh Posté le 03-08-2005 à 16:46:33

bah en faite je veux des blocs fexibles des deux cote avec des bordure en images. je penses pouvoir le realiser moi meme sauf que il y aurai besoin de beacoup de div, j'aimerais donc une solution plus propre.

Reply

Marsh Posté le 03-08-2005 à 16:46:58

non pas d'anglais stp :'(

Reply

Marsh Posté le 03-08-2005 à 16:49:14

Reply

Marsh Posté le 03-08-2005 à 16:50:49

La page d'exemple alors :
http://www.456bereastreet.com/lab/ [...] s_borders/

C'est pas en anglais, c'est en javascript ... tu vas avoir encore plus de mal je pense

Reply

Marsh Posté le 03-08-2005 à 18:22:33

Voici une version qui skin completement les bordures d'une boite entièrement en CSS. Pas besoin d'ajouter de HTML en plus pour le faire marcher, et ce sans javascript non plus.

http://www.howtocreate.co.uk/wrong [...] ntbox.html

Problème : la meilleure version ne marche que sous Safari, Opera et Konqueror 3.3+ Il y a une version de remplacement qui marche sous un Firefox recent mais elle est moins propre

Message édité par Kristoph le 03-08-2005 à 18:23:22

Reply

Marsh Posté le 03-08-2005 à 18:34:04

:heink:
http://translate.google.com/transl [...] uage_tools

Reply

Marsh Posté le 03-08-2005 à 18:50:48

Citation :

Hors de avec les divs, dedans avec le JS

Étant un surgeon pour le marge bénéficiaire bénéficiaire propre, j'ai écrit un peu du Javascript pour m'aider à nettoyer des choses vers le haut. Le manuscrit insère les frais supplémentaires division éléments et changements le nom de classe du récipient principal. Changer le nom de classe est fait pour permettre dénommer différent selon, que le Javascript soit disponible ou pas.

[:roi]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 03-08-2005 à 18:53:10

:sweat:

Reply

Marsh Posté le 03-08-2005 à 18:54:33

C'est comme ca que the-shadow a appris respect

Reply

Marsh Posté le 03-08-2005 à 18:55:18

bah oue mais en anglais non plus j'ai pas compris un traitre mot

Reply

Marsh Posté le 03-08-2005 à 18:57:10

Bah contente toi de lire le code source javascript de l'exemple alors ! C'est tres clair, tres simple, tres court.

Reply

Marsh Posté le 03-08-2005 à 19:54:37

:'( oue mais moi pas connaitre java

Reply

Marsh Posté le 03-08-2005 à 20:02:54

JavaScript boulzor

Reply

Marsh Posté le 14-03-2009 à 19:52:28

Je suis allé sur le truc de Nifty et j'aimerais bien savoir comment faire pour que la couleur du bord change quand je passe sur un lien

le code javascript:

window.onload=function(){
if(!NiftyCheck())
return;
RoundedTop("div#container","#FFF","#e7e7e7" );
RoundedBottom("div#container","#FFF","#8395CB" );
/*J'ai essayé la manière ci-dessous mais cela ne marche pas donc.."*/
RoundedTop("ul#nav li.active","transparent","#C0CDF2" );
/*Quand le lien n'est pas actif cela donne le code ci-dessous*/
RoundedTop("ul#nav li","transparent","#8395CB" );
Rounded("div#box","#C0CDF2","#E4E7F2" );
Rounded("div#minipics li","#C0CDF2","#FFF" );
RoundedTop("div.gradient","#C0CDF2","#B8B8B8" );
RoundedBottom("div.gradient","#C0CDF2","#ECECF2" );
}

le code css :
ul#nav,ul#nav li{list-style-type:none;margin:0px;padding:0px}
ul#nav{padding-right:2%}
ul#nav li{float:right;width:80px;margin-right:2px}
ul#nav a{float:left;width:80px;text-decoration:none;background: #8395CB;color: #fff}
ul#nav li.active a,ul#nav a:hover{font-weight:bolder;background: #C0CDF2;color: #000}

Merci d'avance ;)

Message édité par thib0 le 14-03-2009 à 19:53:12

Reply

Marsh Posté le 12-12-2009 à 00:33:03

ta réponse du probleme dans t script du JS tu le trouve ici dans c lien:

-http://www.jejavascript.net/
-http://www.lecodejava.com/
-http://www.w3schools.com/

sa pourrai te servir

Reply

Marsh Posté le 14-12-2009 à 09:55:38

sur 3 des sites que tu cites, 2 sont des plaies du web, le 3ème est correct. Et ce n'est pas avec ça que tu vas l'aider

---------------
Blablaté par Harko

Reply

Marsh Posté le 14-12-2009 à 16:20:39

franchement la méthode présentée sur le site http://www.456bereastreet.com/lab/ [...] s_borders/ est absolument immonde! En regardant le code JS, j'ai eu le doute que ça rajoutait à chaque fois autant de "lignes" à base de balise <b> pour dessiner l'arrondi, en l'exécutant et vérifiant avec Firebug, j'en ai eu la confirmation :cry:

Quant à la solution de rajouter des div via un JS, elle a au moins le mérite d'être mutli-navigateurs, ce qui n'est pas le cas de la dernière, certes full CSS mais qui ne fonctionne pas avec IE6 (ben oui, dans les grosses boîtes/admin, c'est encore bien souvent le navigateur officiel, et probablement encore pour un bon bout de temps )... Perso, ce que je fais, c'est du cadre à bords droits pour IE 6 et à bords arrondis pour les autres. Je fais même parfois une IHM très belle pour Firefox et autres et une IHM moins belle pour IE histoire d'insiter les utilisateurs à prende Firefox comme navigateur par défaut