Arrondir les coins des catégories sans arrondir les cellules

[Invité]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://homesweethome.forumperso.com

Description du problème

Bonjour,

Voilà, après une bonne recherche sur le forum ainsi qu'après avoir essayé plusieurs codes, n'ai toujours pas trouvé le bon.

J'aimerais n'arrondir que les coins de mes catégories et non ceux des cellules.

Merci de bien vouloir m'aider !

[MlleAlys]

Bonjour,
Vous pouvez utiliser ce code, mais dans ce cas tout ce qui dépassera des tableaux arrondis ne sera plus visibles (si vous avez par exemple des infobulles, ou des titres mis en forme à cheval, ou autre, qui pourraient dépasser, ça pourrait être ennuyant) :

Code:

table.forumline {
  border-radius: 15px;
  overflow: hidden;
}

Modifiez la valeur de 15px pour augmenter ou diminuer l'arrondi.

[Invité]

Cool ! Cette fois tout est presque parfait si ce n'est que le coin gauche au bas de mon image du ''Qui est en ligne'' que je ne trouve pas très joli. Vous pouvez m'aider en ce sens ?

Tiens, y'a un moyen facile d'arrondir les coins de nos images ?

Merci pour votre aide ?

[MlleAlys]

Pour arrondir le coin de l'image du qeel, voici le code suivant :

Code:

img#i_whosonline {
  border-bottom-left-radius: 7px;
}

Pour arrondir les coins de toutes les images, sans exception, il faut appliquer le border radius à toutes les balises de type img :

Code:

img {
  border-radius: 10px;
}

[Invité]

Madame, je vous adore !!!!!

[Invité]

Re-bonjour !

Une autre petite question...

Est-ce possible de n'arrondir que le coin gauche au bas de mon image du qeel ?

[MlleAlys]

modifiez le code

Code:

img#i_whosonline {
  border-bottom-left-radius: 7px;
}

donné plus haut par :

Code:

img#i_whosonline {
  border-radius: 0px 0px 0px 7px;
}

(les valeurs dans l'ordre correspondent à l'arrondi du coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche)

[Invité]

Ça y est, suis pleinement satisfaite. Un grand merci à vous MlleAlys, vais de ce pas le cocher résolu pour de bon.

[FANCH 56]

Bonsoir

Je m'immisce.

J'ai mis ton code CSS qui m'intéresse pour les images MlleAlys.

Mais il n'y a que le haut des images qui s'arrondissent.

J'aurais voulu pour les quatres coins.

Est-ce possible

J'ai mis ce code, cela ne fonctionne pas

Code:

    img {
          border-radius: 10px;
  border-bottom: 10 px;
        } 

[MlleAlys]

bonjour FANCH 56,
lorsque j'inspecte votre page, je vois ce code :

Code:

img {
  border-bottom: 10px px;
  border-radius: 10px;
  border-width: 0;
  padding-bottom: 10px;
}

Soit il est ainsi dans votre css, soit votre css contient une erreur qui fait qu'un code est interprété de cette façon :
La première ligne border-bottom: 10px px; n'est pas fonctionnelle, et est d'ailleurs contredite par la troisième.
Concernant l'arrondi, c'est le padding-bottom le fautif : l'arrondi d'applique aux bords de l'élément image, et le padding est considéré comme en faisant partie, c'est donc le padding qui est arrondi en bas (en mettant une couleur de fond ou une bordure à l'image c'est visible http://jsfiddle.net/fLLh6hrg/ ^^).

Vous pouvez remplacer le padding par un margin, ce qui donne finalement le code :

Code:

img {
  border-radius: 10px;
  margin-bottom: 10px;
}

La marge inférieur ne fait alors plus partie de l'élément image et l'arrondi est bien visible sur l'image.

Puisque le sujet est résolu pour dopamine je le verrouille, n'hésitez pas àen rouvrir un si vous avez un souci ^^