Bonjour a tous!!
Voila, en fait j'aimerais savoir, comment faire pour avoir des bordures arrondies, comme sur ce site:
<lien url="http://www.n-c-team.com/"></lien>
Ca serait sympa de me donné le code en entier.
Webmaster passionnée par mon métier mais aussi par les personnes qui m'entourent, l'art, le design, la nature, l'architecture, la lecture et toutes les beautés de la vie ;-)
PS : @san1981 > le lien que tu donnes n'a malheureusement plus de contenu (le tuto est à présent dans le livre). Par contre tu as l'ancienne version du tuto ici :
http://www.alsacreations.com/articles/cadre/#deux
Salut.
je te propose une solution tout css qui fonctionne avec tous les navigateurs.
les bords sont arrondis grace a la difference de couleur des backgroud et pas des bordures alors si ca peut te convenir c'est .
la
Que nous affiche un autre navigateur si on mets cette balise CSS3? (navigateur autre que FF bien sur...)
Et ben sur Firefox tu auras un beau cadre arrondi ! Mais sur les autres navigateurs comme IE tu auras un cadre carré avec une bordure autour ... c'est tout
moz-border-radius: 15px;
Cela marche pour tout les bords de ton cadre, biensûr tu peux changer le 15px, mais je pense que c'est une bonne valeur.
Donc pour l utilisé je dois juste mettre dans mon CSS:
moz-border-radius: nbpixexls; ??
En fait ça me parrait étrange le moz devant border-radius ... donc faut il le mettre? Car Si le visiteur de mon site n'a pas FF j aimerais bien qu'il voit quand même les cadres... Meme si ils ne seront pas arrondis
Le visiteur avec mozilla verra de beaux cadres qui lui rappelleont à quel point il est génial parce qu'il a pris un bon navigateur. (humour, on ne troll pas )
L'autre n'y verra que du feu.
Bien sûr il faut que le background-color de <tag> soit différent du background-color du bloc dans lequel il se trouve pour voir les bords arrondis .
le -moz-border-radius ne marche que sur les moteurs mozilla.
je vous donne une methode qui fonctionne sur tous les navigateurs et vous polemiquez encore autour de moz-border?
bonjour,
Pour ton lien donné en exemple, les bordures sont des images. Et la technique d'alsa ou lien donné par raphael sont approprié a l'idée du forum, pas de tableau ni de balise inutile.
il y a aussi les nifty corners (mais un copyright pas clair et un fichier js en option pour automatiser le creation des coins arrondis).
(quand a moi, j'ai la divite j'utilise des div ermpilé du'un px de haut avec des marges differentes lol, je m'y perd dans ces <b> imbriqué).
En bref, si tes bloc ont des largeurs (ou hauteurs)fixes, le plus simple est d'utiliser des images en fond, les liens t'ont deja etait donnés.
Si les arrondis doivent etre repeté sur plusieurs page et/ou endroit de la page, c'est encore l'option "images" la plus facile a gerer.
<divid="cadre"> <divid="hautdroit"></div><divid="hautgauche"></div> <divid="contenu"> <pclass="block"><imgsrc="CSS/Images/4_Hokage.jpg"class="yondaime"alt="Yondaime"/>
Bienvenue sur Naruto Fun!<br/>
Tu es un fan de Naruto?Alors sur ce site, tu pourras
t'eclater, sur ton manga préféré!<br/> <pclass="dessous">Faror</p><br/> </div> <divid="basdroit"></div><divid="basgauche"></div> </div>
</div>
body { width: 760px; margin: auto; /* Pour centrer notre page */ margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */ margin-bottom:20px;/* Idem pour le bas du navigateur */
margin-left:150px; background:url("../CSS/Modele du site/fond2.jpg")center; font: 1em black verdana, sans-serif; background-color: red; }
#cadre {/* taille du cadre, à titre d'exemple */ width: 15em; background-color: #909090; } /* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit { height: 19px; width: 19px; background-repeat: no-repeat; font-size:1px; /* correction d'un bug IE */ } /* propriétés spécifiques à chaque coin */ #hautgauche { background: url("../CSS/Modele du site/hautgauche.gif"); } #hautdroit { float: right; background: url("../CSS/Modele du site/hautdroit.gif"); } #basgauche { background: url("../CSS/Modele du site/basgauche.gif"); } #basdroit { float: right; background: url("../CSS/Modele du site/basdroit.gif"); }
#contenu p { color: white; margin: 0.5em; /*gestion des espaces interparagraphes */ }
Mais, est ce que vous pouvez me donner les bons codes, pour regler le probleme svp??
C'est bon, j'ai trouvé, mais maintenant, mon probleme, c'est qu'il est sur la gauche, et je ne me souviens pas de la balise, qui me permet de le center.Je dois mettre quoi deja pour le centrer dans le css??
C'est bon, j'ai réussis a tout réglé, mais maintenant, j'ai 2 autres problemes.
Regardez mon site:
Mon site Premier probleme:
Donc, comment ca se fait, que dans le cadre c'est ecrit en blanc?(je vous mettrais mon code CSS plus bas)
Deuxieme probleme:
-Premierement, je voudrais, que les coins arrondies en gris, aient le meme fond, que le reste du cadre:comment je dois faire?
-Deuxiement, comment je fais pour que les coins blancs, aient le meme fond que le corps du site??
Voila
Code CSS:
body { width: 760px; margin: auto; /* Pour centrer notre page */ margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */ margin-bottom:20px;/* Idem pour le bas du navigateur */
margin-left:150px; background:url("../CSS/Modele du site/fond2.jpg")center; font: 1em black verdana, sans-serif; background-color:red; } /*---------------------------------------------------------------------------------------------------------------------------*/
a { color:red; }
/*Au passage de la sourie*/
a:hover { color:rgb(49,196,163); font-size:large; }
/*
Pour les liens deja visités
*/
a:visited { color:orange; } /*---------------------------------------------------------------------------------------------------------------------------*/
p { font-size:medium; font-family:"Times New Roman","Comic Sans MS",Arial,"Arial Black",serif; text-align:justify; width:50%; padding:12px;/*La marge interieur,entre la bordure,et entre le texte*/ margin:0px;/*La marge extérieur,entre les paragraphes*/ margin: auto;/*Pour centrer les paragraphes au centre.Attention!il faut d'abord avoir utilisé "width" */ overflow:auto;
#corps { background:url("../CSS/Modele du site/corps3.jpg"); width: 690px; height:1000px;
margin-left: 220px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */ margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */ padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ }
#menu { float: left; /* Le menu flottera à gauche */ width: 206px; /* Très important : donner une taille au menu */ background:url("../CSS/Modele du site/menu.jpg")repeat-x; margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */ margin-right:100px;
}
/*---------------------------------------------------------------------------------------------------------------------------*/ /* Tout ce qui concerne les cadres arrondis */
#cadre {/* taille du cadre, à titre d'exemple */ width: 30em; background:url("../CSS/Modele du site/fond.jpg");
margin-left:100px; margin-top:50px; } /* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit { height: 19px; width: 19px; background-repeat: no-repeat; font-size:1px; /* correction d'un bug IE */ } /* propriétés spécifiques à chaque coin */ #hautgauche { background: url("../CSS/Modele du site/hautgauche.gif"); } #hautdroit { float: right; background: url("../CSS/Modele du site/hautdroit.gif"); } #basgauche { background: url("../CSS/Modele du site/basgauche.gif"); } #basdroit { float: right; background: url("../CSS/Modele du site/basdroit.gif"); }
#contenu p { color: white; margin: 0.5em; /*gestion des espaces interparagraphes */ } /*---------------------------------------------------------------------------------------------------------------------------*/
pour que tes parties blanches de tes coins deviennent transparente il faut que tu le fasse par le biais de ton logiciel de dessin et que tu applique le blanc comme la couleur transparente de ton "gif".
mais tu ne pourras choisir qu'une seule couleur transparente.
tu peut aussi reprendre la couleur dominante du fond de page pour remplacer le blanc, et mettre ton gris en transparent. ou remplacer blanc et gris par les 2 couleurs dominante de tes 2 fond, refaire tes images d'arrondis, etc .. a toi de choisir ce qui te convient le mieux.
pour la couleur blanche de tes paragraphes, c'est indiqué dans le css tout simplement:
extrait:
#contenu p { color: white;/* ici! color donne la couleur du texte, et white = blanc */ margin: 0.5em; /*gestion des espaces interparagraphes */ }
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui