Se connecter / S'enregistrer
Votre question

Onglets de mon menu arrondie

Tags :
  • Programmation
Dernière réponse : dans Programmation
13 Juillet 2009 02:39:04

Bonjour à tous

Voilà tous est dans le titre. Je voudrais savoir comment faire pour que les angles de mes onglets de mon menu sois arrondi un peut comme ce site: http://www.infos-du-net.com/forum/Programmation/nouveau... les boutons "rédigé un tuto" et "rédigé une new" sont arrondi je voudrais que mes onglets soit un peut comme sa mais je ne sais pas comment faire merci d'avance.

Autres pages sur : onglets menu arrondie

13 Juillet 2009 05:14:40

Soit tu passes par un logiciel de dessin en créant les boutons, soit tu ajoutes une feuille de style en css:
-moz-border-radius-bottomleft: xpx;
-moz-border-radius-bottomright: xpx;
-moz-border-radius-topleft: xpx;
-moz-border-radius-topright: xpx;
m
0
l
13 Juillet 2009 08:22:13

Sauf que la méthode de PGM n'est pas compatible avec tout les navigateurs, je crois même qu'elle n'est valable que sur Firefox...

m
0
l
Contenus similaires
13 Juillet 2009 11:09:31

Ok et les moz-border-raduis on les place dans class "onglets" dans mon fichier css que j'ai crée mon faire mes onglets ?

Es que l'on peut les faire avec paintshop ?
m
0
l
13 Juillet 2009 23:00:24

Pour moz-border-raduis, tu dois créer une div par exemple...

  1. <div id="rectangle_arrondi">le texte</div>


Ensuite dans le css:

  1. #rectangle_arrondi {
  2. width: 100px;
  3. height: 100px;
  4. background: #000000;
  5. border: 1px solid red;
  6. -moz-border-radius-bottomleft: 5px;
  7. -moz-border-radius-bottomright: 5px;
  8. -moz-border-radius-topleft: 5px;
  9. -moz-border-radius-topright: 5px;
  10. }


Tu auras donc un rectangle arrondi sur fond noir avec une bordure rouge.

Oui tu peux les faires sur paintshop...
m
0
l
14 Juillet 2009 01:41:25

Cette solution est compatible qu'avec les navigateur utilisant le moteur de rendu Gecko à savoir Firefox, Flock, SeaMonkey ...

Il y a aussi -webkit-border-radius pour les navigateurs basé sur Webkit, à savoir Safari, Chrome ...

Dans l'exemple que tu donnes, ils utilises une images en background

En fait il existe des tonnes de solution sur le net mais généralement si tu veux qqchose de compatible avec tous les navigateurs alors tu devras utiliser des images.
m
0
l
15 Juillet 2009 23:05:09

Ok merci je vais essayer les deux solutions.
m
0
l
23 Juillet 2009 23:05:45

Bonsoir à tous

Je sais je ressort un peut ce vieux topic mais je n'ai pas pu essayé la solution proposé de suite mais voila je vient d'essayer le code de Alstar27 mais sa ne marche pas bien, c'est un carré avec fond noir et bordure rouge qui n'ait pas arrondie qui s'affiche, je ne sais pas pourquoi voici le code:

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<div id="rectangle_arrondi">le texte</div>


</body>
</html>


CSS:

#rectangle_arrondi {
width: 100px;
height: 100px;
background: #000000;
border: 1px solid red;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}

Je précise que j'ai essayer avec, et sans les tirets mais on dirré qu'il ne reconnait pas les moz-border-raduis, et je rajoute que j'ai lancé mon fichier avec mozilla. voila pourquoi sa ne fonctionne pas ? merci d'avance.

PS: comment faire une image d'un onglet arrondie avec paintshop ? merci d'avance
m
0
l
24 Juillet 2009 21:13:50

Quelqu'un ?
m
0
l
25 Juillet 2009 13:17:49

Firefox ou Internet Explorer?

J'ai ça dans mon code source:

  1. #bordure
  2. {
  3. border-style: double;
  4. border-color: #333399;
  5. border-width : 2px;
  6. -moz-border-radius:7px;
  7. -webkit-border-radius:7px;
  8. -khtml-border-radius:7px;
  9. }

m
0
l
26 Juillet 2009 23:12:53

Oui utilise des images de fond pour faire tes arrondis, si tu ve que ca passe sur tout les nav en tout cas.

ex de css (si tu connais la largeur de tes onglets) :
.rectangle_arrondi {
background:url(options.gif) 0 0 no-repeat;
width:108px;
height:30px;
text-align:center;
}
et le html :
<div class="rectangle_arrondi">le texte</div>

Les border-radius c'est du css3, encore tres peut compris par les nav.
m
0
l
Contenus similaires
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS