Arrondir les coins des catégories sans arrondir les cellules

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

Résolu Arrondir les coins des catégories sans arrondir les cellules

Message par Invité le Dim 19 Avr 2015 - 12:58

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 ! Confused


Dernière édition par Dopamine le Dim 19 Avr 2015 - 16:47, édité 2 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par MlleAlys le Dim 19 Avr 2015 - 13:11

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.

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par Invité le Dim 19 Avr 2015 - 13:27

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 ? Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par MlleAlys le Dim 19 Avr 2015 - 13:45

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;
}

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par Invité le Dim 19 Avr 2015 - 14:01

Madame, je vous adore !!!!! ::fete::

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par Invité le Dim 19 Avr 2015 - 16:18

Re-bonjour ! Smile

Une autre petite question...

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par MlleAlys le Dim 19 Avr 2015 - 16:27

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)

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par Invité le Dim 19 Avr 2015 - 16:46

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par FANCH 56 le Dim 19 Avr 2015 - 16:57

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;
        } 


FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir les coins des catégories sans arrondir les cellules

Message par MlleAlys le Dim 19 Avr 2015 - 17:09

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 ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys 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