Table arrondi

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Table arrondi

Message par nostra le Sam 26 Nov 2011 - 22:31

Bonsoir à tous,

En faisant une recherche sur ce forum j'ai trouvé ce topic:

=> http://forum.forumactif.com/t306078-table-comme-sur-le-fdf?highlight=table+class

Et ce code:

Code:
.xxx {
-moz-box-shadow: 1px 1px 20px #0000ff;
  -webkit-box-shadow: 1px 1px 20px #0000ff;
  box-shadow: 1px 1px 20px #0000ff;
 
}

ça marche bien mais le problème c'est que les contours ne sont pas arrondis, il y aurait un moyen de rendre les contours arrondis svp comme sur le Fdf(j'ai essayé de trouver mais rien pour ma part) Very Happy

Merci d'avance et bonne soirée Very Happy


Dernière édition par nostra le Dim 4 Déc 2011 - 18:00, édité 1 fois

nostra
Nouveau membre

Messages : 10
Inscrit(e) le : 18/02/2011

http://cbcgroup.forumactif.com/
nostra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Table arrondi

Message par castafiore le Dim 27 Nov 2011 - 1:48

Pour arrondir les angles en css, j'utilise les codes suivants :

Code:
-moz-border-radius-topright: XX px ;
-webkit-border-top-right-radius: XX px ;
-webkit-border-top-left-radius: XX px ;
-border-top-right-radius: XX px ;

XX = indiquer le nombre de pixels = rayon du 1/4 de cercle souhaité

Et, bien entendu:

top , pour les angles du haut, bottom pour ceux du bas et right ou left, pour les angles droit et gauche (si on souhaite les arrondir séparément).
Si on souhaite appliquer des arrondis aux 4 angles, on peut simplifier en écrivant comme ceci:

Code:
border-radius: 5px 10px 0 5px;

Comme tu le vois aussi, ces commandes ne fonctionnent pas sous Explorer mais elles fonctionnent avec G.Chrome(webkit) et Firefox (mozilla).

Pour Safari, on peut ajouter cette ligne en CSS :
Code:
-khtml-border-radius

Pour Explorer, jusqu'à sa version 8, ça ne marche pas mais il existe d'autres solutions (nettement plus compliquées).

castafiore
Nouveau membre

Messages : 23
Inscrit(e) le : 12/11/2009

http://johns-tapas-bar.forumactif.org/forum.htm
castafiore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Table arrondi

Message par nostra le Dim 27 Nov 2011 - 11:29

Bonjour,

Ok merci, voilà ce que j'ai mis:

.xxx {
-moz-box-shadow: 1px 1px 20px #0000ff;
-webkit-box-shadow: 1px 1px 20px #0000ff;
box-shadow: 1px 1px 20px #0000ff;
border-radius: 5px 10px 0 5px;
}

Et voilà ce que ça donne:



Comment dois-je faire pour faire apparaître la partie supérieure et gauche du contour?

Merci d'avance Very Happy

nostra
Nouveau membre

Messages : 10
Inscrit(e) le : 18/02/2011

http://cbcgroup.forumactif.com/
nostra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Table arrondi

Message par castafiore le Dim 27 Nov 2011 - 12:09

Il suffit d'indiquer l'épaisseur et la couleur de son trait comme ceci (c'est un exemple):

Code:
border: 3px solid #000000;

Je signale aussi ce lien qui est très pratique pour tester rapidement l'effet visuel des arrondis qu'on souhaiterait appliquer sur son forum :

Code:
http://border-radius.com/

castafiore
Nouveau membre

Messages : 23
Inscrit(e) le : 12/11/2009

http://johns-tapas-bar.forumactif.org/forum.htm
castafiore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Table arrondi

Message par nostra le Dim 27 Nov 2011 - 12:20

Ok merci ça fonctionne cheers

Désolé de t'importuner encore une fois mais ça sera la dernière:

Comment on fait pour obtenir le fond blanc avec une écriture automatisée comme ici?

@AlanBike a écrit:
Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

Désolé de poser trop de questions Embarassed

nostra
Nouveau membre

Messages : 10
Inscrit(e) le : 18/02/2011

http://cbcgroup.forumactif.com/
nostra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Table arrondi

Message par castafiore le Dim 27 Nov 2011 - 12:30

Je ne sais pas ce que tu entends par "écriture automatisée"... Peux-tu m'expliquer?

Pour le fond, le code CSS, c'est simple:

Code:
color: #FFFFFF;

castafiore
Nouveau membre

Messages : 23
Inscrit(e) le : 12/11/2009

http://johns-tapas-bar.forumactif.org/forum.htm
castafiore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Table arrondi

Message par nostra le Dim 27 Nov 2011 - 12:37

@castafiore a écrit:Je ne sais pas ce que tu entends par "écriture automatisée"... Peux-tu m'expliquer?

Pour le fond, le code CSS, c'est simple:

Code:
color: #FFFFFF;

Je parlais de la mise en forme de l'écriture, mais je saurais faire Very Happy

Un grand merci pour ton aide cheers

Je mets résolu Very Happy

nostra
Nouveau membre

Messages : 10
Inscrit(e) le : 18/02/2011

http://cbcgroup.forumactif.com/
nostra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Table arrondi

Message par castafiore le Dim 27 Nov 2011 - 12:46

Content d'avoir pu t'aider.

Pour les polices, le code, c'est:
Code:
font-family: times;
(times est un exemple mais, attention: il vaut mieux en proposer plusieurs, au cas où ceux qui ouvrent ta page n'ont pas ce type de police sur leur ordinateur.

donc, ceci, par exemple est mieux:
Code:
font-family: Comic Sans MS, arial, Times, Helvetica, sans-serif;

Pour la taille des polices, c'est
Code:
font-size:XXpx;
et pour les couleurs de polices [code]font-color: #xxxxxx;code]

Tu peux même y ajouter de l'ombre portée, avec ce code:

[code]text-shadow: 2px 2px 2px #C0DAF3;[/code]

le nombre pixels sert à indiquer l'importance du décalage de l'ombre portée (et on peut y ajouter la couleur de son choix).


Dernière édition par castafiore le Dim 27 Nov 2011 - 12:48, édité 1 fois

castafiore
Nouveau membre

Messages : 23
Inscrit(e) le : 12/11/2009

http://johns-tapas-bar.forumactif.org/forum.htm
castafiore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Table arrondi

Message par nostra le Dim 27 Nov 2011 - 12:48

@castafiore a écrit:Content d'avoir pu t'aider.

Pour les polices, le code, c'est:
Code:
font-family: times
(times est un exemple mais, attention: il vaut mieux en proposer plusieurs, au cas où ceux qui ouvrent ta page n'ont pas ce type de police sur leur ordinateur.

donc, ceci, par exemple est mieux:
Code:
font-family: Comic Sans MS, arial, Times, Helvetica, sans-serif;

Pour la taille des polices, c'est
Code:
font-size:
et pour les couleurs de polices
Code:
font-color:

Tu peux même y ajouter de l'ombre portée, avec ce code:

Code:
text-shadow: 2px 2px 2px #C0DAF3;

le nombre pixels sert à indiquer l'importance du décalage de l'ombre portée (et on peut y ajouter la couleur de son choix).

Merci beaucoup je vais m'y mettre cheers

nostra
Nouveau membre

Messages : 10
Inscrit(e) le : 18/02/2011

http://cbcgroup.forumactif.com/
nostra a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum