Tom's Guide > Forum > Programmation > Onglets de mon menu arrondie

Onglets de mon menu arrondie

Forum Programmation : Onglets de mon menu arrondie

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
mike24510   13-07-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/ [...] _sujet.htm 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.

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
PGM_du_net   13-07-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;

Répondre à PGM_du_net
Badge Programmation Bronze Allstar27   13-07-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...


Message édité par Allstar27 le 13-07-2009 à 08:22:32
------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
 Répondre à Allstar27
mike24510   13-07-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 ?

Répondre à mike24510
Badge Programmation Bronze Allstar27   13-07-2009 à 23:00:24

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

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



Ensuite dans le css:

Code :
  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...

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
 Répondre à Allstar27
Badge Programmation Bronze SiM07   14-07-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 http://img.infos-du-net.com/forum/icones/message/new/options.gif

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.

------------------------------ 20minutes.fr, l'information en continu.
 Répondre à SiM07
mike24510   15-07-2009 à 23:05:09

Ok merci je vais essayer les deux solutions.

Répondre à mike24510
mike24510   23-07-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

Répondre à mike24510
PGM_du_net   25-07-2009 à 13:17:49

Firefox ou Internet Explorer?

J'ai ça dans mon code source:

Code :
  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. }


Répondre à PGM_du_net
tracks@idn   26-07-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.

Répondre à tracks@idn
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Onglets de mon menu arrondie
Aller à :

Il y a 352 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,349 secondes
Liens