newcoder1010 Posted August 13, 2020 Share Posted August 13, 2020 Hello, HTML: <p class="text-center media"><a href="https://www.facebook.com">f</a> <a href="https://www.twitter.com"> t</a></p> CSS: .media a { padding: 0; /* margin-bottom: 40px; */ /* border-radius: 40px; */ height: 40px; width: 40px; color: white; font-size: 20px; padding: 10px; background: blue; line-height: 40px; } a:hover{background:red;} I like to circle anchor text with blue background. On hover, I like to have red background. Instead of circle, I am getting rectangle background. Please advise! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2020 Share Posted August 13, 2020 Test for you: Take inline elements span, anchor, strong and give them height and width. Take block elements div, p, h1 and give them height, and width. Observe the results what can you conclude from these results. Link to comment Share on other sites More sharing options...
shaili_shah Posted August 14, 2020 Share Posted August 14, 2020 I explain using example. <body> <a href="#" class="circle">f</a> </body> And css will : .circle { border-radius: 100%; padding : 5px; background: blue; display:inline-block; line-height:10px; color : white; text-decoration : none; } use line-height instead of height. See output on : http://jsfiddle.net/tydj79vp/ I hope it will help you. Thanks! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2020 Share Posted August 14, 2020 Explains nothing, and why use line-height: instead of height? Why use border-radius: 100%? Where is width? Without width and height it won't be a circle. Link to comment Share on other sites More sharing options...
newcoder1010 Posted August 14, 2020 Author Share Posted August 14, 2020 Above code does not give me complete circle. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2020 Share Posted August 14, 2020 Because as i mentioned, it has no width so its width is determined by content. The only thing he got right was display: inline-block. This property allows you set height and width. Add this to your original code, with the border-radius: it should be 50%, to center it horizontally use text-align: center; i would use 1em for height, width, and line-height: then it will automatically adjust to font-size: Link to comment Share on other sites More sharing options...
newcoder1010 Posted August 14, 2020 Author Share Posted August 14, 2020 (edited) This worked better except for the padding. I like to put padding around the font. When I put padding, it does not pad properly around the font. .media a { height: 1em; width: 1em; color: white; border-radius: 50%; font-size: 30px; text-align: center; font-weight: bold; /* padding: 10px; */ background: blue; line-height: 1em; display: inline-block; } Edited August 14, 2020 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2020 Share Posted August 15, 2020 Heres an idea, i'll just put it out there, maybe if you know, increase height, width, line-height equally 1.1em, 1.2em so on, until the "padding" looks reasonable correct, that might work! The example i gave is not set in stone, you are allowed to adjust to your needs. Link to comment Share on other sites More sharing options...
newcoder1010 Posted August 16, 2020 Author Share Posted August 16, 2020 I increased to 1.3em for H,W and L. I have the same issue. More than 1.3em makes the circle bigger. I like to keep it between 1em and 1.3em. Thanks! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2020 Share Posted August 16, 2020 (edited) IF the font-size: is correct, and the circle at 1.3em is correct, then the padding is wrong, i don't know why padding is required? Because works to the same principle font-size correct, width height of circle correct, its centred vertically and horizontally because of text-align and line-height, so padding is not required, saying you require padding does not make sense! If you still want padding because it will make you sleep better at night ADJUST THE PADDING, because it must be the only property breaking it if font-size, height and width are correct. Unless you have changed the goal posts and is no longer to original requirements. Also letters are NOT square, you require a lesser padding at top, so enjoying figuring that sizing. Edited August 16, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
newcoder1010 Posted August 16, 2020 Author Share Posted August 16, 2020 Thank you! I will skip the padding which is not required. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now