créer un cadre arrondi en css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : créer un cadre arrondi en css

alaindeloin69

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

Publicité

masklinn

í dag viðrar vel til loftárása

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

alaindeloin69

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

zapan666

Tout est relatif

masklinn a écrit :

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 !

alaindeloin69

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

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

masklinn

í dag viðrar vel til loftárása

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

alaindeloin69

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

FlorentG

Unité de Masse

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 :

plainsofpain

Pingouino's lover

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

alaindeloin69

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

Publicité

FlorentG

Unité de Masse

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

masklinn

í dag viðrar vel til loftárása

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

alaindeloin69

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

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

kirua_sama

Learn sciences with senses

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

masklinn

í dag viðrar vel til loftárása

Une meilleure version pour custom corners

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

kirua_sama

Learn sciences with senses

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

alaindeloin69

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

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

kirua_sama

Learn sciences with senses

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

afbilou

pouet your life

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.

afbilou

pouet your life

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

kirua_sama

Learn sciences with senses

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.

kirua_sama

Learn sciences with senses

non pas d'anglais stp :'(

afbilou

pouet your life

afbilou

pouet your life

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

Kristoph

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

kirua_sama

Learn sciences with senses

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

masklinn

í dag viðrar vel til loftárása

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

kirua_sama

Learn sciences with senses

:sweat:

afbilou

pouet your life

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

kirua_sama

Learn sciences with senses

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

afbilou

pouet your life

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

kirua_sama

Learn sciences with senses

:'( oue mais moi pas connaitre java

gatsusat

JavaScript boulzor

thib0

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

tckalexon

Webmaster, Dj & Product

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

gatsu35

Blablaté par Harko

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

rufo

Pas me confondre avec Lycos!

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

Message édité par rufo le 14-12-2009 à 17:02:19

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

créer un cadre arrondi en css

Sujets relatifs
[OS] Créer un nouveau système de fichiers.	creer des bookmarks en VBA
Créer une ligne verticale qui longe la page	creer un fichier executable
Comment créer un menu fixe (style frame) en html ?	[résolu] Problème d'affiche d'un cadre 3D
créer un objet d'un element de base de données.	Créer une page html de tant de largeur sur tant de hauteur
pb pour créer un lien à partir dune chaine avec des quotes	Comment créer une DK boot fait maison
Plus de sujets relatifs à : créer un cadre arrondi en css

Page générée en 0.143 secondes