newcoder1010 Posted April 4, 2017 Share Posted April 4, 2017 Hi, I have this html. <ul class="SocialMediaMenu list-inline"><li class="first leaf"><a href="https://www.facebook.com" title="facebook" target="_blank">f</a></li> <li class="last leaf"><a href="https://twitter.com" title="twitter" target="_blank">t</a></li> </ul> .SocialMediaMenu li { display: block; height: 40px; width: 40px; -moz-border-radius: 30px; border-radius: 30px; color: white; text-align: center; font-size: 2em; float: left; border: 0; margin: 10px; } I can click if I hover over the letters (f, t). Some users may not be able to tell because I have background color on li elements. I was thinking to make the entire li elements hyperlinked. I am not sure how I should solve it or just leave it as is. Please advise. Link to comment Share on other sites More sharing options...
Ingolme Posted April 4, 2017 Share Posted April 4, 2017 Putting the styles on the link itself is the best solution: .SocialMediaMenu li a { /* ... */ } Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 15, 2017 Author Share Posted April 15, 2017 I was able to made progress with your recommendation. However, the texts are not being centered in the circle. If you please take a look, help me with the css. Thanks. https://drive.google.com/open?id=1tPvkCpM25Y0_MhNU4Bhh_b97xU7TC9UebcAB9skY9yY .SocialMediaMenu a { display: block; height: 40px; width: 40px; border-radius: 30px; color: white; text-align: center; font-size: 2em; float: left; border: 0; margin: 10px; } Link to comment Share on other sites More sharing options...
dsonesuk Posted April 15, 2017 Share Posted April 15, 2017 Set line-height: to match height: Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 15, 2017 Author Share Posted April 15, 2017 Thank you. Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 16, 2017 Author Share Posted April 16, 2017 (edited) I have another block I need to apply css to make it circle. I was able to make it circle and I was able to place the arrow inside the circle/centered. However, when I change the size of the arrow to 60px from 30px, arrow no longer in the center of circle. I did try to inspect in chrome and played around and not able to fix it. Please advise. https://drive.google.com/open?id=1tPvkCpM25Y0_MhNU4Bhh_b97xU7TC9UebcAB9skY9yY link .carousel-control.right { height: 60px; width: 60px; border-radius: 60px; color: white; margin: 10px; background: #757376; } .icon-next { width: 60px; // was 30. changed to 60 height: 60px; // was 30. changed to 60 margin-top: -15px; font-size: 60px; // was 30. changed to 60 } Edited April 16, 2017 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 16, 2017 Share Posted April 16, 2017 If the arrow is textual font arrow or glyph using text-align: center; will centre it horizontally, line-height: made same as height as before will centre it vertically. Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 29, 2017 Author Share Posted April 29, 2017 Thank you but I could not make it work the way I wanted. At least I made progress. I was able to put the arrow somewhat center but not 100%. I did try to apply what you recommended but I am confused how to follow your suggestion. I would ask you if you could visit my page and view the slideshow. Some default css also making it confusing. Two issues: How to put the circle center of the image height? I used margin-top:20% as shown below (css1) as workaround. It is not fully centered of the image height. How to put the arrow in the center of the circle? I was able to do somewhat using below css2. CSS1: .carousel-control.right { height: 60px; width: 60px; border-radius: 60px; color: white; margin: 10px; background: #757376; margin-top: 20%; } CSS2 .carousel-control .icon-next, .carousel-control .icon-prev { font-size: 80px; margin-right: -15px; margin-top: -50px; } I spent last 3 hours for the above workaround. It would be helpful if you could provide me the ideal solution. Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 29, 2017 Share Posted April 29, 2017 You may need to adjust, as my interpretation of centre of these arrows might be different to yours #views-bootstrap-carousel-1 .carousel-control .icon-prev, #views-bootstrap-carousel-1 .carousel-control .icon-next { display: inline-block; height: 100%; line-height: 47px; margin: 0; position: static; text-align: center; width: 100%; } 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