Padding et border
Résolu
help
-
help -
help -
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 :
<div id="project1">
<div id="huhu"></div>
</div>
#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%;
}
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 :
<div id="project1">
<div id="huhu"></div>
</div>
#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%;
}
A voir également:
- Padding et border
- Border maker - Télécharger - Retouche d'image
- Impression photo 13x18 ? et 10x15 sans bords - Forum Graphisme
- Voici pourquoi les agents de bord vous disent bonjour quand vous montez dans l'avion - et ce n'est pas par politesse ! - Guide
- Voyage en avion : voici les objets et produits interdits dans vos bagages à bord - Guide
4 réponses
Utilise JSFiddle ou un truc du genre car là il est difficile de te comprendre :S
https://jsfiddle.net/
https://jsfiddle.net/
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.
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.
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:
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%;
}