Html Question posted in
Some basic documentation can be found here.

Html – White ring around CSS image

I am trying to create a flowing action button, but the British flag had a white ring around it, which I do not want. I want the two flags to be centered above the British flag. I wouldn’t mind the british flag being as big as the white ring.

document.querySelector('.lang-dropbtn').addEventListener('click', function(event) {
  document.querySelector('.lang-dropdown-content').classList.toggle('show');
  event.stopPropagation(); // Stop propagation to prevent window click handler from closing the dropdown immediately
});

window.onclick = function(event) {
  if (!event.target.closest('.language-dropdown')) {
    var dropdowns = document.getElementsByClassName("lang-dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      dropdowns[i].style.display = 'none';
    }
  }
}
.language-dropdown {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: inline-block;
  z-index: 2000;
  /* Ensuring it is above other content */
}

.lang-dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  /* Rounded button */
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  bottom: 70px;
  /* Adjusted for spacing */
  z-index: 1;
  padding: 5px;
  /* Padding around flags */
}

.lang-dropdown-content .lang-a {
  color: black;
  display: block;
  margin: 5px 0;
  /* Vertical spacing between flags */
}

.lang-dropdown-content .lang-a .lang-img {
  width: 50px;
  height: auto;
  border-radius: 50%;
  /* Make images circular */
  display: block;
  margin: auto;
  /* Center align images */
}

.language-dropdown:hover .lang-dropdown-content {
  display: block;
  /* Show dropdown on hover */
}
<div class="language-dropdown">
  <button class="lang-dropbtn">
    <img class="lang-img" src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/171f64-06f6-0f4b-8e88-7b2cded67131_british_flag.png" alt="British" style="width:40px;height:auto;">
  </button>
  <div class="lang-dropdown-content">
    <!-- <a class="lang-a" href="/en"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/171f64-06f6-0f4b-8e88-7b2cded67131_british_flag.png" alt="British"></a> -->
    <a class="lang-a" href="/cn"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/e0bb117-b0a2-40b-0145-11ae625b76ca_chinese_flag.png" alt="Chinese"></a>
    <a class="lang-a" href="/ar"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/7c2c8b5-343-6aa2-240-dd2613be2af8_saudi_flag.png" alt="Arabic"></a>
  </div>
</div>

enter image description here

Tags:

2

Answers


  1. 0

    For the white around the British Flag, have you tried to implicitly say background: none, to get rid of the white? And as for the rest, maybe try and use display: grid as it would make it much more simper to align. I am not a pro so if YOU see I made a mistake, lemme know, I wanna learn too 🙂

    Login or Signup to reply.
  2. 0

    It looks like the problem is occurring in your styling for the lang-dropbtn class. You specified a padding of 16px, which is causing the aforementioned background issue. To fix this, there are two routes.

    1. You can remove the padding entirely, as shown in the code snippet at the end of the answer.
    2. You can remove the background only by using background: none.
    document.querySelector('.lang-dropbtn').addEventListener('click', function(event) {
  document.querySelector('.lang-dropdown-content').classList.toggle('show');
  event.stopPropagation(); // Stop propagation to prevent window click handler from closing the dropdown immediately
});

window.onclick = function(event) {
  if (!event.target.closest('.language-dropdown')) {
    var dropdowns = document.getElementsByClassName("lang-dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      dropdowns[i].style.display = 'none';
    }
  }
}
    .language-dropdown {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: inline-block;
  z-index: 2000;
  /* Ensuring it is above other content */
}

.lang-dropbtn {
  padding: 0; /* changed from 16px to 0 to remove background */
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  /* Rounded button */
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  bottom: 70px;
  /* Adjusted for spacing */
  z-index: 1;
  padding: 5px;
  /* Padding around flags */
}

.lang-dropdown-content .lang-a {
  color: black;
  display: block;
  margin: 5px 0;
  /* Vertical spacing between flags */
}

.lang-dropdown-content .lang-a .lang-img {
  width: 50px;
  height: auto;
  border-radius: 50%;
  /* Make images circular */
  display: block;
  margin: auto;
  /* Center align images */
}

.language-dropdown:hover .lang-dropdown-content {
  display: block;
  /* Show dropdown on hover */
}
    <div class="language-dropdown">
  <button class="lang-dropbtn">
    <img class="lang-img" src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/171f64-06f6-0f4b-8e88-7b2cded67131_british_flag.png" alt="British" style="width:40px;height:auto;">
  </button>
  <div class="lang-dropdown-content">
    <!-- <a class="lang-a" href="/en"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/171f64-06f6-0f4b-8e88-7b2cded67131_british_flag.png" alt="British"></a> -->
    <a class="lang-a" href="/cn"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/e0bb117-b0a2-40b-0145-11ae625b76ca_chinese_flag.png" alt="Chinese"></a>
    <a class="lang-a" href="/ar"><img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2156294001/settings_images/7c2c8b5-343-6aa2-240-dd2613be2af8_saudi_flag.png" alt="Arabic"></a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search