28173 sujets

CSS et mise en forme, CSS3

Mettre un div a coins arrondis avec NiftyCube

Bonjour,

Comment puis-je mettre un texte dans un div a coins arrondis en utilisant la technique NiftyCube.

J'ai de prendre l'exemple #1 de la presentation NiftyCube et mettre a l'en-tete de la page :

<script type="text/javascript" src="NiftyCube/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>


Dans mon fichier CSS :

.div#box{width: 18em;padding: 20px;margin:0 auto;
    background:#E6E6E6;color:#000}
.div#box.h1{font: lighter 200% "Trebuchet MS",Arial sans-serif;color: #208BE1}
.div#box.h1,p{margin:0;padding:10px 20px}


et dans le body :

<div id="box">
<h1>Nifty Corners Cube&trade;</h1>
<p>One call. Two parameters. Three sizes.</p>
</div>


Mais le resultat ne donne que le texte sans couleur de fond ni acoins arrondis de la div .... Smiley rolleyes

Quel est le probleme ?

Merci d'avance.
Modifié par apt (01 Feb 2007 - 13:14)
a écrit :
a technique NiftyCube


Connais pas. Un gadget Web2.0, sans doute ?

En tous cas, un minimum d'url (page de test, par exemple, page du fournisseur de la chose...) seraient les bienvenus Smiley cligne
Voila j'ai realiser cette page d'essai, mais je n'arrive toujours pas a avoir les coins arrondis :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: Javascript and CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background: #fff;color: #222;text-align: center;
    font: 85% "Trebuchet MS",Arial,sans-serif}
h1,h2,p{margin: 0;padding: 0 10px;font-weight:normal}
p{padding: 0 10px 15px}
h1{font-size: 250%;color: #FFF;letter-spacing: 1px}
h2{font-size: 200%;line-height:1;color:#002455 }
div#header{
	width:300px !important; 
	width /**/:460px;
    	margin: 0 auto;padding:5px;text-align:left;
	background: #BFDDED;padding: 10px;text-align:center
}
</style>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#header,"small");
}
</script>
</head>
<body>
<div id="header"><h1>Essai de Nifty Corners</h1></div>
</body>
</html>
Quand tu telecharge NiftyCube tu as gracieusement founrni, plein d'exemple, pourquoi tu ne construit pas a partir de ces exemples? Ton probléme doit être un fichier à mauvais endroit, soit un js soit le css.
J'ai sauvegarder cette page sur mon DD.

Ensuite j'ai mis le fichier niftycube.js dans le me emplacement que nifty1.html

J'ai changé dans le code le chemin pour rechercher niftycube.js :

<script src="niftycube.js" type=text/javascript></script>


J'ai lancé la page nifty1.html, mais voilà pas de coins arrondis ?!

Ou est le problème ?
a écrit :
Ensuite j'ai mis le fichier niftycube.js dans le me emplacement que nifty1.html
J'ai changé dans le code le chemin pour rechercher niftycube.js :

bé le probléme c'est qu'il fallait pas faire ça! tu télecharge tu ouvres, tu touche à rien, et voilà!
en fait ton niftycube.js appelle un fichier css, donc si tu le deplace il ne le trouve plus
J'ai songé à cette erreur, alors j'ai copier le fichier niftycorners.css dans la racine (comme deja fait avec niftycube.js) mais les coins n'apparaissent plus.

Et puis selon le code javascript, le fichier css et généré d'une façon automatique. Alors pas la peine de le copier même, enfin ...
Francois44 a écrit :
Salut,
je ne connaissais pas non plus "niftycube". J'ai pris l'habitude d'utilisé la technique de Stu Nicholls qui à l'avantage de n'utiliser que du css et cela sans image.

Si ça t'intéresse comme alternative, voici le lien :
http://www.cssplay.co.uk/boxes/krazy.html
ça marche trés bien aussi effectivement, en fait c'est la même chose!
sauf que nifty génére tes balises et là tu dois les ecrire
Salut apt,

J'ai eu le même problème. C'est très simple à résoudre, dans le code javascript, il y a la ligne suivante :


l.setAttribute("href","niftyCorners.css");


il te manque donc sûrement le fichier niftyCorner.css. Tu le trouveras dans le pack.

a+
Sujet clos
Aller à