Jump to content

How to hyperlink


newcoder1010

Recommended Posts

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

  • 2 weeks later...

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

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 by newcoder1010
Link to comment
Share on other sites

  • 2 weeks later...

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...