padding et border Résolu/Fermé

Question

Bonjour, j'ai une div ronde(#project1), qui est dans une autre div ronde(#huhu), cette dernière est vide, auquel j'ai mis un border et un padding histoire de faire ma div avec image, avec un "espace dans le vide" suivi 10pixels plus loin d'un border, j'espère que je suis assez clair, galère a expliquer. Et le soucis est que la div(#huhu) avec border et padding est décallé par rapport à la première(#project1) ... Et je ne comprend pas pourquoi. voici monde code :

#project1{ position:absolute; margin-top:60px; margin-left:80px; background:url(../img/test.png) no-repeat; background-size:cover; border-radius:50%; width:400px; height:400px; } #project1 #huhu{ border : 5px solid black; padding:10px; border-radius:50%; width:100%; height:100%; }

Utilisateur anonyme · Answer

Utilise JSFiddle ou un truc du genre car là il est difficile de te comprendre :S

https://jsfiddle.net/

help · Answer

Désolé j'aurais du poster une image pour que ça soit plus compréhensible, en voici une :
http://image.noelshack.com/fichiers/2014/50/1418293743-test.png

Comme vous pouvez le voir j'ai une image en noir et blanc avec une fine bordure, c'est ma div project1.

Et à l' intérieur j'ai une bordure de couleur silver et gray, c'est ma div #huhu
Le résultat que vous voyez est bien ce que je veux obtenir, sauf que pour ma div #huhu soit bien "centrer" en fonction de mon autre div, j'ai été obligé de mettre et margin top et left : -15px, et je ne comprend pas pourquoi ce décallage.

Utilisateur anonyme · Answer

Oui enfin je comprend pas pourquoi tu essayes de centrer une div qui est plus grande que son parent, enfin je trouve que tu prend le problème à l'envers, tu te met trop de difficulté.

Il est plus simple qu'ici ça soit la div parent (#projet) qui soit la bordure et l'enfant l'image (#huhu)

Essaye comme ça:

#project1 {
    padding: 10px;
    border-radius: 50%;
    border : 5px inset;
    width: 400px;
    height: 400px;
}
#huhu {
    border: 1px solid #ffffff;
    border-radius: inherit;
    background: url(../img/test.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

help · Answer

C'est exactement ça merci pour ton aide, je sais pas comment je me suis débrouillé, je me suis un peu embrouillé !
Mais tout est nikel maintenant encore merci :)

Padding et border

4 réponses

Discussions similaires